關於網頁加載和渲染的過程，在網絡上的討論並不多。可能是因爲這個過程比較複雜，而且瀏覽器執行的速度太快，目前還沒有發現什麼比較好的工具可以清楚的看到瀏覽器解析網頁的每一個過程。通過firedug和httpWatch可以看到瀏覽器的http請求，但是對於瀏覽器如何paint和flow處理html元素，我們仍然是不得而知。“flow”這個詞借鑑於reflow，表示瀏覽器第一次加載網頁的過程。在網絡上搜索了一下，學習如下。
關於瀏覽器加載網頁過程的有趣視頻
可以參見：http://www.aoao.org.cn/blog/2008/05/reflow/ （形象化的reflow）。這個視頻展現了網頁加載的過程，看着比較有趣。要是可以更加形象化，就更好了，可以幫助我們書寫更好的提高網頁加載速度的代碼。
瀏覽器內核
不同的瀏覽器內核，對於網頁的解析過程肯定也不盡相同。http://www.mac52ipod.cn/post/Trident-Gecko-WebKit-Presto.php 一文對各種瀏覽器的頁面渲染引擎進行了簡介。目前主要有基於
（1）Trident頁面渲染引擎 –> IE系列瀏覽器；
（2）Gecko頁面渲染引擎 –> Mozilla Firefox；
（3）KHTML頁面渲染引擎或WebKit框架 –> Safafi和Google Chrome；
（4）Presto頁面渲染引擎 –> Opera
詳細的介紹可以參見原文。
瀏覽器解析網頁的過程
http://hi.baidu.com/seosky/blog/item/78d3394c130f86ffd72afc56.html 瀏覽器加載和渲染原理分析一文中通過一定的方法，推斷了瀏覽器加載解析網頁的順序大致如下：
1. IE下載的順序是從上到下，渲染的順序也是從上到下，下載和渲染是同時進行的；
2. 在渲染到頁面的某一部分時，其上面的所有部分都已經下載完成（並不是說所有相關聯的元素都已經下載完）；
3. 在下載過程中，如果遇到某一標籤是嵌入文件，並且文件是具有語義解釋性的（例如：JS腳本，CSS樣式），那麼此時IE的下載過程會啓用單獨連接進行下載，並且在下載後進行解析，解析（JS、CSS中如有重定義，後定義函數將覆蓋前定義函數）過程中，停止頁面所有往下元素的下載；
4. 樣式表文件比較特殊，在其下載完成後，將和以前下載的所有樣式表一起進行解析，解析完成後，將對此前所有元素（含以前已經渲染的）重新進行樣式渲染。並以此方式一直渲染下去，直到整個頁面渲染完成。
當然這是一個推斷的過程。
藉助Google PageSpeed和Yahoo YSlow分析網頁加載
通過這兩個工具，測試網頁加載過程，可以得到一些提高網頁加載速度的建議。使用Google PageSpeed對Google首頁進行分析，可以得到建議：
（1）壓縮javascript和CSS；
（2）合併外部javascript和CSS；
（3）減少DNS尋址時間；這條與將圖片分散到不同的域名存儲這條折中處理；
（4）使用緩存；
（5）儘量避免CSS表達式；
（6）爲圖片增加寬度和高度屬性；
（7）將css放在網頁頭部，合理放置js的位置。
同時，利用YSlow對google首頁進行分析，我們也可以得到一些改進的建議。這些建議差不太多，就不在詳細說明。
合理使用這兩個工具，優化我們的網頁，提高網頁加載速度，增強用戶體驗。
---------------------------
我自己的誤解
過去一直以爲，一個容器如果沒有讀到自己的結束標籤，那麼這個容器就不會在瀏覽器中顯示出來。今天測試了下，卻發現瀏覽器在讀到一個容器的開始標籤的時候，就可以顯示該容器了。關於瀏覽器如何一個一個的paint HTML中的元素，如果flow它們，這個過程還需要進一步瞭解。當然，也可以不管過程，只看加載的結果，通過pagespeed和Yslow來優化自己的網頁。個人在做佈局的時候，還是會秉承一條原則：儘量讓一個父容器小一些！
參考文獻
[1] 形象化的reflow. http://www.aoao.org.cn/blog/2008/05/reflow/ . 2009-7-20
[2] 各種瀏覽器的頁面渲染引擎簡介. http://www.mac52ipod.cn/post/Trident-Gecko-WebKit-Presto.php. 2009-7-20
[3] 瀏覽器加載和渲染原理分析. http://hi.baidu.com/seosky/blog/item/78d3394c130f86ffd72afc56.html. 2009-7-20
頁面渲染過程
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章