|
|
幾乎每一個前端程序員都知道應(yīng)該把script標(biāo)簽放在頁面底部。關(guān)于這個經(jīng)典的論述可以追溯到Nicholas的 High Performance Javasript 這本書的第一章Loading and Execution中，他之所以建議這么做是因為：
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.
簡而言之，如果瀏覽器加載并執(zhí)行腳本，會引起頁面的渲染被暫停，甚至還會阻塞其他資源(比如圖片)的加載。為了更快的給用戶呈現(xiàn)網(wǎng)頁內(nèi)容，更好的用戶體驗，應(yīng)該把腳本放在頁面底部，使之最后加載。
為什么要在標(biāo)題中使用“再”這個字？因為在工作中逐漸發(fā)現(xiàn)，我們經(jīng)常談?wù)摰囊恍╉撁鎯?yōu)化技巧，比如上面所說的總是把腳本放在頁面的底部，壓縮合并樣式或者腳本文件等，時至今日已不再是最佳的解決方案，甚至事與愿違，轉(zhuǎn)化為性能的毒藥。這篇文章所要聊的，便是展示某些不被人關(guān)注的瀏覽器特性或者技巧，來繼續(xù)完成資源加載性能優(yōu)化的任務(wù)。
一. Preloader
什么是Preloader
首先讓我們看一看這樣一類資源分布的頁面：
<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知識庫：讓我們再聊聊瀏覽器資源加載優(yōu)化，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
