当<script>标签位于html文档流中的时候,位于<script>后面的html会被阻止渲染,必须等到该script加载完以后才会后面的html才会渲染,通过JavaScript动态的生成一个script标签,可以避免上面你的这个问题,因为这个会是外部加载的script的文件位于html文档流以外。因此动态的加载外部的JavaScript文件可以提高页面的渲染速度,提高用户体验。
最佳实践
Steve Souders关于外部的JavaScript文件不阻碍html文档的渲染这个问题,在他的书中和博客中公布了集中方法,通过我的思考和实验,我得出了一下三点结论:
1. 创建两个JavaScript文件。第一个JavaScript文件包含动态加载外部JavaScript文件的代码;第二个JavaScript文件包含所有的外部JavaScript代码.
2. 把第一个JavaScript文件放在页面的地步,</body>结束标签的前面。
3. 创建第二个JavaScript标签通过调用函数来加载外部JavaScript文件。
下面可以具体的如何实现:
第一个JavaScript文件要足够的小,一般包含如下的代码:first.js
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);
}
然后在我们的页面中可以这样使用
<script type="text/javascript" src="http://your.cdn.com/first.js"></script>
<script type="text/javascript">
loadScript("http://your.cdn.com/second.js", function(){
//initialization code
});
</script>
参考:http://developer.yahoo.com/yui/3/yui/
http://www.nczonline.net/blog/2009/06/23/loading-javascript-without-blocking/