编写高性能的JavaScript 脚本的加载与执行
更新时间：2010年04月19日 18:43:08 作者：
把脚本放在body中，当浏览器遇见<script>标签时， 浏览器不知道脚本会插入文本还是html标签，因此浏览器会停止分析html页面而去执行脚本。
脚本可以放在html页面的head里面，也可以放在body里面。
把脚本放在body中，当浏览器遇见<script>标签时， 浏览器不知道脚本会插入文本还是html标签，因此浏览器会停止分析html页面而去执行脚本。当使用src的方式添加脚本时，浏览器也会做同样的动作。在脚本处理的时候，页面呈现和用户交互将被完全阻止。脚本下载和执行阻塞了其他资源的下载，比如呈现页面使用的图片。（虽然很多浏览器实现了脚本并行下载的技术，但是这个问题依然没有解决）
脚本的位置
鉴于上面的理由，脚本应该始终放在页面的底部，即</body>前面。
一个简单的示例:
<html>
<head>
<title>Script Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</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>标签的使用，不管脚本是内联的还是外部的。在处理外部脚本的时候情况比较特殊，浏览器下载一个100kb的脚本的时间将远远小于4个25kb的脚本，因为建立一个请求要消耗大量的时间。所以页面应该尽量的减少外部脚本的引用。
非阻塞的脚本
秘诀在于当页面loading完成之后再来加载脚本，也就是在window对象的onload事件触发之前 。下面是实现的几种方式：
1.使用defer
<html>
<head>
<title>Script Defer Example</title>
</head>
<body>
<script defer>
alert("defer");
</script>
<script>
alert("script");
</script>
<script>
window.onload = function(){
alert("load");
};
</script>
</body>
</html>
页面弹出框出现的顺序： script/defer/load,这个技术的缺点是IE4+和FF3.5+才支持。
非阻塞的脚本（续）
2. 动态脚本元素
要知道<script>和普通的html标签并没有本质的区别，所以可以利用标准的DOM方法动态的添加脚本文件引用。方法如下：
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);
当这个标签一旦加入到html中，脚本文件就开始下载。这种方法的一个特点就是，文件下载和执行并不阻塞html页面其它部分的处理。通常将这样的脚本放在<head>中较之<body>更加安全，尤其是文件包含的代码需要在页面的load事件中执行。如果body的内容还没有被完全的加载，IE还会弹出“禁止操作”的错误。
当脚本文件下载完成之后，脚本立即执行（FF、Opera会等待前一个以同样方式添加的脚本执行）。当脚本自执行时，这没什么问题。但是如果脚本包含页面中其它脚本使用的interfaces，你需要确认脚本已经加载完成并且可用。幸好，当获得script标签的src的值之后，Firefox, Opera, Chrome, and Safari 3+ 会触发一个load事件。
var script = document.createElement("script")
script.type = "text/javascript";
//Firefox, Opera, Chrome, Safari 3+
script.onload = function(){
alert("Script loaded!");
};
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);
IE则提供了另外一种解决方案--readystatechange事件。根据下载
脚本文件所处的状态，readyState 的值有以下几种：
"uninitialized"
默认状态
"loading"
开始下载
"loaded"
下载完成
"interactive"
下载完成，但是并非全部可用
"complete"
所有数据可用
IE的实现方式：
var script = document.createElement("script")
script.type = "text/javascript";
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
alert("Script loaded.");
}
};
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(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);
}
The loadScript() function is used as follows:
loadScript("file1.js", function(){
alert("File is loaded!");
});
现在你可以按这种动态方式加载脚本了，但是你仍然需要考虑这些文件的下载顺序。主流浏览器中只有FF和Opera保证脚本的执行顺序和你指定的下载顺序一致，其他浏览器将按照脚本文件从服务器返回的顺序来执行。虽然如此，我们仍然有替代的解决方案：
loadScript("file1.js", function(){
loadScript("file2.js", function(){
loadScript("file3.js", function(){
alert("All files are loaded!");
});
});
});
这样我们就能保证脚本文件的下载顺序严格的按照file1-file2-file3的方式进行。
注明：以上内容来自：<High Performance JavaScript>by Nicholas C. Zakas
把脚本放在body中，当浏览器遇见<script>标签时， 浏览器不知道脚本会插入文本还是html标签，因此浏览器会停止分析html页面而去执行脚本。当使用src的方式添加脚本时，浏览器也会做同样的动作。在脚本处理的时候，页面呈现和用户交互将被完全阻止。脚本下载和执行阻塞了其他资源的下载，比如呈现页面使用的图片。（虽然很多浏览器实现了脚本并行下载的技术，但是这个问题依然没有解决）
脚本的位置
鉴于上面的理由，脚本应该始终放在页面的底部，即</body>前面。
一个简单的示例:
复制代码 代码如下:
<html>
<head>
<title>Script Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</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>标签的使用，不管脚本是内联的还是外部的。在处理外部脚本的时候情况比较特殊，浏览器下载一个100kb的脚本的时间将远远小于4个25kb的脚本，因为建立一个请求要消耗大量的时间。所以页面应该尽量的减少外部脚本的引用。
非阻塞的脚本
秘诀在于当页面loading完成之后再来加载脚本，也就是在window对象的onload事件触发之前 。下面是实现的几种方式：
1.使用defer
复制代码 代码如下:
<html>
<head>
<title>Script Defer Example</title>
</head>
<body>
<script defer>
alert("defer");
</script>
<script>
alert("script");
</script>
<script>
window.onload = function(){
alert("load");
};
</script>
</body>
</html>
页面弹出框出现的顺序： script/defer/load,这个技术的缺点是IE4+和FF3.5+才支持。
非阻塞的脚本（续）
2. 动态脚本元素
要知道<script>和普通的html标签并没有本质的区别，所以可以利用标准的DOM方法动态的添加脚本文件引用。方法如下：
复制代码 代码如下:
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);
当这个标签一旦加入到html中，脚本文件就开始下载。这种方法的一个特点就是，文件下载和执行并不阻塞html页面其它部分的处理。通常将这样的脚本放在<head>中较之<body>更加安全，尤其是文件包含的代码需要在页面的load事件中执行。如果body的内容还没有被完全的加载，IE还会弹出“禁止操作”的错误。
当脚本文件下载完成之后，脚本立即执行（FF、Opera会等待前一个以同样方式添加的脚本执行）。当脚本自执行时，这没什么问题。但是如果脚本包含页面中其它脚本使用的interfaces，你需要确认脚本已经加载完成并且可用。幸好，当获得script标签的src的值之后，Firefox, Opera, Chrome, and Safari 3+ 会触发一个load事件。
复制代码 代码如下:
var script = document.createElement("script")
script.type = "text/javascript";
//Firefox, Opera, Chrome, Safari 3+
script.onload = function(){
alert("Script loaded!");
};
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);
IE则提供了另外一种解决方案--readystatechange事件。根据下载
脚本文件所处的状态，readyState 的值有以下几种：
"uninitialized"
默认状态
"loading"
开始下载
"loaded"
下载完成
"interactive"
下载完成，但是并非全部可用
"complete"
所有数据可用
IE的实现方式：
复制代码 代码如下:
var script = document.createElement("script")
script.type = "text/javascript";
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
alert("Script loaded.");
}
};
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(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);
}
The loadScript() function is used as follows:
loadScript("file1.js", function(){
alert("File is loaded!");
});
现在你可以按这种动态方式加载脚本了，但是你仍然需要考虑这些文件的下载顺序。主流浏览器中只有FF和Opera保证脚本的执行顺序和你指定的下载顺序一致，其他浏览器将按照脚本文件从服务器返回的顺序来执行。虽然如此，我们仍然有替代的解决方案：
复制代码 代码如下:
loadScript("file1.js", function(){
loadScript("file2.js", function(){
loadScript("file3.js", function(){
alert("All files are loaded!");
});
});
});
这样我们就能保证脚本文件的下载顺序严格的按照file1-file2-file3的方式进行。
注明：以上内容来自：<High Performance JavaScript>by Nicholas C. Zakas
相关文章
这篇文章主要给大家介绍了关于js中join()方法的相关资料,join方法用于把数组中的所有元素放入一个字符串,文中通过代码以及图文介绍的非常详细,需要的朋友可以参考下2023-10-10
JavaScript 装饰器是一种特殊的功能，允许在不修改源代码的情况下动态修改类和函数的行为，本文将介绍五个让你眼前一亮的装饰器技巧，包括装饰函数参数、装饰类属性、装饰函数返回值和装饰函数调用,需要的朋友可以参考下2023-06-06
本篇文章通过前台跨域请求处理以及后台跨域的数据处理方式介绍，详细分析了ajax跨域的问题，对此有需要的朋友学习下。2018-02-02
这篇文章主要介绍了Javascript Worker子线程代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
这篇文章主要给大家介绍了关于angular 8.1使用过程中的一些记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
JavaScript与ActionScript3两者的同性与差异性
接触JavaScript和ActionScript3也有近5年的时间了，它们都是应用比较广泛的脚本语言.接下来通过本文给大家介绍JavaScript与ActionScript3两者的同性与差异性，感兴趣的朋友一起学习吧2016-09-09
下面小编就为大家带来一篇es6 字符串String的扩展(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
游戏人文件夹程序 ver 4.03...2006-07-07
前端开发中,字符串处理是比较常见的,下面这篇文章主要给大家介绍了关于js中常见切割截取字符串的几种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
如何用JavaScript实现动态修改CSS样式表？下面小编就为大家带来一篇JavaScript实现动态修改CSS样式表的方法。希望对大家有所帮助。一起跟随小编过来看看吧2016-05-05
最新评论