行業動态

網頁渲染的(de)基本過程。浏覽器的(de)主要(yào / yāo)作用是(shì)将用戶輸入的(de)網站“URL”轉變成可視化的(de)圖像。這(zhè)其中包含兩個(gè)過程，一(yī / yì ／yí)是(shì)網頁加載過程，從“URL”到(dào)構建DOM(Document Object Model，文檔對象模型）樹；二是(shì)網頁渲染過程，從DOM樹到(dào)生成可視化圖像，即我們看到(dào)的(de)頁面效果。

網頁渲染的(de)過程其實就(jiù)是(shì)将URL對應的(de)各種資源，通過浏覽器渲染引擎的(de)解析，輸出(chū)可視化的(de)圖像。根據數據的(de)流向，浏覽器的(de)渲染過程可以(yǐ)分成三個(gè)階段（以(yǐ)WebKit内核浏覽器爲(wéi / wèi)例）：從網頁的(de)URL到(dào)構建完DOM樹；從DOM樹到(dào)構建完WebKit的(de)繪圖上(shàng)下文；從繪圖上(shàng)下文到(dào)生成最終圖像。

浏覽器渲染引擎主要(yào / yāo)包括HTML解釋器、CSS解釋器、布局和(hé / huò)JavaScript（以(yǐ)下簡稱JS）解釋器。其中，HTML解釋器主要(yào / yāo)作用是(shì)将HTML文本解釋成DOM樹；CSS解釋器作用是(shì)爲(wéi / wèi)DOM中各元素對象計算出(chū)樣式信息；布局則是(shì)指在(zài)DOM樹創建之(zhī)後形成一(yī / yì ／yí)個(gè)内部表示模型，這(zhè)個(gè)模型将HTML元素與CSS樣式結合起來(lái)，計算出(chū)元素的(de)具體大(dà)小和(hé / huò)位置等布局信息；JS解釋器能夠解釋JS代碼并通過DOM接口和(hé / huò)CSSOM接口來(lái)修改網頁内容和(hé / huò)樣式信息，從而(ér)改變渲染的(de)結果。随着JS解釋器越來(lái)越重要(yào / yāo)，JS解釋器逐漸脫離出(chū)來(lái)成爲(wéi / wèi)獨立的(de)JS引擎。