從統計代碼來談JS加載的優化

我有這么一個職業病，每次發現頁面很卡，不管誰的網站，都會F12調出Chrome控制台來調試，看看是什么原因導致。

原因其實不外乎這幾種：

1、頁面文檔的加載

2、css/js 的加載

 

這邊就 js 說說前端的加載優化，以統計代碼加載為例。 

<!-- 最原始的，騰訊分析、cnzz精簡版就是這種 -->
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=xxx" charset="UTF-8"></script>


<script type="text/javascript">

// 用js 在當前位置插件統計代碼。cnzz、百度統計舊版就是用這個
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fxxx' type='text/javascript'%3E%3C/script%3E"));
</script>

非異步加載，會影響 DOMContentLoaded， 比如 $(document).ready() 延遲，它綁定一些事件，頁面效果，都等這些統計代碼加載完才生效。

而且這種情況下，如果這些被加載的代碼又以同樣的方法加載其他js，則 DOMContentLoaded 會更延后。

所以最好不要用這種方法。

 

<script type="text/javascript">
// 百度統計，創建 script 元素，插入第一個 script 元素前面
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?xxx";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();

///////////////////////////////
// 谷歌分析（ga），其中部分代碼跟百度統計一樣
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-xxx-1', 'auto');
  ga('send', 'pageview');
</script>

百度統計跟ga是異步加載，則不會影響 DOMContentLoaded 。但在Chrome、Firefox、Opera、IE11+ 會影響onload，像Chrome的favicon就一直在轉圈圈。

這樣還不易接受的話，可以用 setTimeout 來解決，讓瀏覽器當成是要延遲加載的。

 

<script type="text/javascript">
    var _hmt = _hmt || [];
    setTimeout(function(){
        (function() {
            var hm = document.createElement("script");
            hm.src = "//hm.baidu.com/hm.js?xxx";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    },0);
</script>

不過這里要注意。這樣的統計代碼最好寫在最前，防止之前的代碼出錯導致統計代碼不被執行。

也可以把這些統計代碼寫到 一個 stat.js 再引入進來防止被其他錯誤代碼影響，雖比較繞。

於是，我趕緊把一些統計代碼用上面的形式加載。把 hm.src 變量替換掉就OK了。

 

這里說的是統計代碼，實際上可以推廣到與業務不相關的一些js都可以這樣加載。

 

原文 http://www.baozy.com/archives/12404.html