關(guān)于網(wǎng)頁(yè)加載和渲染的過(guò)程，在網(wǎng)絡(luò)上的討論并不多?？赡苁且?yàn)檫@個(gè)過(guò)程比較復(fù)雜，而且瀏覽器執(zhí)行的速度太快，目前還沒(méi)有發(fā)現(xiàn)什么比較好的工具可以清楚的看到瀏覽器解析網(wǎng)頁(yè)的每一個(gè)過(guò)程。通過(guò)firedug和httpWatch可以看到瀏覽器的http請(qǐng)求，但是對(duì)于瀏覽器如何paint和flow處理html元素，我們?nèi)匀皇遣坏枚?#8220;flow”這個(gè)詞借鑒于reflow，表示瀏覽器第一次加載網(wǎng)頁(yè)的過(guò)程。在網(wǎng)絡(luò)上搜索了一下，學(xué)習(xí)如下。



關(guān)于瀏覽器加載網(wǎng)頁(yè)過(guò)程的有趣視頻


       可以參見(jiàn)：http://www./blog/2008/05/reflow/ （形象化的reflow）。這個(gè)視頻展現(xiàn)了網(wǎng)頁(yè)加載的過(guò)程，看著比較有趣。要是可以更加形象化，就更好了，可以幫助我們書(shū)寫(xiě)更好的提高網(wǎng)頁(yè)加載速度的代碼。



瀏覽器內(nèi)核


       不同的瀏覽器內(nèi)核，對(duì)于網(wǎng)頁(yè)的解析過(guò)程肯定也不盡相同。http://www./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ì)的介紹可以參見(jiàn)原文。



瀏覽器解析網(wǎng)頁(yè)的過(guò)程


       http://hi.baidu.com/seosky/blog/item/78d3394c130f86ffd72afc56.html 瀏覽器加載和渲染原理分析一文中通過(guò)一定的方法，推斷了瀏覽器加載解析網(wǎng)頁(yè)的順序大致如下：

1. IE下載的順序是從上到下，渲染的順序也是從上到下，下載和渲染是同時(shí)進(jìn)行的；

2. 在渲染到頁(yè)面的某一部分時(shí)，其上面的所有部分都已經(jīng)下載完成（并不是說(shuō)所有相關(guān)聯(lián)的元素都已經(jīng)下載完）；

3. 在下載過(guò)程中，如果遇到某一標(biāo)簽是嵌入文件，并且文件是具有語(yǔ)義解釋性的（例如：JS腳本，CSS樣式），那么此時(shí)IE的下載過(guò)程會(huì)啟用單獨(dú)連接進(jìn)行下載，并且在下載后進(jìn)行解析，解析（JS、CSS中如有重定義，后定義函數(shù)將覆蓋前定義函數(shù)）過(guò)程中，停止頁(yè)面所有往下元素的下載；

4. 樣式表文件比較特殊，在其下載完成后，將和以前下載的所有樣式表一起進(jìn)行解析，解析完成后，將對(duì)此前所有元素（含以前已經(jīng)渲染的）重新進(jìn)行樣式渲染。并以此方式一直渲染下去，直到整個(gè)頁(yè)面渲染完成。

       當(dāng)然這是一個(gè)推斷的過(guò)程。



借助Google PageSpeed和Yahoo YSlow分析網(wǎng)頁(yè)加載


       通過(guò)這兩個(gè)工具，測(cè)試網(wǎng)頁(yè)加載過(guò)程，可以得到一些提高網(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)。



---------------------------



我自己的誤解

       過(guò)去一直以為，一個(gè)容器如果沒(méi)有讀到自己的結(jié)束標(biāo)簽，那么這個(gè)容器就不會(huì)在瀏覽器中顯示出來(lái)。今天測(cè)試了下，卻發(fā)現(xiàn)瀏覽器在讀到一個(gè)容器的開(kāi)始標(biāo)簽的時(shí)候，就可以顯示該容器了。關(guān)于瀏覽器如何一個(gè)一個(gè)的paint HTML中的元素，如果flow它們，這個(gè)過(guò)程還需要進(jìn)一步了解。當(dāng)然，也可以不管過(guò)程，只看加載的結(jié)果，通過(guò)pagespeed和Yslow來(lái)優(yōu)化自己的網(wǎng)頁(yè)。個(gè)人在做布局的時(shí)候，還是會(huì)秉承一條原則：盡量讓一個(gè)父容器小一些！



參考文獻(xiàn)


[1] 形象化的reflow. http://www./blog/2008/05/reflow/ . 2009-7-20

[2] 各種瀏覽器的頁(yè)面渲染引擎簡(jiǎn)介. http://www./post/Trident-Gecko-WebKit-Presto.php. 2009-7-20

[3] 瀏覽器加載和渲染原理分析. http://hi.baidu.com/seosky/blog/item/78d3394c130f86ffd72afc56.html. 2009-7-20