首页 / JAVASCRIPT / 如何加快JavaScript的加载与执行

如何加快JavaScript的加载与执行

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了如何加快JavaScript的加载与执行，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3499字，纯文字阅读大概需要5分钟。

内容图文

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

浏览器在碰到一个引入外部JS 文件的<script>标签时会停下所有工作来下载并解析执行它，在这个过程中，页面渲染和用户交互完全被阻塞了，为了避免页面加载时的停顿甚至空白页的出现，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>

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

你可以手动合并你的多个JS 文件，也可采用类似Yahoo! combo handler 这样的实时在线服务来实现，例如下面的这个<script>标签实际上便载入了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 为<script>标签定义了一个defer 属性，它能使这段代码延迟执行，然而该属性只有IE4+ 和Firefox 3.5+ 支持。声明了defer 属性的<script>会在DOM加载完成，window.onload 事件触发前被解析执行：

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

2. 动态脚本元素

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

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

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

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

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

3. XMLHttpRequest 脚本注入

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

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

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

内容总结

以上是互联网集市为您收集整理的如何加快JavaScript的加载与执行全部内容，希望文章能够帮你解决如何加快JavaScript的加载与执行所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/303822.html

来源：【匿名】