Load scripts asynchronously

javascript

async-programming

promise-engineering

best-practices

byAnton Shumikhin·Nov 30, 2024

Enable asynchronous script loading instantly by modifying your <script> tags with the async attribute:

<script async src="your-script.js"></script>

This allows your script to load without blocking the webpage rendering. If you need sequential execution, apply this JavaScript function to load scripts while remaining non-blocking:

function loadScriptSequentially(src) {
  var script = document.createElement('script');
  script.src = src;
  script.async = false; // Keeps the order (no chaos here 😊)
  document.head.appendChild(script);
}

loadScriptSequentially('first.js');  // First come, first serve 👍
loadScriptSequentially('second.js'); // Patience is a virtue 💡

Note: Despite its charms, async scripts load as soon as they are ready and may not maintain the order. Use the provided JavaScript code snippet for scripts that need to be executed in the correct order.

Incorporating promises and modern features

Loading scripts with promises

We can employ the Promise object for asynchronous script loading. This offers a more resilient approach:

function loadScript(src) {
  return new Promise((resolve, reject) => { // Promise makes JavaScript romantic again 😊💖
    let script = document.createElement('script');
    script.src = src;
    script.onload = () => resolve(script);
    script.onerror = () => reject(new Error(`Script load error for ${src}`)); // Rejection hurts, even for scripts 😢
    document.head.appendChild(script);
  });
}

// The Promise then... is not a TV show cliffhanger
loadScript("your-script.js")
  .then(() => console.log("Script loaded successfully!"))
  .catch(err => console.error(err)); // Whoops! It's not you, it's the script 💔

Enhancing script loading

Correct placement of scripts

Position all your <script> tags inline at the bottom of the page. This action allows the HTML parsing process to run smoothly without any blockages.

Maintaining interactivity

Ensure events binding solely occurs after document.ready. This way, ARPANET doesn't have to invent a solution for your race conditions between your HTML and JavaScript execution.

Employing lazy loading

Introduce lazy loading for scripts that do not require immediate execution. This strategy reduces initial load time and conserves bandwidth. Lazy Load by using IntersectionObserver or fallbacks for older browsers.

Paying attention to critical functions

Make sure critical functions are initialized with the onload event. This ensures your core features load effectively and without error.

Handling scenarios and pitfalls

Network protocol compatibility

Ensure compatibility across different network protocols (HTTP or HTTPS) by using protocol-relative URLs for script sources.

Prevent total replacements

Keep things tidy by avoiding the replacement of the entire index.html with an AJAX-loaded page. Instead, favour partial updates to achieve elegant and seamless user experiences.