把腳本放到頁面底部
腳本會阻塞漸進式渲染积糯，最好把腳本放到頁面的底部榜苫，這樣能確保頁面渲染正常進行并且獲取一個更好的并行下載。
腳本的問題
說明腳本帶來問題的最好方法是，來看下把腳本放在頁面中間的一個例子
http://stevesouders.com/hpws/js-middle.php
例子中那段腳本花了10秒來下載绊率，所以很容易看到問題：腳本之后的頁面內(nèi)容花了10秒才出現(xiàn)谨敛。這是由于腳本阻塞了并行下載。等我們下面介紹完瀏覽器并行下載滤否，再回來看這個問題脸狸。
例子中的另一個問題是漸進式渲染。當使用樣式的時候顽聂，漸進式渲染阻塞直到所有的樣式下載完成肥惭，這就是為什么要把所有樣式放在HEAD中，這樣他們就能被第一時間下載而不會阻塞渲染進程紊搪。對于腳本來說，文檔中位于腳本后面內(nèi)容的渲染會被阻塞全景，把腳本放在頁面底部就可以讓更多的內(nèi)容得到渲染展示耀石。
并行下載
HTTP/1.1協(xié)議中提到，它建議瀏覽器對于每一個域名一次可平行下載兩個文件爸黄。
很多web頁面下載他們的部件來自單個域名滞伟，如果一個web頁面下載它的部件來自兩個域名，那整體的響應速度會提高一倍炕贵；
限制每個域名一次并行下載2個文件是一個建議梆奈，默認狀態(tài)下，低版本的IE和firefox準從這個建議称开，但是用戶可以修改這個默認行為,提高并行下載數(shù)量亩钟；測試了下目前現(xiàn)代瀏覽器并行下載數(shù)量都要高于2；
今天大多數(shù)網(wǎng)站都基于HTTP/1.1,前端工程師可以簡單地使用CNAMEs(DNS 別名)來分離他們的部件到多個域名下鳖轰，并行下載量會帶來網(wǎng)絡帶寬和CPU資源的開銷清酥，太多的并行下載數(shù)反而會降低性能。依據(jù)雅虎的研究蕴侣，使用兩個域名比1,4或者10個會有更好的性能表現(xiàn)焰轻。
腳本阻塞并行下載
并行下載的好處顯而易見，然而昆雀，當腳本正在下載時辱志，并行下載將不能進行。瀏覽器不會開始任何其他資源的下載狞膘，即便在不同的域名下揩懒。這種行為的原因之一是腳本可能會使用document.write去輸出頁面內(nèi)容，所以瀏覽器等待以確保頁面被恰當?shù)卣故尽?/p>
另一個原因是確保腳本按恰當?shù)仨樞驁?zhí)行客冈，如果多個腳本并行下載旭从，將不能以指定的順序確保響應到達。比如，如果最后一個腳本比早出現(xiàn)在頁面的中腳本要小和悦，它可能第一個下載完成退疫，如果腳本之間沒有依賴機制，無循序得執(zhí)行他們將會導致腳本錯誤鸽素。
測試了下褒繁，目前只有IE才符合腳本阻塞并行下載的情況，火狐和chrome馍忽，腳本并不會阻塞并行下載棒坏。
不好的情況：腳本放在頁面頂部
這樣的情況下，腳本帶來的兩個影響是很清楚的：
- 腳本之后的頁面內(nèi)容渲染會被阻塞
- 腳本之后的部件下載會被阻塞 (目前只有IE才會)
最好的情況: 腳本放在頁面底部
最好把腳本放到頁面底部遭笋，這樣頁面的內(nèi)容渲染不會被阻塞坝冕，頁面中視覺化的部件也能盡早被下載。
defer & async
對于把腳本放到頁面底部的可以可替代方案是為頁面中引入的腳本添加defer屬性瓦呼，這會使腳本不會阻塞頁面的渲染喂窟，而是當頁面渲染完成后，腳本才有順序地執(zhí)行央串；IE對defer也支持良好
提到defer就要說下async磨澡，這也是script標簽的一個屬性，有該屬性script標簽引入的腳本质和，也不會阻塞頁面的渲染稳摄，但并不會等到頁面渲染完成再執(zhí)行，而是異步地執(zhí)行饲宿；而當存在多個async的腳本時厦酬，并不能保證他們執(zhí)行的先后順序；建議把不依賴與頁面的一些js操作使用async來引入褒傅，以幫助更快地運行弃锐。不過，IE從ie10才支持它殿托；
