|
|
幾乎每一個(gè)前端程序員都知道應(yīng)該把script標(biāo)簽放在頁(yè)面底部。關(guān)于這個(gè)經(jīng)典的論述可以追溯到Nicholas的 High Performance Javasript 這本書的第一章Loading and Execution中，他之所以建議這么做是因?yàn)椋?/p>
Put all <script> tags at the bottom of the page, just inside of the closing </body> tag. This ensures that the page can be almost completely rendered before script execution begins.
簡(jiǎn)而言之，如果瀏覽器加載并執(zhí)行腳本，會(huì)引起頁(yè)面的渲染被暫停，甚至還會(huì)阻塞其他資源(比如圖片)的加載。為了更快的給用戶呈現(xiàn)網(wǎng)頁(yè)內(nèi)容，更好的用戶體驗(yàn)，應(yīng)該把腳本放在頁(yè)面底部，使之最后加載。
為什么要在標(biāo)題中使用“再”這個(gè)字？因?yàn)樵诠ぷ髦兄饾u發(fā)現(xiàn)，我們經(jīng)常談?wù)摰囊恍╉?yè)面優(yōu)化技巧，比如上面所說(shuō)的總是把腳本放在頁(yè)面的底部，壓縮合并樣式或者腳本文件等，時(shí)至今日已不再是最佳的解決方案，甚至事與愿違，轉(zhuǎn)化為性能的毒藥。這篇文章所要聊的，便是展示某些不被人關(guān)注的瀏覽器特性或者技巧，來(lái)繼續(xù)完成資源加載性能優(yōu)化的任務(wù)。
一. Preloader
什么是Preloader
首先讓我們看一看這樣一類資源分布的頁(yè)面：
<head> <link rel="stylesheet" type="text/css" href=""> <script type="text/Javascript"></script></head><body> <img src=""> <img src=""> <img src=""> <img src=""> <img src=""> <img src=""> <img src=""> <img src=""> <script type="text/Javascript"></script> <script type="text/Javascript"></script> <script type="text/Javascript"></script></body>
it知識(shí)庫(kù)：讓我們?cè)倭牧臑g覽器資源加載優(yōu)化，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
