A Deep Dive into Calling JavaScript Functions on Page Load

Running code on page load is a fundamental part of most JavaScript web apps. Initializing libraries, bootstrapping frameworks, loading data, attaching events are all common tasks developers need to perform upfront.

But with many ways to detect page load and differsing browser support, the entire process can become overly complex.

In this comprehensive technical guide, you will gain an expert-level understanding of the various methods to call JavaScript functions on page load using modern best practices.

We will analyze the performance implications, edge cases, and pros and cons of each approach in detail across evergreen browsers. By the end, you will know how to architect robust logic that fires reliably on load according to your specific needs.

Why Call JavaScript on Page Load

Before we dig into the how, let‘s briefly motivate why calling JavaScript functions on page load is so common and important:

Initialize Third-Party Libraries

Most web apps use libraries like React, Vue, jQuery etc. These need to be initialized before rendering views:

// bootstrap library  
$(document).ready(function() {
  // init feature modules
});

Run Analytics Code

Analytics tools often require snippets like Google Tag Manager to fire on page load:

<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag(‘js‘, new Date());

  gtag(‘config‘, ‘GA_MEASUREMENT_ID‘);
</script>

Show Blocking UI as Fast as Possible

Rendering loading indicators or splash screens allows users to see progress at startup:

window.onload = function() {
  // hide loader, reveal page content  
};

This provides input that the app is initializing and prevents a blank loading screen.

Load Initial Data from API

Apps often retrieve data from a database or third-party API on load:

document.addEventListener(‘DOMContentLoaded‘, function() {

  // get initial records from REST API

})

This seeds necessary starting data that the user would expect to see immediately.

Dynamically Insert Content

DOM manipulation functions must run after elements they target exist:

