網頁渲染的基本過程。浏覽器(qì)的主要作(zuò)用是将用戶輸入的網站(zhàn)“URL”轉變成可視(shì)化(huà)的圖像。這(zhè)其中包含兩個(gè)過程,一(yī)是網頁加載過程,從“URL”到構建DOM(Document Object Model,文檔對象模型)樹;二是網頁渲染過程,從DOM樹到生(shēng)成可視(shì)化(huà)圖像,即我們看到的頁面效果。
網頁渲染的過程其實就(jiù)是将URL對應的各種資源,通過浏覽器(qì)渲染引擎的解析,輸出可視(shì)化(huà)的圖像。根據數據的流向,浏覽器(qì)的渲染過程可以分(fēn)成三個(gè)階段(以WebKit内核浏覽器(qì)為(wèi)例):從網頁的URL到構建完DOM樹;從DOM樹到構建完WebKit的繪圖上(shàng)下(xià)文;從繪圖上(shàng)下(xià)文到生(shēng)成最終圖像。
浏覽器(qì)渲染引擎主要包括HTML解釋器(qì)、CSS解釋器(qì)、布局和JavaScript(以下(xià)簡稱JS)解釋器(qì)。其中,HTML解釋器(qì)主要作(zuò)用是将HTML文本解釋成DOM樹;CSS解釋器(qì)作(zuò)用是為(wèi)DOM中各元素對象計算(suàn)出樣式信息;布局則是指在DOM樹創建之後形成一(yī)個(gè)内部表示模型,這(zhè)個(gè)模型将HTML元素與CSS樣式結合起來(lái),計算(suàn)出元素的具體(tǐ)大小和位置等布局信息;JS解釋器(qì)能(néng)夠解釋JS代碼并通過DOM接口和CSSOM接口來(lái)修改網頁内容和樣式信息,從而改變渲染的結果。随着JS解釋器(qì)越來(lái)越重要,JS解釋器(qì)逐漸脫離出來(lái)成為(wèi)獨立的JS引擎。