在網路上查了一陣子, 看到 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 遵守, 還被記為缺點......。
沒有留言:
張貼留言