加速加载 JavaScript
本文最近更新于 2018 年 05 月 31 日
根据 Yahoo 的 Best Practices for Speeding Up Your Web Site 介绍，当网站有很多 js 代码要加载时，js 代码的加载速度在一定程度上将会影响网页的加载速度，这里分享几个方法可以让我们的网页加载速度更快。
1. 延迟加载 js 代码
<script type="text/javascript" src="" id="my"></script>
<script type="text/javascript">
setTimeout("document.getElementById('my').src='/js/test.js';",3000); //延迟 3 秒
</script>
除了设置具体延迟时间，我们还可以使用 defer 延迟加载，defer 是一个常用的优化方案，它表示脚本会被延迟到文档完全被解析和显示之后再执行，加载后续文档元素的过程将和 js 脚本的加载并行进行（异步），这样页面加载会更快。
<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 脚本的地方插入以下代码：
<span id="myJS">LOADING…</span>
然后在页面最底端插入：
<span id="myJS_footer"> 你的 js 代码 </span >
<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。
<script async src="/js/test.js"></script>
注意：
- 建议异步脚本不要在加载期间修改 DOM，当 js 不需要改变 DOM 结构时推荐使用异步加载（比如一些统计代码，它与页面执行逻辑无关，也不会改变 DOM 结构）
- 延迟脚本并不一定会按照顺序执行，因此，确保两者之前互不依赖非常重要
5. 动态加载
由于文档对象模型（DOM）允许使用 JavaScript 动态创建 HTML 的几乎全部文档内容。当然也就允许我们动态创建 <script> 元素，例如：
<script>
function loadScript(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);
}
</script>
说明：此方法让元素添加到页面之后立刻开始下载。技术的重点在于无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程，我们甚至可以将这些代码放在 <head> 部分而不会对其余部分的页面代码造成影响（除了用于下载文件的 HTTP 连接）。
调用 js 脚本：
<script>
loadScript("/js/test.js", function () {
console.log("File is loaded!");
});
</script>
如果需要在页面中动态加载很多 JavaScript 文件，我们可以在回调方法中多次调用即可。
6. Lab.js
使用它可以并行装入 JavaScript 文件，加快加载过程，还可以为需要加载的脚本设置顺序，以确保正确的加载从而保证依赖关系。开发者声称在其网站上使用该方法提升了 2 倍速度。
加速原则：
- 尽可能将
<script>标签放到页面底部，也就是</body>闭合标签之前，这能确保在脚本执行前页面已经完成了渲染。 - 尽可能合并 js 文件，减少 HTTP 请求，加载速度也就越快。
- 尽可能压缩 js 文件，减小文件体积，加快加载的速度。
如果 js 文件比较多，会产生大量的 HTTP 请求，我们都知道 HTTP 请求是比较耗费性能的事情。例如加载 1 个 100kb 的文件比加载 10 个 10kb 的文件速度要快，因此我们会采用合并压缩 js 脚本来达到优化速度的效果。
<script>标签使用defer或async属性异步加载 js。- 使用动态创建的
<script>元素来下载并执行代码。
最近更新：