html.pngHTML

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

Characteristics of this page

This is the Put Scripts at the Bottom pattern as best practices say. Parsing, DOM construction and rendering will not be blocked just before those scripts. Thus, this pattern has a benefit that scripts can access DOMs without waiting DOMContentLoaded nor onload. But FOUC caused by scripts will remarkably hurt the user experience.

watch.pngObject Event Timeline