|
幾乎每一個前端程序員都知道應該把script標簽放在頁面底部。關于這個經典的論述可以追溯到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.
簡而言之,如果瀏覽器加載并執行腳本,會引起頁面的渲染被暫停,甚至還會阻塞其他資源(比如圖片)的加載。為了更快的給用戶呈現網頁內容,更好的用戶體驗,應該把腳本放在頁面底部,使之最后加載。
為什么要在標題中使用“再”這個字?因為在工作中逐漸發現,我們經常談論的一些頁面優化技巧,比如上面所說的總是把腳本放在頁面的底部,壓縮合并樣式或者腳本文件等,時至今日已不再是最佳的解決方案,甚至事與愿違,轉化為性能的毒藥。這篇文章所要聊的,便是展示某些不被人關注的瀏覽器特性或者技巧,來繼續完成資源加載性能優化的任務。
一. 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知識庫:讓我們再聊聊瀏覽器資源加載優化,轉載需保留來源!
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。