无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出现阻塞的原因在于加载js文件时浏览器会停止处理页面,先执行 JavaScript代码,然后再继续解析和渲染页面。同样的情况也发生在使用 src 属性加载 JavaScript的过程中。
无阻塞的脚本
减少 JavaScript 文件大小并限制 HTTP 请求数在功能丰富的 Web 应用或大型网站上并不总是可行。Web 应用的功能越丰富,所需要的 JavaScript 代码就越多,尽管下载单个较大的 JavaScript 文件只产生一次 HTTP 请求,却会锁死浏览器的一大段时间。为避免这种情况,需要通过一些特定的技术向页面中逐步加载 JavaScript 文件,这样做在某种程度上来说不会阻塞浏览器。
无阻塞脚本的秘诀在于,在页面加载完成后才加载 JavaScript 代码。这就意味着在 window 对象的 onload事件触发后再下载脚本。有多种方式可以实现这一效果。
一:defer 属性延迟加载脚本
<script type="text/javascript" src="script1.js" defer></script>
*对应的 JavaScript 文件将在页面解析到< script>标签时开始下载,但不会执行,直到 DOM 加载完成,即onload事件触发前才会被执行。当一个带有 defer 属性的 JavaScript 文件下载时,它不会阻塞浏览器的其他进程,因此这类文件可以与其他资源文件一起并行下载。
*defer 属性只被 IE 4 和 Firefox 3.5 更高版本的浏览器所支持
动态脚本元素
二:通过标准 DOM 函数创建< script>元素
var script = document.createElment("script");
script.type = "text/javascript"
script.src = "script1.js";
document.getElementsByTagName("head")[0].appendChild(script);
三:通过检查 readyState 状态加载 JavaScript 脚本,函数进行封装
function loadScript(url,callback) {
var script = document.createElment("script");
script.type = "text/javascript";
if(script.readyState) { //IE
script.onreadystatechange = function(){
if(script.readyState == "load" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
}
}else {
script.onload = function() {
callback();
}
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
loadScript("script1.js", function(){
loadScript("script2.js", function(){
loadScript("script3.js", function(){
alert("All files are loaded!");
});
});
});
使用 XMLHttpRequest(XHR)对象
四:通过 XHR 对象加载 JavaScript 脚本
var xhr = new XMLHttpRequest();
xhr.open("get","script1.js",true);
shr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
var script = document.creatElement("script");
script.type = "text/javascript";
script.text = xhr.responseText;
document.body.appendChild(script);
}
}
}
xhr.send(null);
转载于:http://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/index.html?ca=drs-