网站重构之脚本加载

众所周知，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的《高性能网站建设指南》