守望的麦子

加速加载 JavaScript

2008-5-27    大连 /others/2008/05/27/load-javascript-faster.html others javascript,

本文最近更新于 2018 年 5 月 31 日

根据 Yahoo 的 Best Practices for Speeding Up Your Web Site 介绍,当网站有很多 js 代码要加载时,js 代码的加载速度在一定程度上将会影响网页的加载速度,这里分享几个方法可以让我们的网页加载速度更快。

1. 延迟加载 js 代码

1 <script type="text/javascript" src="" id="my"></script> 
2 <script type="text/javascript"> 
3 setTimeout("document.getElementById('my').src='/js/test.js';",3000); //延迟 3 秒 
4 </script>

除了设置具体延迟时间,我们还可以使用 defer 延迟加载,defer 是一个常用的优化方案,它表示脚本会被延迟到文档完全被解析和显示之后再执行,加载后续文档元素的过程将和 js 脚本的加载并行进行(异步),这样页面加载会更快。

1 <script src="/js/test.js" defer></script>

这样通过延迟加载 js 代码,给网页加载留出更多的时间!

2. 改变 js 脚本位置

根据网页的加载顺序,引入 js 脚本时,如果放在 HTML 的 head 中,则页面主体加载前该 js 脚本就会被加载,而放入 body 中,则会按照页面从上至下的加载顺序来加载 js 代码,所以我们可以把 js 脚本放到页面底部,让 js 脚本最后引入,从而加快页面加载速度。

3. 通过 js innerHTML 将 js 脚本移到底部

上面方法 2 提到的将 js 脚本移到页面底部有效直接,但是对于可见的 js 脚本如果页面元素被设置为 display:block 时,例如为了支持手机屏幕显示,这时相应的 js 脚本则会在底部显示,有时这却不是我们想要的。

这里的方法 3 可以在不改变可见的 js 脚本显示位置的前提下,将 js 后置加速加载。

实现方法:

在需要插入 js 脚本的地方插入以下代码:

1 <span id="myJS">LOADING…</span>

然后在页面最底端插入:

1 <span id="myJS_footer"> 你的 js 代码 </span > 
2 <script>myJS.innerHTML=myJS_footer.innerHTML;myJS_footer.innerHTML="";</script> 

DONE!

4. async 异步加载

async 是 HTML5 的属性,async 属性规定一旦脚本可用,则会异步执行。async 不保证按照脚本出现的先后顺序执行,因此,确保两者之前互不依赖非常重要,指定 async 属性的目的是不让页面等待两个脚本的下载和执行,从而异步加载页面其他内容,异步脚本一定会在页面的 load 事件前执行,但可能会在 DOMContentLoaded 事件触发之前或之后执行。支持异步脚本的浏览器有 Firefox 3.6、Safari 5 和 Chrome。

1 <script async src="/js/test.js"></script>

注意:

5. 动态加载

由于文档对象模型(DOM)允许使用 JavaScript 动态创建 HTML 的几乎全部文档内容。当然也就允许我们动态创建 <script> 元素,例如:

 1 <script>
 2 function loadScript(url, callback) {
 3     var script = document.createElement("script")
 4     script.type = "text/javascript";
 5     if (script.readyState) { //IE
 6         script.onreadystatechange = function () {
 7             if (script.readyState == "loaded" || script.readyState == "complete") {
 8                 script.onreadystatechange = null;
 9                 callback();
10             }
11         };
12     } else { //Others
13         script.onload = function () {
14             callback();
15         };
16     }
17     script.src = url;
18     document.getElementsByTagName("head")[0].appendChild(script);
19 }
20 </script>

说明:此方法让元素添加到页面之后立刻开始下载。技术的重点在于无论在何处启动下载,文件的下载和运行都不会阻塞其他页面处理过程,我们甚至可以将这些代码放在 <head> 部分而不会对其余部分的页面代码造成影响(除了用于下载文件的 HTTP 连接)。

调用 js 脚本:

1 <script>
2 loadScript("/js/test.js", function () {
3     console.log("File is loaded!");
4 });
5 </script>

如果需要在页面中动态加载很多 JavaScript 文件,我们可以在回调方法中多次调用即可。

6. Lab.js

使用它可以并行装入 JavaScript 文件,加快加载过程,还可以为需要加载的脚本设置顺序,以确保正确的加载从而保证依赖关系。开发者声称在其网站上使用该方法提升了 2 倍速度。

github.com/getify/LABjs

##加速原则:##

如果 js 文件比较多,会产生大量的 HTTP 请求,我们都知道 HTTP 请求是比较耗费性能的事情。例如加载 1 个 100kb 的文件比加载 10 个 10kb 的文件速度要快,因此我们会采用合并压缩 js 脚本来达到优化速度的效果。

关于作者
麦子,80 后,现从事通信行业。安卓玩家一个人的书房朗读者。
MRJENGLISH
jsntn
jasonwtien
jasonwtien
更多…… /about.html

最近更新: