Detailed explanation of the loading order and execution principle of high-performance JavaScript

The performance of javascript in the browser can be considered the most serious usability problem faced by developers. This article mainly introduces relevant information about the loading order and execution principle of high-performance javascript. The article uses sample code The introduction is very detailed and has certain reference value for everyone's study or work. Friends who need it can follow the editor to learn together.

##When the browser encounters the <script> tag, the browser must first download the external link file and then execute it. During this process, the page is rendered. Interaction with the user is completely blocked. <p>Where is the best place to put the script? <p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/054/025/2e61a312d4692d3148ef28a89734effe-1.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/>This situation undoubtedly has serious performance problems, because the script will block the rendering of the page, and the page rendering will not continue until they are all downloaded and executed. The picture below is the execution sequence of the code <p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/054/025/2e61a312d4692d3148ef28a89734effe-2.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/><br/>The first js file is downloaded. The second js file will not be executed until the first js file is completely downloaded. , but now IE8, Firefox3.5, Safari4 and Chrome2 all allow parallel downloading of js files. Unfortunately, the js download process will still block the download of other resources, such as: Picture <p> So one of the ways to improve performance : Place the script at the bottom of the body<p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/054/025/6cd010162f08654e1984b5aacae9b92b-3.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/><br/>##Organize the script<p><br/>Since each <script> tag will block the page when downloading Rendering, so it is essential to reduce the number of <script> tags contained in the page. Solution: You can merge and package multiple js files into one js file. The advantage of doing this is that it can minimize the delay time and it will be obvious. Improve the overall performance of the page, in addition to reducing HTTP requests. <p><br/> Generally speaking, downloading a single 100KB file is faster than downloading four 25KB files. <p>If there are multiple external link js files, they can be merged into one js file<p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/054/025/6cd010162f08654e1984b5aacae9b92b-4.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/><br/>Non-blocking script<p> <br/>Although downloading a single large js file only generates one HTTP request, it will cause the browser to freeze for a long time. In order to avoid this situation, you need to gradually load js files into the page. <p>Delayed script<p><br/>The defer attribute indicates that the script contained in this element can be delayed, but only IE4+ and Firefox3.5+ browsers support it<p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/054/025/6cd010162f08654e1984b5aacae9b92b-5.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/><br/>Simply speaking, the mechanism of defer is to download the js file before the DOM is loaded, and will not block other processes of the browser<p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/054/025/6cd010162f08654e1984b5aacae9b92b-6.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/><br/>The pop-up order for browsers that do not support the defer attribute is: defer,script,load<p><br/>The pop-up order for browsers that support the defer attribute is: script, defer, load<p><br/>So defer is called before the onload event is executed<p>Dynamic script<p><br/>There are two ways to inject dynamic scripts. The first is to dynamically create scripts. tag, the second is to inject the page through XMLHttpRequest <p><br/> Let’s talk about how to use the first one first: <p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/054/025/2d706dbfd8de51e67d08efeda7ddb02c-7.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/>The key point of this technology is: no matter When the download is started, the download and execution process of the file will not block other processes on the page, but when using dynamic script nodes to download js files, the returned code will be executed immediately (except for Firefox and Opera, which will wait for all previous dynamic script nodes to execute Completed)<p>Mainstream browsers will trigger a load event when the <script> tag is received, but the IE browser does not, so we must encapsulate a method that is compatible with all browsers<p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/054/025/2d706dbfd8de51e67d08efeda7ddb02c-8.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/><br/>#The disadvantage of this method is that you need to know the loading order of the files. When there are many js files and the dependencies are complex, it is difficult to manage the loading order of dependencies<p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/054/025/2d706dbfd8de51e67d08efeda7ddb02c-9.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/>Code written like this is difficult to maintain<p>The second way to dynamically create scripts<p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/054/025/2d706dbfd8de51e67d08efeda7ddb02c-10.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/> is actually equivalent to creating a <script> tag with an inline script. Once the newly created <script> element is added to the page, the code will be executed immediately and then ready. <p>Advantages: The js code is downloaded but not executed immediately. This way you can postpone the execution of the script until you are ready. This method is also compatible with all browsers<p>Disadvantages: js The file must be in the same domain as the requested page. JS files cannot be downloaded from CDN. Generally, large web applications will not use this method. <p> It is recommended to use non-blocking mode: <br/><p>First add the code required for dynamics, and then pretend to initialize the remaining code of the page<br/><p>[Image upload failed...(image-dd3f9-1515902024710)]<p>Introduced above After reading so much, I would like to recommend some dynamic lazy loading libraries to you<br/><p>There are libraries such as YUI3, LazyLoad and LABjs. I personally think that the LABjs library is easier to use, but I have never used it. You can check it out. , the usage method will not be mentioned here. <p>Summary:<br/><p>Several aspects of improving js performance<br/><p> 1. Before closing the tag, <script&gt ; tag at the bottom of the page. This ensures that the page has completed rendering before the script is executed<br/><p> 2. Merge the script. The fewer <script> tags in your page, the faster it will load and respond. This is true regardless of external link files or embedded scripts<br/><p> 3. There are many ways to download js without blocking<br/><p> 3.1 Use the defer attribute of the <script> tag <br/><p>   3.2 Use dynamically created <script> elements to download and execute code<br/><p> 3.3 Use XHR objects to download js code and inject it into the page<p> Through the above strategies, the actual performance of web applications that require a large amount of js can be greatly improved. <p>Related recommendations:<p><a href="http://www.php.cn/css-tutorial-383191.html" target="_self">A brief analysis of CSS loading and loading sequence<p><a href="http://www.php.cn/div-tutorial-358545.html" target="_self">The loading sequence and execution of html, css and js files<p><a href="http://www.php.cn/js-tutorial-21841.html" target="_self">jquery’s $(document).ready() and onload loading sequence_javascript skills</script>

The above is the detailed content of Detailed explanation of the loading order and execution principle of high-performance JavaScript. For more information, please follow other related articles on the PHP Chinese website!