Home > Developer > JavaScript
JavaScript's performance in the browser can be considered the most important usability issue that developers have to face. This problem is complicated by the blocking features of JavaScript, that is, when JavaScript is running, other things cannot be handled by the browser. In fact, most browsers use a single process to handle multiple tasks, such as UI updates and JavaScript runs, while only one task can be executed at a time. How long JavaScript has been running, and how long it will wait before the browser is idle to respond to user input.
From the basic level, this means that the appearance of the <script> tag makes the entire page wait for the script to parse and run. Regardless of whether the actual JavaScript code is inline or contained in an extraneous external file, the page download and parsing process must stop and wait for the script to complete the processing before continuing. This is an essential part of the page life cycle, because the script may modify the page content while it is running. A typical example is the document.write () function, for example:
When the browser encounters a <script> tag, as in the HTML page above, it is impossible to predict whether or not JavaScript will add content to the <p> tag. Therefore, the browser stops, runs this JavaScript code, and then continues parsing and translating the page. The same thing happens in the process of loading JavaScript using the SRC attribute. The browser must first download the code for the external file, which takes some time, and then resolves and runs the code. In this process, page parsing and user interaction are completely blocked.
A <script> tag can be placed in the
Appear. Traditionally,,<script> tags are used to load external JavaScript files. The
Because the script blocks the download process for other page resources, the recommended approach is to put all <script> tags as close to <body> as possible
The location at the bottom of the label to minimize the impact on the entire page download. For example:
Because the page parsing process is blocked by each <script> tag download, limiting the total <script> totals of pages can also improve performance. This rule applies inline scripts as well as external scripts. Whenever page parsing encounters a <script> tag, there is a period of time for code execution. Minimizing these delay times can improve the overall performance of the page.
This issue is slightly different from the process of external JavaScript files. Each HTTP request will incur an additional performance burden, and downloading a 100KB file is faster than downloading four 25KB files. In summary, reduce the number of references to external script files. Typically, a large web site or Web application requires multiple requests for JavaScript files. You can combine these files into a single file, requiring only a <script> tag reference to reduce the performance penalty.
This article from the "Big Data Practitioners" blog, declined reprint!
Load and run of high-performance JavaScript
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
