cari

Rumah >hujung hadapan web >tutorial js >如何加快JavaScript的加载与执行

如何加快JavaScript的加载与执行

黄舟
黄舟asal
2016-12-20 15:40:111061semak imbas

JS 有个很无语的阻塞特性，就是当浏览器在执行JS 代码时，不能同时做其他任何事情，无论其代码是内嵌的还是外部的。

浏览器在碰到一个引入外部JS 文件的3f1c4e4b6b16bbbd69b2ee476dc4f83a标签时会停下所有工作来下载并解析执行它，在这个过程中，页面渲染和用户交互完全被阻塞了，为了避免页面加载时的停顿甚至空白页的出现，JS 脚本应尽量放置在页面底部，这点很重要：

<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>

为了改善上面的阻塞情况，应尽可能的减少页面中3f1c4e4b6b16bbbd69b2ee476dc4f83a标签的出现次数，这同时也是考虑到HTTP 请求会带来额外的性能开销，也就是说应减少页面中外链脚本的数量。

你可以手动合并你的多个JS 文件，也可采用类似Yahoo! combo handler 这样的实时在线服务来实现，例如下面的这个3f1c4e4b6b16bbbd69b2ee476dc4f83a标签实际上便载入了3个JS 文件：

<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>

为了阻塞状况，这里提供了几个实现并行下载JS 脚本的方案。

1. 延迟的脚本

HTML4 为3f1c4e4b6b16bbbd69b2ee476dc4f83a标签定义了一个defer 属性，它能使这段代码延迟执行，然而该属性只有IE4+ 和Firefox 3.5+ 支持。声明了defer 属性的3f1c4e4b6b16bbbd69b2ee476dc4f83a会在DOM加载完成，window.onload 事件触发前被解析执行：

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

2. 动态脚本元素

这是最通用的解决方案，通过DOM 动态地创建3f1c4e4b6b16bbbd69b2ee476dc4f83a元素并插入到文档中，文件在该元素被添加到页面时开始下载，这样 无论在何时启动下载，文件的下载和执行过程不会阻塞页面其他进程。

不过要注意使用这种方式加载的代码会立刻执行，这样需清楚的了解各文件的作用以及合理的执行顺序，此时跟踪并确保脚本下载完成并准备就绪是很有必要的，非IE浏览器会在3f1c4e4b6b16bbbd69b2ee476dc4f83a元素接收完成时触发一个load 事件，而IE 下则会触发一个readystatechange 事件并通过readyState 属性加以判断便可。以下是兼容地动态加载一个JS 脚本的函数：

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);  
}

你可以将这个函数保存至一个load_script.js 文件，然后用该函数来加载其他的脚本，当要加载多个脚本时，为了确保正确的加载顺序，可以将load_script() 的执行串联起来，最后如前面说到的放至页面的底部，这便是比较完美的解决方案了：

<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 脚本注入

即通过AJAX 方式加载，不过这种方式无法实现跨域加载，不适用于大型网站。

我们上面做的这些工作当然也已经被那些牛人们完成了，并写成了一些优秀的JS 类库以便我们使用，它们均能很好地解决JS 脚本的阻塞问题，实现并行下载，例如： YUI3、LazyLoad、LABjs 等。

 以上就是如何加快JavaScript的加载与执行 的内容，更多相关内容请关注PHP中文网（www.php.cn）！ 


Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：如何写出规范的JavaScript代码Artikel seterusnya：JavaScript正则表达式的浏览器的差异

Artikel berkaitan

Lihat lagi