编写高性能的JavaScript-脚本的加载与执行(2)

 非阻塞的脚本(续)

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

posted @ 2010-04-18 20:28  高凡凡高  阅读(455)  评论(0编辑  收藏  举报