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特效的显示时间大大缩短了。

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