JavaScript中的无阻塞加载性能优化方案(4)
复制代码 代码如下: 1 script type="text/javascript" function loadScript(url, callback){ var script = document.createElement ("script"); script.type = "text/javascript"; if (script.readyState){
复制代码 代码如下:
1 <script type="text/javascript">
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);
}
loadScript("the-rest.js", function(){
Application.init();
});
</script>
一旦页面初始化代码下载完成，还可以使用loadScript()函数加载页面所需的额外功能函数。
介绍一个通用的工具，Yahoo! Search的Ryan Grove创建了LazyLoad库（参见：http://github.com/rgrove/lazyload/ ）。LazyLoad是一个强大的loadScript()函数。LazyLoad精缩之后只有大约1.5KB。用法举例如下：
复制代码 代码如下:
<script type="text/javascript" src="lazyload-min.js"></script>
<script type="text/javascript">
LazyLoad.js("the-rest.js", function(){
Application.init();
});
</script>
Summary 总结
1.将所有<script>标签放置在页面底部，紧靠关闭标签</body>的上方。此方法可以保证页面在脚本运行之前完成解析。
2.将脚本成组打包。页面的<script>标签越少，页面的加载速度就越快，响应也更迅速。不论外部脚本文件还是内联代码都是如此。
3.有几种方法可以使用非阻塞方式下载Javascript：
1).为<script>标签添加defer属性
2）.动态创建<script>元素，用它下载并执行代码
3）.用XHR对象下载代码，并注入到页面
通过上述策略，可以极大提高那些使用Javascript代码的网友应用的实际性能。
参考书籍《高性能Javascript》。
精彩图集
精彩文章