几种提高javascript载入速度的方式

几种提高javascript载入速度的方式(异步非阻塞的)


0. 直接document.write


<script language="javascript">
document.write("<script src='test.js'><\/script>");
</script>

1. 动态创建script元素

原理：动态生成一个script的DOM元素，并设置它的src和type属性，之后附加到document.body的后面，这种方式是我们很常 用的，值得庆幸的是，它也不会阻塞后面资源的加载。HTTP瀑布图效果图如下（还可以通过firebug来查看）：


var script = document.createElement("script");
script.type = "text/javascript";
script.src = "event.js";
document.getElementsByTagName("head")[0].appendChild(script);

2. 用XMLHttpRequest取得要脚本的内容，再创建Script对象

原理：这个跟XML Eval的方式差不多。也是通过XMLHttpRequest的方式来加载外部的Javascript文件，不过之后是动态生成一个script标签，并 设置script标签的text属性为XHR返回的Javascript代码，这种方式也没有阻塞后面的资源的下载。HTTP瀑布图效果图如下（还可以通 过firebug来查看）：


var createXHR = function(){
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xhr;
}
var xhr = createXHR();
xhr.open("GET", "event.js", true);
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 || xhr.status === 200) {
var script = document.createElement("script");
document.getElementsByTagName("head")[0].appendChild(script);
script.text = xhr.responseText;
}
}
xhr.send(null);