[轉載]第六章：把腳本放在底部 —《高性能網站建設指南》讀書筆記

網上看到一篇讀書筆記非常不錯，這裡貼出與大家分享，原文連結：

http://www.impng.com/web-dev/put-script-at-the-bottom-read-notes.html

一般浏覽器對同一域下的資源隻能保持兩個并發下載下傳。無法修改使用者的浏覽器設定來增加并行下載下傳數，但可以将資源存放到多個域下，來保持更多的并行連接配接，縮短頁面加載速度。簡單的實作就是對域名做CNAME，Yahoo!的研究表明，使用兩個域來加載資源效果是比較好的。

腳本會阻塞并行下載下傳。在下載下傳腳本時，并行下載下傳是被禁用的，因為腳本加載完後，可能會對頁面進行大面積的布局變動，浏覽器會等待腳本加載完畢，減少布局的頻繁變動帶來的開銷。同時，阻塞并行下載下傳可以保證腳本的按順序執行，避免有依賴關系的腳本執行次序的混亂引起的出錯。

若将腳本放到頁面的最頂部，若腳本加載速度較慢，則頁面會呈現很明顯的白屏。如下面的一個簡單例子：

然後在load_long_time.php檔案内，加入簡單的一個延遲語句即可：

可以看到明顯的白屏，需要等腳本加載完畢後，才會加載圖檔。

除了将腳本放到頁面底部，還可以通過script标簽的defer屬性來避免，但需要酌情使用。屬性defer指定腳本不用立即執行，而是等到頁面全部加載完畢後執行。浏覽器根據此屬性會繼續下面的加載和呈現，而不會阻塞加載。書中提到，defer在firefox中不支援，還是會阻塞并行下載下傳和呈現，但是根據我的測試，在最新的Firefox版本(3.6.3)中，并不會阻塞下載下傳和呈現。可以修改上面的例子來測試：

摘自yzxchoice，使用defer屬性時，需要注意：

1. 不要在defer型的腳本程式段中調用document.write指令，因為document.write将産生直接輸出效果。

2. 不要在defer型腳本程式段中包括任何立即執行腳本要使用的全局變量或者函數。

文中舉出在google ads的script加上defer屬性後，導緻頁面内容一閃就沒了的問題。

原文網址：http://www.impng.com/web-dev/put-script-at-the-bottom-read-notes.html