How to speed up JavaScript loading and execution-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to speed up JavaScript loading and execution

黄舟

Dec 20, 2016 pm 03:40 PM

javascriptloadimplement

JS has a very silent blocking feature, that is, when the browser is executing JS code, it cannot do anything else at the same time, regardless of whether the code is embedded or external.

When the browser encounters a <script> tag that introduces an external JS file, it will stop all work to download, parse and execute it. In this process, page rendering and user interaction are completely blocked. In order to avoid page loading When there is a pause or even a blank page, the JS script should be placed at the bottom of the page as much as possible. This is very important: </script>

<html>
<head>
<title>无标题文档</title>
<link rel="stylesheet" type="text/<a href="http://www.php1.cn/category/72.html">css</a>" href="http://www.php1.cn/">
</head>
<body>
<p>页面的内容。。。</p>
<!-- 推荐的位置，页面底部： -->
<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>

In order to improve the above blocking situation, the number of occurrences of the <script> tag in the page should be reduced as much as possible. This At the same time, it is also considered that HTTP requests will bring additional performance overhead, which means that the number of external link scripts in the page should be reduced. </script>

You can manually merge your multiple JS files, or you can use a real-time online service like Yahoo! combo handler to achieve it. For example, the <script> tag below actually loads 3 JS files: </script>

<html>  
<head>  
<title>无标题文档</title>  
<link rel="stylesheet" type="text/<a href="http://www.php1.cn/category/72.html">css</a>" href="http://www.php1.cn/">  
</head>  
<body>  
   
<p>页面的内容。。。</p>  
   
<!-- 推荐的位置，页面底部： --> 
<script type="text/javascript" src="http://yui.yahooapis.com/combo?file1.js&file2.js&file3.js"></script>  
</body>  
</html>

In order to solve the blocking situation, here are several solutions to implement parallel downloading of JS scripts.

1. Deferred script

HTML4 defines a defer attribute for the <script> tag, which can delay the execution of this code. However, this attribute is only supported by IE4+ and Firefox 3.5+. The <script> that declares the defer attribute will be parsed and executed before the DOM loading is completed and the window.onload event is triggered: </script>

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

2. Dynamic script elements

This is the most common solution, dynamically created through the DOM element and inserted into the document, the file starts downloading when the element is added to the page, so that no matter when the download is started, the download and execution process of the file will not block other processes on the page.

However, please note that the code loaded in this way will be executed immediately, so you need to clearly understand the role of each file and the reasonable execution sequence. At this time, it is necessary to track and ensure that the script download is completed and ready, not IE The browser will trigger a load event when the <script> element is completed, while IE will trigger a readystatechange event and judge it through the readyState attribute. The following is a function to dynamically load a JS script compatible with: </script>

function load_script(url, callback) {  
    var script = document.createElement(&#39;script&#39;);  
    script.type = &#39;text/javascript&#39;;  
    if (script.readyState) {  //IE  
        script.onreadystatechange = function() {  
            if (script.readyState == &#39;loaded&#39; || script.readyState == &#39;complete&#39;) {  
                script.onreadystatechange = null;  
                callback();  
            }  
        }  
    } else {  //others  
        script.onload = function() {  
            callback();  
        }  
    }  
    script.src = url;  
    document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);  
}

You can save this function to a load_script.js file, and then use this function to load other scripts. When multiple scripts are to be loaded, in order to ensure correct In the loading sequence, the execution of load_script() can be connected in series, and finally placed at the bottom of the page as mentioned before. This is a perfect solution:

<script type="text/javascript" src="load_script.js"></script>  
<script type="text/javascript">
load_script(&#39;file1.js&#39;, function() {  
    load_script(&#39;file2.js&#39;, function() {  
        load_script(&#39;file3.js&#39;, function() {  
            //全部载入后的操作...  
        } );  
    } );  
} );  
</script>

3. XMLHttpRequest script injection

means loading through AJAX , but this method cannot achieve cross-domain loading and is not suitable for large websites.

Of course, the work we have done above has been completed by those talented people, and some excellent JS libraries have been written for us to use. They can all solve the blocking problem of JS scripts and achieve parallel downloading, for example: YUI3, LazyLoad, LABjs, etc.

The above is how to speed up the loading and execution of JavaScript. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

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