javascript non-blocking download 的原理

試了 head.js 的測試頁, 覺得很有意思, 為啥用 head.js 可以快這麼多, 就去看了 head.js 的原始碼, 看起來是 scriptTag 這個函式負責載入檔案。但是我不明白為何這樣可以加快載入速度, 畢竟瀏覽器的連線數量沒變, 為何用同樣的瀏覽器 (我用 Chrome 試的), 速度卻差這麼多。

在網路上查了一陣子, 看到 jnlin 寫的《Head JS : The only script in your HEAD》, 得知關鍵在於瀏覽器如何處理 tag <script>, 接著就查到這篇: 《What is a non-blocking script?》, 才明白前因後果。

摘要如下:
  • 只有一個 thread 在執行 javascript。這意味著 UI rendering 和其它 js 操作都是同一個 thread 負責的。 
  • 載入 script tag 時, 瀏覽器怕 script 裡有 js code 會改變 UI, 所以會等 script 載入完並執行完才繼續 rendering。
  • 相對來說, 下載 javascript 檔比執行 javascript 慢得多。若寫程式的人知道這段 script 不會影響之後的 rendering, 有機會將下載的時間切開, 省去下載時間。
  • 做法有兩種: 第一種是動態地增加 script tag, 於是在讀入網頁時, rendering 不會被 script tag 卡住。第二種是用 HTML5 的語法 async, 目前只有 Firefox 3.6 有支援。
結論是 javascript 是單 thread, 無法平行化執行, 但可以平行下載檔案 (視最大連線數)。並且有機制讓下載檔案不會擋住網頁 rendering, 但程式設計師得自己處理 javascript 相依性 (執行順序)。head.js 提供了不錯的介面解決這問題, 不過也有些小細節要程式設計師自行處理。head.js 的相關說明見附錄, 我有興趣的是為啥它可以加快網頁載入速度 (實際上只有 rendering 完主頁的速度, 不是整體時間)。
head.js 的說明:
另外這裡有各家瀏覽器支援網路連線的情況, 滑鼠移到各分欄上會有說明, 可以得知一些細節。HTTP 1.1 規定同一網域最多兩個連線, 結果只有 IE6 遵守, 還被記為缺點......。

留言

這個網誌中的熱門文章

(C/C++ ) 如何在 Linux 上使用自行編譯的第三方函式庫

熟悉系統工具好處多多

virtualbox 使用 USB 裝置