window.onload = () => {

  const pageContainer = document.querySelector(‘#page‘);

  pageContainer.insertAdjacentHTML(
    ‘beforeend‘,
    ‘<p>I was injected!</p>‘
  );

}

These are just some common examples of why calling JavaScript functions on page load is so widely required.

Now let‘s analyze the best practices around handling load events.

window.onload vs DOMContentLoaded vs document.onload

The load events your code should listen for broadly fall into two categories:

1. DOM Fully Loaded – Window and document load events
2. DOM Ready – DOMContentLoaded event

Let‘s discuss the specifics of each:

window.onload

The window.onload event handler runs when the full document including all dependent resources like images have loaded:

window.onload = function() {
  // window and dom loaded
}; 

This ensures all page elements exist in the DOM and are queryable/manipurable by scripts.

However, window.onload has a major downside – it can take multiple seconds to fire in large web apps. This leads to an unresponsive blank loading screen that harms user experience.

document.onload

The document.onload event behaves identically to window.onload:

document.onload = () => {
  // full document loaded  
}

Use whichever reads more clearly in your code. But both wait for all page resources like CSS, images, etc.

This means they come with the same long loading delays before firing.

DOMContentLoaded

The DOMContentLoaded event fires when just the HTML document finishes loading without waiting for additional page resources:

document.addEventListener(‘DOMContentLoaded‘, () => {
  // DOM ready, can query elements 
});

Since this event doesn‘t wait for images, CSS, etc it fires much sooner than window.onload – up to 4x faster according to research.

However, DOM manipulation may cause some visual reflows on slower connections if stylesheets are still loading.

Overall, DOMContentLoaded provides the best performance tradeoff in most cases – it waits for necessary HTML elements while activating much faster than full load events.

Load Performance Metrics

Let‘s analyze some real-world load delay figures comparing DOM ready vs fully loaded events provided by Steve Souders, a leading web performance expert.

The metrics reflect cold load times for real users accessing web pages on a popular eCommerce site:

Metric	DOMContentLoaded	window.onload	% Difference
First Paint	1250 ms	1250 ms	0%
DOM Ready	1581 ms	1581 ms	0%
Fully Loaded	6062 ms	6062 ms	0%
Total Delay	331 ms	4812 ms	1356%

Key findings:

• DOMContentLoaded fired 4.8 seconds faster than window.onload
• DOM ready only adds 331 milliseconds vs fully loaded
• First paint is unaffected by load event used

For users on slower devices or poor connections, this difference could be even more dramatic.

Calling code on DOMContentLoaded prevents apps from being dead during initial document loading while still finishing significantly faster than full load events.

Other Methods to Initialize JavaScript on Page Load

Beyond just load events, modern browsers give us a few other options to execute JavaScript early during and after page load:

setTimeout

setTimeout() schedules a function to run after a delay:

setTimeout(() => {
  // runs after 0 ms  
}, 0); 

Even with a delay of 0 ms, this allows browsers to complete any other parsing logic first prior to invoking our code.

Key Benefit – Guarantees init logic executes only after full document has been processed.

Drawbacks – Requires guessing at delay length; no guarantee DOM will be ready yet.

requestAnimationFrame

The requestAnimationFrame() method tells the browser we wish to perform an animation, requesting a fast callback:

requestAnimationFrame(() => {    
  // browser attempts high FPS callback  
});

As this inherently waits for rendering to begin, it ensures documents are parsed fully like setTimeout.

Benefits – Fast callback without guessing delay; intuitive naming.

Drawback – No DOM readiness guarantees; new browsers only.

load Event on Certain Elements

You can also attach load events to the window, document, images, scripts, etc separately from top-level load events:

window.addEventListener(‘load‘, () => {
  // window loaded
});

const image = document.getElementById(‘hero‘); 
image.onload = () => {
  // image loaded 
}

Benefits – Granular control over specific resources.

Drawbacks – Cannot determine if full document ready; verbose setup.

Now let‘s turn our attention to executing init logic before page load…

Script Loading Strategies

In addition to page load events, we have options controlling precisely when our JavaScript runs during page load in the first place using script loading attributes:

Async Scripts

The async attribute downloads and runs external scripts without blocking page parsing:

<!-- other HTML continues parsing -->

<script async src="app.js"></script>  

<!-- document keeps loading -->

Async scripts have three key traits:

• Downloads in background without blocking page loads
• Executes as soon as finished downloading
• Runs in no guaranteed order

This allows loading any vendors libraries or utilities that do not need ordered syncing with other scripts.

Defer Scripts

The defer attribute also downloads scripts without blocking but only executes guaranteed in order after full document parsing:

<script defer src="widget.js"></script>
<script defer src="modal.js"></script> <!-- guaranteed order-->

Deferred scripts share async‘s non-blocking downloads but run predictably after documents finish loading.

This approach ensures DOM access in scripts since elements always exist first.

Preload Scripts

The <link rel="preload"> instruction tells browsers to immediately start fetching scripts with priority:

<head>
  <!-- preload high priority script --> 
  <link rel="preload" as="script" href="critical.js"> 
</head>

<body>
  <script src="critical.js"></script> <!-- already preloaded -->
</body>

This technique downloads crucial scripts sooner without blocking rendering like defer/async attributes.

Performance Comparison

Let‘s analyze some real-world script loading metrics comparing async, defer, preloading and normal scripts:

Insights:

• Async scripts loaded 2x faster but ran out of order
• Deferred scripts loaded 2x faster and retained order
• Preloaded scripts loaded 3x faster in same execution position

So by combining preloading techniques with deferred scripts, critical libraries can run faster while retaining sequence guarantees.

Putting It All Together

Now that we have explored various events and attributes around JavaScript execution on load, let‘s outline a complete example flow:

// preload non-critical vendor libraries ASAP  
<link rel="preload" href="jquery.js"> 

// load critical init logic deferred after DOM exists 
<script defer src="app.js"></script>

document.addEventListener(‘DOMContentLoaded‘, () => {

  // DOM ready -> init UI
  initUI();

  // optionally load remaining data
  loadData();

});

function initUI() {

  // display splash screen 
  $(‘#splash‘).show(); 

  // cache DOM references, attach events
  const nav = $(‘#nav‘);
  // ...

}

async function loadData() {

  try {  
    const response = await fetch(‘/data‘); // async allows UI to remain active    
    displayData(await response.json());

  } catch(err) {

    $(‘#splash‘).html(‘Error loading data‘);

  }

}

function displayData(data) {
  // populate #main  
}

This combines multiple techniques for optimal loading:

• Preload external vendors like jQuery
• Defer application script to ensure DOM exists
• Bind DOMContentLoaded to launch UI ASAP
• Optionally call secondary logic to retrieve data
  • Keeps UI active with async/await

By assembling calls to various initialization functions across load events, scripts, and preloading, we build a robust page load sequence.

Anti-Patterns to Avoid

While we have covered many best practices so far, let‘s call out a few common anti-patterns that harm page load performance:

Blocking Scripts

Avoid using regular script tags that halt HTML parsing and DOM construction:

<!-- blocks loading -->
<script src="app.js"></script> 

<!-- large impact for slow-loading bundles -->
<script src="bundle.js"></script> 

These scripts occupy the main thread and prevent element loading until finished.

Excessive/Slow window.onload Logic

Don‘t overstuff too much logic in window.onload handlers which further delays interactivity:

window.onload = function() {

  // loading unnecessary images
  preloadLargeCarouselImages();  

  // querying DOM for no reason 
  getAllElementsOnPageByTag(‘img‘);

  // expensive unnecessary work
  runCpuIntensiveDataAnalysis();

};

Aim to run only necessary init work on window/document load.

Multiple Redundant Load Events

Attaching the same initialization logic across DOMContentLoaded, window.onload, etc introduces duplication:

document.onDOMContentLoaded = initUI;

window.onload = initUI;

$(document).ready(initUI); // jQuery ready

Figure out the fastest necessary event for each logic flow needed.

By avoiding these performance traps during development, apps can load reliably faster.

Conclusion

We took an in-depth expert look at the various options available for calling JavaScript functions on page load:

• Load events – window.onload, DOMContentLoaded, document.onload
• Timed callbacks – setTimeout, requestAnimationFrame
• Script loading – async, defer, preload

To build high-performance apps:

• Initialize UIs on the DOMContentLoaded event
• Use deferred scripts to ensure execution order
• Preload resource-heavy vendor libraries
• Avoid blocking scripts or overstuffed window.onload

Combining these techniques allows crafting deterministic, optimized JavaScript load sequences.

There is no one-size-fits all approach – choose the options aligning closest to your specific use case needs. But favor DOMContentLoaded and deferred scripts to start.

By mastering these browser loading APIs and models, you can deliver seamless, reliable user experiences as your apps scale.