The performance of JavaScript in browsers can be considered the most important usability issue that developers have to face. This problem is complicated by the blocking feature of JavaScript, that is, other things cannot be handled by the browser when JavaScript is running. In fact, most browsers use a single process to handle multiple tasks such as UI updates and JavaScript runs, and only one task is executed at the same time.
How long does JavaScript run, then how long will it be before the browser is idle to respond to user input.
From a basic perspective, this means that the appearance of the <script> tag causes the entire page to wait due to script parsing and running. Whether the actual JavaScript code is inlined or contained in an irrelevant external file, the page download and parsing process must be stopped and wait for the script to complete these processing before continuing. This is an essential part of the page life cycle, because the script may modify the page content during runtime.
A typical example is the() function, for example:
<html> <head> <title>Script Example</title> </head> <body> <p> <script type=”text/javascript”> (“The date is ” + (new Date()).toDateString()); </script> </p> </body> </html>
When the browser encounters a <script> tag, as in the HTML page above, it is impossible to predict whether JavaScript adds content to the <p> tag. Therefore, the browser stops, runs this JavaScript code, and then continues to parse and translate the page. The same thing happens when loading JavaScript using the src property. The browser must first download the code for the external file, which takes some time, and then parse and run this code. During this process, page parsing and user interaction are completely blocked.
The HTML 4 document states that a <script> tag can be placed in the <head> or <body> tag of an HTML document and can appear multiple times. Traditionally, the <script> tag is used to load external JavaScript files. The <head> section includes the <link> tag to load external CSS files and other page middleware in addition to this type of code. That is, it is best to put together the parts that style and behavior depend on, and load them first so that the page can get the correct look and behavior. For example:
<html> <head> <title>Script Example</title> <– Example of inefficient script positioning –> <script type=”text/javascript” src=””></script> <script type=”text/javascript” src=””></script> <script type=”text/javascript” src=””></script> <link rel=”stylesheet” type=”text/css” href=””> </head> <body> <p>Hello world!</p> </body> </html>
While these codes seem harmless, they do have performance issues: three JavaScript files are loaded in the <head> section. Because each <script> tag blocks the parsing process of the page until it downloads and runs external JavaScript code intact, the page processing cannot continue. The user must endure this perceived delay.
Remember that the browser will not render any part of the page until it encounters the <body> tag. Putting the script on the top of the page in this way will cause a perceived delay, which is usually manifested as: when the page is opened, it will first be displayed as a blank page, and the user cannot read it or interact with the page.
Internet Explorer 8, Firefox 3.5, Safari 4, and Chrome 2 allow parallel downloads of JavaScript files. This good news shows that when a <script> tag is downloading an external resource, it is not necessary to block other <script> tags. Unfortunately, JavaScript download still blocks the download process of other resources. Even if the download process between scripts does not block each other, the page still needs to wait for all JavaScript code to be downloaded and executed before continuing. So, when the browser improves performance by allowing parallel downloads, the problem is not completely solved, and script blocking is still a problem.
Because the script blocks the download process of other page resources, the recommended method is: place all <script> tags as close to the bottom of the <body> tag as possible, and minimize the impact on the entire page download. For example:
<html> <head> <title>Script Example</title> <link rel=”stylesheet” type=”text/css” href=””> </head> <body> <p>Hello world!</p> <– Example of recommended script positioning –> <script type=”text/javascript” src=””></script> <script type=”text/javascript” src=””></script> <script type=”text/javascript” src=””></script> </body> </html>
This code shows where the recommended <script> tag is located in the HTML file. Although script downloads are blocked between each other, the page has been downloaded and displayed in front of the user, and the speed of entering the page will not appear too slow.
The above is a related introduction to loading and running Loading and Execution in JavaScript optimization content. I hope it will be helpful to everyone's learning.