HTML
<!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.