Chapter 1. Loading and Execution
JavaScript performance in the browser is arguably the most important usability issue facing developers. The problem is complex because of the blocking nature of JavaScript, which is to say that nothing else can happen while JavaScript code is being executed. In fact, most browsers use a single process for both user interface (UI) updates and JavaScript execution, so only one can happen at any given moment in time. The longer JavaScript takes to execute, the longer it takes before the browser is free to respond to user input.
On a basic level, this means that the very presence of a <script> tag is enough to make the page wait for the script to be parsed
and executed. Whether the actual JavaScript code is inline with the tag or
included in an external file is irrelevant; the page download and
rendering must stop and wait for the script to complete before proceeding.
This is a necessary part of the page’s life cycle because the script may
cause changes to the page while executing. The typical example is using
document.write() in the middle of a
page (as often used by advertisements). For example:
<html>
<head>
<title>Script Example</title>
</head>
<body>
<p>
<script type="text/javascript">
document.write("The date is " + (new Date()).toDateString());
</script>
</p>
</body>
</html>When the browser encounters a <script> tag, as in this HTML page, there
is no way of knowing whether the JavaScript will insert content into the
<p>, introduce additional elements, ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access