几种提高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);