2012/01/03

加速你的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秒。

2 則留言:

  1. 你好,请问怎样把JavaScript文件更换位置存储呢,在中国大陆因为对blogger的封锁,虽然可以通过绑定域名后访问,但是因为js文件所在域被封,页面显示有问题,希望得到博主的答复,谢谢!

    回覆刪除
  2. Hi 肖亮:
    如果你只是一般在中國的Blogger(Blogspot)用戶,那這個問題恐怕是無解的。
    因為內定的Template,有許多使用了你看不見的內定變數,這些變數依然是存在的。
    例如你可以使用pingdom這個服務,就可以知道Blogger的不同Template叫用了不同的JavaScript,其中有些服務是在設定中找不到的。
    但如果你的JavaScript能力很強的話,這個問題其實還是有解的。那就是把整個Template整個修改過,然後調用你存在網路上的JavaScript,以修補無法調用特定JavaScript的錯誤。
    但我的能力只是前述的一般人、而且我也不在中國,所以我雖然能提出這個理論上的解法,但我卻無法實際幫你做任何事。

    回覆刪除