html.pngHTML

<!DOCTYPE html>
<html>
    <head>
        <link href="style.css" rel="stylesheet">
        <script src="jquery.js" defer></script>
        <script src="script.js" 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 defer attributes. The browser which supports this attribute will load scripts in parallel with parsing page. Scripts will be executed in the order after parsing a page. Therefore, DOMContentLoaded will fire relatively early.

If some of the contents in this page are decorated by these scripts, FOUC will occasionally hurt the user experience. So we should pay attention to the place of such contents.

watch.pngObject Event Timeline