Non-blocking 載入 JavaScript

此篇文章最近更新時間為2011-01-23 13:46:07 目前共有6篇留言

關於作者 - JosephJ

任職於 Faria。喜好戶外運動、2008 年 5 月完成「跑步環島」。對於新技術跟程式碼有著強烈的偏執狂。

效能優化的 Best Practice

Y!Slow(關於前端效能優化)的 Best Practice 有一則是 Put Scripts at the bottom、簡略地講就是要將外部 JavaScript 放在原始碼最下方,等待網頁完全載入後才執行。主要的原因是:當瀏覽器讀取到外部 JavaScript 或 CSS 標籤時,皆會佔住整個網頁的下載流程(不過這點在像 Chrome 等較新的瀏覽器已經有所改進了)、而不是像其他元件可以同時平行下載。另外的原因就是 JavaScript 通常得跟 DOM 物件互動、太早載入沒有幫助。

將 JavaScript 放在最下方的缺點

我們的網站也是將 JavaScript 放在最下方,雖然不會阻擋到其他元件的下載,但是缺點就是這些功能使用者看到的第一時間沒辦法使用、以及有時畫面會閃一下(漸進式支援)。想到多重兼顧(無障礙、視覺、效能、使用性)的解決方案並不容易、有時還可能會被 QA 認為是 Bug :p

用 Unblock 的方式載入

大陸的同事建議採用 Unblock 載入 JavaScript 的方式,也就是將原本放在 前的:

<script src="外部 JS 檔"></script> 拿到 前改為:
<script>
(function(){
  var scriptEl   = document.createElement("script");
  scriptEl.src   = "外部 JS 檔";
  scriptEl.type  = "text/javascript";
  scriptEl.async = true;
  document.getElementsByTagName("head")[0].appendChild(scriptEl);
}());
</script>

這樣做就避掉了不會有擋住其他元件下載的問題、也可以讓 JavaScript 盡早執行。視覺、效能、使用性都獲得了很大的改善(主要是使用者的感受、比較難用數據或截圖表達 :p)。技術很簡單、只是不知道之前自己為啥都沒有想到過(太笨啦 XD)。這個作法讓我們可以兼顧效能、無障礙與使用性,小巧簡單卻是很棒的作法!

注意事項

你的網站如果沒有預先處理,直接搬移可能會產生錯誤,因為可能 JavaScript 載入了、但你相對應的 DOM 元素卻還沒載入。我們可以這樣做的原因是,在設計整個架構之初,每個 DIV 模組的 JavaScript 都會採用 YUI 的 onContentReady 等待、有內容才執行,所以不管我們的 JavaScript 放在那個位置,都是可以 Work 的!



Comments

  1. Jackson 2011-02-15 09:17:22
    其实这种方法就是从http://www.yuiblog.com/blog/2008/07/22/non-blocking-scripts/ 来的。Yahoo的前辈啊。其实CSS不会block,但是有例外,都写在这个页面里了。

    另外,匿名函数执行确实是这样的,过JSLint的扫描至少得这样。(function(){}());
  2. josephj 2011-02-08 10:31:25
    script 最後一行:

    我測試過後是可以的喔
    http://josephj.com/lab/anonymous-function/demo.html

    也找到有人整理了三種 anonymous function pattern
    http://www.mangguo.org/javascript-anonymous-function-code-pattern/
  3. script最後一行 2011-01-31 19:30:35
    剛簡單測完:

    }()); //firefox ok,chrome不ok
    應該是
    })(); //firefox + chrome ok

    以上~thx
  4. 湯姆 2011-01-24 18:10:34
    另外google analytics的建議寫法一樣
    http://code.google.com/apis/analytics/docs/tracking/asyncUsageGuide.html#SplitSnippet
  5. orson 2011-01-24 11:38:53
    這樣不就是headjs在作的事情?
  6. 湯姆 2011-01-24 10:30:07
    http://www.yuiblog.com/blog/2008/07/22/non-blocking-scripts/
    這邊有寫
暱稱: 必填。
Email: 非必填。若填寫為不公開欄位,僅供站長參考聯繫。
內容: 必填。限 255 個字元以內。
驗證碼:
送出

Facebook Comment