世界上第一款瀏覽器WorldWideWeb由Berners-Lee李爵士于1990發(fā)明裁替。如今二十多年過去铁瞒，瀏覽器也經(jīng)歷了迅猛的發(fā)展势似，派生出許多功能。然而其根本作用，還是以頁面的形式呈現(xiàn)網(wǎng)絡內容既绩。下面本文將簡單談談瀏覽器是怎樣渲染頁面的。
瀏覽器的組成
目前市面上的瀏覽器主要有IE缨恒，Chrome，F(xiàn)irefox轮听，Safari，Opera及國內的360岭佳，UC血巍，搜狗等等。雖功能上各有千秋珊随，但基本組成模塊大致不差述寡，主要有如下及部分：
- 用戶界面（User Interface）：包含地址欄柿隙、前進后退按鈕，書簽欄等等鲫凶，用于與用戶交互禀崖。
- 瀏覽器引擎（Browser Engine）：用于查詢和控制渲染引擎。
- 渲染引擎（Rendering Engine）：用于解析并呈現(xiàn)用戶請求的內容螟炫。
- 網(wǎng)絡（Networking）：用于處理網(wǎng)絡調用波附，比如發(fā)起HTTP請求。
- UI后端（UI Backend）：用于繪制瀏覽器的一些基本組件昼钻，其底層使用的是操作系統(tǒng)的用戶接口掸屡。
- JavaScript解析器 （JavaScript Interpreter）：用于解析并執(zhí)行JS代碼。
- 數(shù)據(jù)存儲（Data Storage）：用于將一些數(shù)據(jù)如cookie持久地存儲在硬盤上然评。
頁面的渲染
瀏覽器通過網(wǎng)絡模塊向服務器發(fā)出請求仅财，獲得返回的響應內容后，渲染引擎開始進行渲染碗淌，一般流程如下：
（1）渲染引擎會從上到下解析HTML文檔盏求，將文檔中的標簽轉換為DOM節(jié)點，并生成DOM樹亿眠。
（2）解析CSS樣式碎罚，構建CSSOM樹。
（3）執(zhí)行JavaSrcipt代碼缕探，通過DOM API和CSSOM API來操作DOM樹和CSSOM樹.
（4）組合DOM樹和CSSOM樹魂莫，生成render樹。
（5）在render樹的基礎上進行布局爹耗，為每個節(jié)點找到它出現(xiàn)在屏幕上的幾何坐標耙考。
（6）將每個節(jié)點通過UI backend繪制在屏幕上。
頁面的解析與呈現(xiàn)
瀏覽器由上到下來解析HTML文檔潭兽，但是對于CSS和JS在文檔中的位置不同倦始，不同的瀏覽器在不同場景下可能有不同的處理方式，而導致頁面呈現(xiàn)的效果不同山卦。
- 白屏和FOUC
白屏鞋邑，顧名思義，就是屏幕上什么都沒有账蓉。出現(xiàn)這種現(xiàn)象的原因主要是當把CSS樣式放在文檔底部枚碗，或者是使用@import標簽引入一個CSS樣式（使用@import引入的 CSS 將在頁面加載完畢后被加載），對于某些瀏覽器在某些場景下（例如IE在新窗口打開和刷新等）铸本，會選擇先渲染樣式肮雨，再呈現(xiàn)文檔內容，所以在CSS未下載完成箱玷，頁面樣式未渲染完成之前怨规，頁面呈現(xiàn)白屏陌宿。另外當JS放在文檔開頭，因為加載JS會禁用并發(fā)（即要先加載完成JS文件波丰，后面的文件才會繼續(xù)加載）壳坪，所以也可能出現(xiàn)白屏現(xiàn)象。
FOUC（Flash of Unstyled Content）是指當CSS樣式放在文檔底部或使用@import掰烟，某些瀏覽器在某些場景下（如IE點擊鏈接爽蝴，書簽進入等），會選擇先呈現(xiàn)文檔內容媚赖，等CSS加載完成后霜瘪，再渲染樣式，這時頁面在渲染過程中會出現(xiàn)閃爍現(xiàn)象惧磺。
為減少以上的狀況出現(xiàn)颖对，通常會將CSS樣式放在文檔頂部，而JS放在文檔底部磨隘，使得頁面樣式盡早加載完成缤底，及時渲染，而不會發(fā)生JS阻塞番捂。 - async和defer
async和defer是讓JS異步加載與執(zhí)行的兩種方式个唧。當在文檔中通過<script src="script.js"></script>引入JS時，如果不用async或defer设预，瀏覽器會不等待<script>標簽之后的文檔載入而先下載并執(zhí)行script.js徙歼。而使用ansyc即<script async src="script.js"></script>，會讓加載與渲染文檔元素的過程和加載與執(zhí)行script.js的過程同步進行鳖枕；使用defer即<script defer src="script.js"></script>魄梯，會讓加載文檔元素的過程和加載script.js的過程同步進行，但是script.js的執(zhí)行要在所有文檔元素解析完成之后宾符，DOMContentLoaded事件觸發(fā)之前酿秸。
小結
本文大致介紹了瀏覽器頁面的渲染步驟和一些影響頁面呈現(xiàn)效果的相關因素。我們在實際應用中可以依據(jù)這些因素有針對性地進行優(yōu)化魏烫，來達到期望的效果辣苏。
