网站重构之脚本加载

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

网站重构之脚本加载,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。