闭关纪要4.优化站外脚本的性能

现在的网站或多或少会链接一些站外脚本，例如网站统计代码，网站广告代码，网站的一些附加服务等，那些和网站功能密切相关的我们且不去提它，关键是由一些例如网站统计代码这样的站外脚本，如果将网站的速度拖得很慢，就不太好了。

        我现在就遇到了一个这样的问题，有用户说我的网站反应速度很慢，我看了一下，发现我使用了一个自己通过Google App Engine开发的一个网站附加功能（此功能我在后面将会专门的介绍）脚本引用特别慢，这就拖慢了整个页面的加载。而这个功能在国内因为GFW的原因，所有的appspot都不能访问了。

        这个附加功能倒是可以拿掉，可是类似网站统计代码那样的功能，拖慢页面加载速度是不对，可是要拿掉，也不太好，因此，我准备针对站外脚本实现一个这样的逻辑：如果加载时间超过1秒，则取消这个文件的加载！如果是这样，基本上就可以放心了！

        这样虽然肯定会对我的网站统计数据有所影响，不过相对来讲统计数据没有网页的快速反应重要，因此，也就无所谓了！

        我说的这些脚本都是指通过document.write('<script src="......"></script>')这种模式加载的脚本,这些脚本相互有一个加载顺序的问题,而且,在所有的这些脚本加载完之前,不会触发页面的onLoad事件，我的页面逻辑基本上都是从onLoad开始的。

        因此我实现了一个类似于这样功能的JavaScript函数：

 

 1      // 参数分别是路径/编码/超时时间(毫秒数)
 2      function  loadByWrite(src,charset,time)
 3      {
 4        var id="K_SL_"+new Date().valueOf()+"_"+parseInt(Math.random()*1000);
 5        document.write('<script id="'+id+'" src="'+src+'" type="text/javascript" charset="'+(charset?charset:"utf-8")+'"></script>');
 6        if(time)
 7        {
 8            //设置在time毫秒数值后停止脚本的加载
 9            window.setTimeout(function()
10            {
11                var script=document.getElementById(id);
12                //下面的语句判断假如脚本已经加载完成,则不需要进行下面的过程
13                //script.readyState只在IE下可以使用
14                if(script.readyState && script.readyState!="loading"){return;}
15                //下面将脚本的SRC清空已停止下载，在FF下此无效，我没有研究清楚在FF下怎么停止脚本加载
16                //而且removeAttribute在IE下似乎也无效，真正有效的设置这个src到一个内容为空的JS文件，这个文件应该是站内的，就不会受影响了
17                script.removeAttribute("src");
18                script.src="/js/null.js";
19            },time);
20        }
21        return null
22    }

 

        以上脚本在IE下测试通过，在FF下无效（FF下那个比较慢的文件不会被停止加载），我很想在FF下也解决这个问题，不过目前没有找到相关的资料。

        上面只是一个功能介绍的核心代码，正式使用的时候，需要进行一定的修改，例如允许删除这个setTimeout的功能。

        为什么这个功能只建议使用在站外脚本呢？因为站内脚本假如慢，那是整个网站都慢了，用什么方法都无济于事了！