關(guān)于網(wǎng)頁(yè)加載和渲染的過程，在網(wǎng)絡(luò)上的討論并不多?？赡苁且?yàn)檫@個(gè)過程比較復(fù)雜，而且瀏覽器執(zhí)行的速度太快，目前還沒有發(fā)現(xiàn)什么比較好的工具可以清楚的看到瀏覽器解析網(wǎng)頁(yè)的每一個(gè)過程。通過firedug和httpWatch可以看到瀏覽器的http請(qǐng)求，但是對(duì)于瀏覽器如何paint和flow處理html元素，我們?nèi)匀皇遣坏枚?#8220;flow”這個(gè)詞借鑒于reflow，表示瀏覽器第一次加載網(wǎng)頁(yè)的過程。在網(wǎng)絡(luò)上搜索了一下，學(xué)習(xí)如下。
關(guān)于瀏覽器加載網(wǎng)頁(yè)過程的有趣視頻
可以參見：http://www.aoao.org.cn/blog/2008/05/reflow/ （形象化的reflow）。這個(gè)視頻展現(xiàn)了網(wǎng)頁(yè)加載的過程，看著比較有趣。要是可以更加形象化，就更好了，可以幫助我們書寫更好的提高網(wǎng)頁(yè)加載速度的代碼。
瀏覽器內(nèi)核
不同的瀏覽器內(nèi)核，對(duì)于網(wǎng)頁(yè)的解析過程肯定也不盡相同。http://www.mac52ipod.cn/post/Trident-Gecko-WebKit-Presto.php 一文對(duì)各種瀏覽器的頁(yè)面渲染引擎進(jìn)行了簡(jiǎn)介。目前主要有基于
（1）Trident頁(yè)面渲染引擎 –> IE系列瀏覽器；
（2）Gecko頁(yè)面渲染引擎 –> Mozilla Firefox；
（3）KHTML頁(yè)面渲染引擎或WebKit框架 –> Safafi和Google Chrome；
（4）Presto頁(yè)面渲染引擎 –> Opera
詳細(xì)的介紹可以參見原文。
瀏覽器解析網(wǎng)頁(yè)的過程
http://hi.baidu.com/seosky/blog/item/78d3394c130f86ffd72afc56.html 瀏覽器加載和渲染原理分析一文中通過一定的方法，推斷了瀏覽器加載解析網(wǎng)頁(yè)的順序大致如下：
1. IE下載的順序是從上到下，渲染的順序也是從上到下，下載和渲染是同時(shí)進(jìn)行的；
2. 在渲染到頁(yè)面的某一部分時(shí)，其上面的所有部分都已經(jīng)下載完成（并不是說(shuō)所有相關(guān)聯(lián)的元素都已經(jīng)下載完）；
3. 在下載過程中，如果遇到某一標(biāo)簽是嵌入文件，并且文件是具有語(yǔ)義解釋性的（例如：JS腳本，CSS樣式），那么此時(shí)IE的下載過程會(huì)啟用單獨(dú)連接進(jìn)行下載，并且在下載后進(jìn)行解析，解析（JS、CSS中如有重定義，后定義函數(shù)將覆蓋前定義函數(shù)）過程中，停止頁(yè)面所有往下元素的下載；
4. 樣式表文件比較特殊，在其下載完成后，將和以前下載的所有樣式表一起進(jìn)行解析，解析完成后，將對(duì)此前所有元素（含以前已經(jīng)渲染的）重新進(jìn)行樣式渲染。并以此方式一直渲染下去，直到整個(gè)頁(yè)面渲染完成。
當(dāng)然這是一個(gè)推斷的過程。
借助Google PageSpeed和Yahoo YSlow分析網(wǎng)頁(yè)加載
通過這兩個(gè)工具，測(cè)試網(wǎng)頁(yè)加載過程，可以得到一些提高網(wǎng)頁(yè)加載速度的建議。使用Google PageSpeed對(duì)Google首頁(yè)進(jìn)行分析，可以得到建議：
（1）壓縮javascript和CSS；
（2）合并外部javascript和CSS；
（3）減少DNS尋址時(shí)間；這條與將圖片分散到不同的域名存儲(chǔ)這條折中處理；
（4）使用緩存；
（5）盡量避免CSS表達(dá)式；
（6）為圖片增加寬度和高度屬性；
（7）將css放在網(wǎng)頁(yè)頭部，合理放置js的位置。
同時(shí)，利用YSlow對(duì)google首頁(yè)進(jìn)行分析，我們也可以得到一些改進(jìn)的建議。這些建議差不太多，就不在詳細(xì)說(shuō)明。
合理使用這兩個(gè)工具，優(yōu)化我們的網(wǎng)頁(yè)，提高網(wǎng)頁(yè)加載速度，增強(qiáng)用戶體驗(yàn)。
---------------------------
我自己的誤解
過去一直以為，一個(gè)容器如果沒有讀到自己的結(jié)束標(biāo)簽，那么這個(gè)容器就不會(huì)在瀏覽器中顯示出來(lái)。今天測(cè)試了下，卻發(fā)現(xiàn)瀏覽器在讀到一個(gè)容器的開始標(biāo)簽的時(shí)候，就可以顯示該容器了。關(guān)于瀏覽器如何一個(gè)一個(gè)的paint HTML中的元素，如果flow它們，這個(gè)過程還需要進(jìn)一步了解。當(dāng)然，也可以不管過程，只看加載的結(jié)果，通過pagespeed和Yslow來(lái)優(yōu)化自己的網(wǎng)頁(yè)。個(gè)人在做布局的時(shí)候，還是會(huì)秉承一條原則：盡量讓一個(gè)父容器小一些！
參考文獻(xiàn)
[1] 形象化的reflow. http://www.aoao.org.cn/blog/2008/05/reflow/ . 2009-7-20
[2] 各種瀏覽器的頁(yè)面渲染引擎簡(jiǎn)介. 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
