Defer, async and inline javascript

Dec 12, 2021 by Thibault Debatty | 7408 views

JavaScript

https://cylab.be/blog/188/defer-async-and-inline-javascript

In this blog post, we explain and illustrate the effect of the defer and async attributes.

Plain javascript

Here is an example of a simple page, that contains external javascript:

<!doctype html>
<html>
<head>
    <script>
        console.log('Start ...');
    </script>
    <script src="script1.js"></script>
</head>

<body>
    <script src="script2.js"></script>
    <script src="script3.js"></script>

    <h1>Javascript</h1>

    <script>
        console.log('Inline JS');
    </script>
</body>
</html>

When no attribute is mentioned (like in the example above):

  1. the scripts are executed one after the other, according to their position in the html code;
  2. the page is rendered after the scripts have been executed, so in our example the title only appears after 4 seconds of waiting;
  3. the inline scripts are executed after the external scripts.

javascript.png

This is a very conservative behavior: the rendering of the page is quite slow, but there is no surprise. If you use <script src='...'> to load external libraries (like JQuery or others), you can use them in you inline scripts without afterthoughts...

Defer

The defer allows a first level of optimization:

<!doctype html>
<html>
<head>
    <script>
        console.log('Start ...');
    </script>
    <script src="script1.js" defer></script>
</head>

<body>
    <script src="script2.js" defer></script>
    <script src="script3.js" defer></script>

    <h1>Javascript Defer</h1>

    <script>
        console.log('Inline JS');
    </script>
</body>
</html>

With defer:

  1. the page is rendered immediately;
  2. inline scripts are executed immediately;
  3. external scripts are executed according to their position in the html code.

defer.png

In our example, this time the title appears immediately on the screen...

Async

With the async attribute:

  1. the page is rendered immediately;
  2. inline scripts are executed immediately;
  3. external scripts are executed as soon as they are downloaded.

In our example the result is the same as for the defer example:

async.png

However, in some cases the external scripts may execute in a different order, for example if a script is smaller (and faster to download) than others, or if a script is already available in cache...

Inline javascript

Now, in some cases we would like to use the defer or async attributes (for performance), but execute inline javascript after external scripts have been executed. For example, if we load libraries (like JQuery) from external scripts, and want to use it in our inline javascript. For this purpose we can use the DOMContentLoaded event listener:

<script>
    window.addEventListener('DOMContentLoaded', function() {
        (function($) {
          # do something...
        })(jQuery);
    });
</script>

In our example:

<!doctype html>
<html>
<head>
    <script>
        console.log('Start ...');
    </script>
    <script src="script1.js" defer></script>
</head>

<body>
    <script src="script2.js" defer></script>
    <script src="script3.js" defer></script>

    <h1>Javascript DOMContentLoaded</h1>

    <script>
        window.addEventListener('DOMContentLoaded', function() {
            console.log('Inline JS');
        });
    </script>
</body>
</html>

This time the title is displayed immediately, but our inline code is executed after the external scripts:

dom.png

This blog post is licensed under CC BY-SA 4.0

Share on Mastodon with shareon.js
With recent events on Twitter, the micro-blogging network Mastodon has gained a lot of interest. Unlike Twitter, Mastodon is free and open-source software. Moreover, Mastodon uses a decentralized approach: the Mastodon network is composed of multiple instances managed by different suppliers, each with its own code of conduct, terms of service, privacy policy, privacy options, and moderation policies. If you want to support the network, here is how you can add 'Share on Mastodon' icons on your website.
MARk: Visualizations with D3.js
Detecting suspicious or malicious activity in a network is not a trivial task. In recent years the attacks perpetrated have grown in sophistication and frequency. For this reason a new detection tool was developed, in the form of the Multi Agent Ranking framework (MARk). MARk sets the groundwork for the implementation of large scale detection and ranking systems through the implementation of a distributed storage in conjuncture with highly specialized, stand-alone detector agents. The detector agents are responsible for analyzing specific predefined characteristics and producing a report of any suspicious activity encountered.
Laravel & Vue.js: Quickstart
Vue.js is an open-source JavaScript framework that lets you extend HTML elements with embedded JS and CSS to easily create complex user interfaces and single page applications. Easy to integrate with Laravel, this is the perfect combination to draw a line between the front and the back ends while making them both powerful.
This website uses cookies. More information about the use of cookies is available in the cookies policy.
Accept