通達人驛站: 加速你的Blog-5 優化JavaScript

2012年1月3日

加速你的Blog-5 優化JavaScript

如果前面的幾篇文章《加速你的Blog-1 找到關鍵元件》、《加速你的Blog-2 優化Widget》、《加速你的Blog-3 優化檔案讀取》、《加速你的Blog-4 優化CSS》你都已經看過且執行過了，仍對自己的Blog 速度不滿意的話，那你只能繼續看這一系列文章的最後、也是比較因難的部份，透過優化 JavaScript提昇你的Blog 速度。

為什麼這是最困難的部份？

前面的優化方式如果作錯了，都能很容易的修改，但一進入JavaScript的部份，只要不小心打錯了一個字、拼錯了字，很有可能未來想要除錯都很困難。

所以，除非你對自己的Coding能力有一點信心，不然在遇到困難時，很有可能會因為一、二個小時都找不到錯誤，使得信心大減！

這是我得先和躍躍欲試、動手實作的實作的讀者先打的預防針，免得到時改都改不下去了，才自悔「早知如此，何必當初」。

另外，在修改之前，我也建議讀者參考這篇《利用Gmail作好個人版本控制Personal Revision Control》，先完成備份，至少這能讓你回到上個版本。

修正一：改變javascript的for廻圈

把類似以下的程式：
for (var i=0;3 > i;i++) {
換成這種寫法：
for (var i = 0, len=3; i < len; i++) {
根據我試驗過的結果，這種寫法不但真的能夠加快速度，也能避免在IE內遇到問題。

修正二：延後執行javascript

把類似以下的程式：
<script src="script.js" type="text/javascript"></script>
加入defer="defer"：
<script src="script.js" type="text/javascript" defer="defer"></script>
根據我試驗過的結果，這種寫法可以加快載入速度大約0.5秒。