网站重构之脚本加载
众所周知，javascript脚本是阻塞加载，那脚本书写的位置要是不是一定要放到页面底部？有没有别的方法提高性能呢？
From:IT-北北报[itbbb.com]
脚本放到底部是为了让整个页面先行渲染完毕，再加载执行脚本，是广为人知的网站优化方式。
但是万事没有绝对，在实际项目中，我们通常遇到的情况并不可控，比如，我们引用了一些第三方插件，而这些插件依赖于jquery，我们就必须让jquery这个脚本在这些插件之前加载，否则可能出现一些未知的问题。
当然，如果你能控制你网站的所有脚本，我们可以尝试使用异步加载的方法做出更棒的优化，对于页面上所有隐藏元素用到的脚本，我们可以按需加载，如果用户需要使用该部分功能，我们再去加载相应的脚本，这样可以大大提高初始页面的加载性能。
比如你网站上引用了百度地图的Api，但是地图处于一个弹层内，开始用户并不能看到它，那么好，我们可以当用户点击“查看地图”的时候，使用类似如下代码的形式，实现按需加载。
$.getScript(“baidumapapi.js”,function(){
Callback();//api加载完后要执行的函数
})
细心的同学发现，如果这样做的话，当用户点击“查看地图”的时候，因为要先去加载baidumapapi.js，所以可能会产生延时，有没有比getScript更好的方法？
这时候，我们可以采用延时加载，和触发加载相结合的方式，我们还拿刚刚的例子说明，当我们进入该页面的时候，我们并不确定用户要不要点击“查看地图”，在他还在犹豫的时候，我们可以帮他预加载，注意预加载一定要在页面其它元素加载完毕之后，不影响用户正常阅读文字、图片内容的情况，进行预加载。
伪代码如下：
window.onload=function(){
setTimeout (function(){
$.getScript(“baidumapi.js”,function(){
CallBack();
});
},3000);//页面载入后3秒，加载baidumapapi.js
}
这个时候我们要注意一个问题，就是当预加载如果完成的情况下，用户再去点击“查看地图”，我们就不要再去重新加载这个脚本了，所以我们要给加载过的脚本贴一个标签,代码类似于：
Var CallBack=function(){
$(“#mappanel”).addClass(“apiloaded”);//我们给mappanel加一个属性class
}
然后在加载点击事件上加入验证，检验这个脚本是否可以使用
JqueryObject.Click(function(){
If($(“#mappannel”).hasClass(“apiloaded”)){
//直接执行事件
CallBack();
}else{
$.getScript(“baidumapapi.js”,function(){
//加载后在执行事件
CallBack();
//贴上已加载标签
$(“#mappanel”).addClass(“apiloaded”);
})
}
})
很多同学其实对上面的理论已经有所了解，但是将他们一一应用到项目中确实要费不少精力，所以，行动是践行真理的最佳方式，就从你身边的站点开始，一步步将这些方法应用起来吧。
如果你想了解更多关于高性能方面的知识，你可以尝试阅读大神zakas的《高性能Javascript》或者Steve souders的《高性能网站建设指南》
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
