利用jQuery的加载机制延迟加载第三方js代码

[文章作者:磨延城 转载请注明原文出处: https://mo2g.com/view/102/ ]

经过反复测试,终于到网站“慢”的原因了:因为本站的所有特效都是基于jQuery运行的,而jQuery的运行机制又保证了所有的文件对象模型(Document Object Model,简称DOM)全部加载完毕,才运行jQuery代码.即使磨途歌在1ms中做出响应,但只要用户的浏览器没把dom加载完毕,jQuery代码就迟迟不会执行,导致让用户感觉到网站很慢,很慢.

曾经有朋友跟我反映,感觉我的网站打开很慢,但没有得到太多反馈,再加上最近有很多事情,所以就先搁浅了。然而,客观的从网站的响应时间来看,40~100ms已经很快了,再有图片、样式、js代码的外部资源都使用了CDN加速,怎么会慢呢?

五一假期将至,就趁着闲暇时间,分析一下网站的加载时间线,看看究竟能不能找出慢的根本来。

经过反复测试,终于到网站“慢”的原因了:因为本站的所有特效都是基于jQuery运行的,而jQuery的运行机制又保证了所有的文件对象模型(Document Object Model,简称DOM)全部加载完毕,才运行jQuery代码。即使磨途歌在1ms中做出响应,但只要用户的浏览器没把dom加载完毕,jQuery代码就迟迟不会执行,导致让用户感觉到网站很慢,很慢。

那么,是什么导致dom加载缓慢呢?答案是第三方的js引用。

比如新浪的微博的js接口代码,加载时间有时候长达3秒:

<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>

再有就是alexa的js统计代码,因为alexa服务器在国外,经常会出现延迟现象。

<script src='http://xslt.alexa.com/site_stats/js/t/a?url=mo2g.com'></script>

综上所述,在这些外部资源加载完毕之前,jQuery代码是不会执行的。所以为了网站的响应速度,必须想办法将他们延迟加载。

延迟加载第三方js的方式,也很简单,借着jQuery的加载机制就可以实现。先看看改写的新浪的微博的js接口代码:

<script data-url="http://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>

src改成了data-url,这样在浏览器解析dom的时候就不会立即加载外部js代码,只有当我们根据data-url中的值新增一个src属性,浏览器才会加载外部js代码。

我们只需要在jQuery中写一点代码,就能实现延迟加载的效果,代码如下:

<script>
jQuery(function($) {
    $('script[data-url]').each(function() {
        var _this = $(this),
            url = _this.attr('data-url');
        _this.attr('src',url); 
    });
});
</script>

优化之后,网站的js特效的显示时间大大缩短了。

最后祝大家五一快乐,插蜡烛去了。

评论:

  1. mo2g 回复2014年05月01日 22时21分
    磨者
    小磨是个很挑剔的人啊,一直以来访问这里速度都很快的,很惊喜的发现这里,给这个地方取个名字,就叫磨坊吧,我心中的磨坊

      磨延城 @mo2g 回复2014年05月02日 07时50分
      磨者

  2. 我来说两句:

      切换  

    磨途歌检测发现,您当前使用的浏览器版本过低,要想使用画板模式,请先更新浏览器

      切换  

    磨途歌随机验证码