html.pngHTML

<!DOCTYPE html>
<html>
    <head>
        <link href="style.css" rel="stylesheet">
        <script src="jquery.js" async defer></script>
        <script src="script.js" async defer></script>
    </head>
    <body>
        <img src="html.png">
        <img src="watch.png">
    </body>
</html>

Characteristics of this page

In this example, scripts are placed in <head> with async attributes. The browser which supports this attribute will load scripts in parallel with parsing page, and will execute as soon as possible when it’s available, that’s to say 'asynchronously'. The execution order of those scripts are not kept and the availability of DOM is not also guaranteed. So configuring the scripts and execution timing should be carefully desined.

watch.pngObject Event Timeline