本文章是对《高性能javascript》书提到的技术的个人总结。
知识预备
多数浏览器使用单一进程来处理用户界面(UI)刷新和javaScript脚本执行，所以同一时刻只能做一件事。javaScript执行过程耗时越久，浏览器等待响应的时间就越长。
另外链文件，导致下载外部js文件同样共用该进程。
方法
为了减少JavaScript代码下载及执行对页面代码的影响可以使用以下几种方法：
- 将所有<script>标签放到页面底部。这能确保在脚本执行前页面已经完成了渲染。
- 合并脚本。页面中的<script>标签越少，加载也就越快，响应也更迅速。无论外链文件还是内联脚本都是如此。
- 有多种无阻塞下载JavaScript的方法:
- 使用<script>标签的defer属性。带有该属性的JavaScript文件下载时，它不会阻塞浏览器，因此这类文件可以与其它资源并行下载。
任何带有defer的<script>的元素在DOM加载完成前都不会执行。
<script type="text/javascript" src="file1.js" defer>
- 使用动态创建的<script>元素来下载并执行代码。
无论何时启动下载，文件的下载和执行过程不会阻塞页面其他进程。通常来讲，把新创建的<script>标签添加到<head>标签里比添加到<body>里更保险，尤其是在页面加载过程中执行代码时更是如此。
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 { //其他浏览器
script.onload = function() {
callback();
}
}
script.src = url;
document.getElementByTagName("head")[0].appendChild(script);
}
loadScript("file1.js",function(){
loadScript("file2.js",function(){
loadScript("file3.js",function(){
alert("All files are loaded!");
});
});
});
- 使用XHR对象下载JavaScript代码并注入页面中。但是XHR有同域限制，所以大型Web应用通常不会使用XHR脚本注入技术。
网友评论