search

Home  >  Article  >  Web Front-end  >  JavaScript optimization topic: Loading and Execution loading and running_javascript skills

JavaScript optimization topic: Loading and Execution loading and running_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:19:101023browse

The performance of JavaScript in browsers can be considered the most important usability issue faced by developers. This problem is compounded by the blocking nature of JavaScript, which means that other things cannot be processed by the browser while JavaScript is running. In fact, most browsers use a single process to handle multiple tasks such as UI updates and JavaScript running, and only one task can be executed at the same time.

How long the JavaScript is running, then how long it waits before the browser is idle to respond to user input.

At a basic level, this means that the presence of the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag causes the entire page to wait for the script to be parsed and run. Regardless of whether the actual JavaScript code is inline or contained in an unrelated external file, the page download and parsing process must stop and wait for the script to complete this processing before continuing. This is an essential part of the page lifecycle, as scripts may modify page content while running.

A typical example is the document.write() function, 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 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag, as in the HTML page above, it is impossible to predict whether JavaScript will add content in the e388a4556c0f65e1904146cc1a846bee tag. Therefore, the browser stops, runs this JavaScript code, and then continues parsing and translating the page. The same thing happens when loading JavaScript using the src attribute. 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.

HTML 4 documentation states that a 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag can be placed in the 93f0f5c25f18dab9d176bd4f6de5d30e or 6c04bd5ca3fcae76e30b72ad730ca86d tag of an HTML document and can appear multiple times in it. Traditionally, the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag is used to load external JavaScript files. In addition to such code, the 93f0f5c25f18dab9d176bd4f6de5d30e section also contains 2cdf5bf648cf2f33323966d7f58a7f3f tags for loading external CSS files and other page middleware. That is, it's better to put the parts that style and behavior depend on together 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=”file1.js”></script>

<script type=”text/javascript” src=”file2.js”></script>

<script type=”text/javascript” src=”file3.js”></script>

<link rel=”stylesheet” type=”text/css” href=”styles.css”>

</head>

<body>

<p>Hello world!</p>

</body>

</html>

While this code looks harmless, it does have a performance issue: three JavaScript files are loaded in the 93f0f5c25f18dab9d176bd4f6de5d30e section. Because each 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag blocks the parsing process of the page, page processing cannot continue until it has completely downloaded and run the external JavaScript code. Users must tolerate this perceived delay.

Remember that the browser will not render any part of the page until it encounters the 6c04bd5ca3fcae76e30b72ad730ca86d tag. Placing the script at the top of the page in this way will cause a noticeable delay, which usually manifests itself as: when the page opens, it first displays a blank page, and the user can neither read nor interact with the page. Interaction

Internet Explorer 8, Firefox 3.5, Safari 4, and Chrome 2 allow parallel downloading of JavaScript files. This good news means that when a 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag is downloading an external resource, it does not have to block other 3f1c4e4b6b16bbbd69b2ee476dc4f83a tags. Unfortunately, the downloading of JavaScript still blocks the downloading process of other resources. Even if the downloading processes between scripts do not block each other, the page still has to wait for all JavaScript codes to be downloaded and executed before it can continue. So, while browsers improved performance by allowing parallel downloads, the problem was not completely solved and script blocking was still an issue.

Because scripts block the download process of other page resources, the recommended approach is to place all 3f1c4e4b6b16bbbd69b2ee476dc4f83a tags as close to the bottom of the 6c04bd5ca3fcae76e30b72ad730ca86d tag as possible to minimize the impact on the download of the entire page. For example: 

<html>

<head>

<title>Script Example</title>

<link rel=”stylesheet” type=”text/css” href=”styles.css”>

</head>

<body>

<p>Hello world!</p>

<– Example of recommended script positioning –>

<script type=”text/javascript” src=”file1.js”></script>

<script type=”text/javascript” src=”file2.js”></script>

<script type=”text/javascript” src=”file3.js”></script>

</body>

</html>

This code shows the recommended location of the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag in the HTML file. Although the script downloads block 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 the relevant introduction to Loading and Execution loading and running in JavaScript optimization content. I hope it will be helpful to everyone's learning.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：AngularJS module learning Anchor Scroll_AngularJSNext article：AngularJS module learning Anchor Scroll_AngularJS

Related articles

See more