Web 前端網(wǎng)頁渲染優(yōu)化研究

肖建芳

（汕頭職業(yè)技術(shù)學院計算機系，汕頭515041）

0 引言

互聯(lián)網(wǎng)+時代，各行各業(yè)都擁抱互聯(lián)網(wǎng)，特別是在移動端快速發(fā)展的時代，網(wǎng)頁不僅是呈現(xiàn)在用戶的PC瀏覽器里，更多的時候，用戶是通過移動產(chǎn)品瀏覽我們的網(wǎng)頁。加之有越來越多的開發(fā)者投入到Web App 和Hybrid App 的開發(fā)隊伍中，性能這一問題又再一次成為程序員們重點關(guān)注的問題。在用戶就是上帝、速度為王的時代，用戶的選擇直接決定企業(yè)的生存。尤其是智能手機當?shù)赖慕裉?，首屏顯示時間決定了用戶是否會繼續(xù)選擇你的網(wǎng)站和服務。因此，在網(wǎng)站生命周期過程中，不斷對網(wǎng)站性能進行優(yōu)化非常必要。

S 養(yǎng)生館連鎖店網(wǎng)站前端的主要作用是展示連鎖店的企業(yè)文化、產(chǎn)品和服務，查看各地連鎖店分布，以及提供更好的客戶服務，同時用戶也可以直接在網(wǎng)站上訂購部分產(chǎn)品和服務，前端設(shè)計在該網(wǎng)站中占據(jù)著非常重要的地位。

1 網(wǎng)頁渲染的基本過程[1]

瀏覽器的主要作用是將用戶輸入的網(wǎng)站“URL”轉(zhuǎn)變成可視化的圖像。這其中包含兩個過程，一是網(wǎng)頁加載過程，從“URL”到構(gòu)建DOM（Document Object Model，文檔對象模型）樹；二是網(wǎng)頁渲染過程，從DOM樹到生成可視化圖像，即我們看到的頁面效果。網(wǎng)頁渲染的過程其實就是將URL 對應的各種資源，通過瀏覽器渲染引擎的解析，輸出可視化的圖像。根據(jù)數(shù)據(jù)的流向，瀏覽器的渲染過程可以分成三個階段（以WebKit 內(nèi)核瀏覽器為例）：從網(wǎng)頁的URL 到構(gòu)建完DOM 樹；從DOM 樹到構(gòu)建完WebKit 的繪圖上下文；從繪圖上下文到生成最終圖像。

瀏覽器渲染引擎主要包括HTML 解釋器、CSS 解釋器、布局和JavaScript（以下簡稱JS）解釋器。其中，HTML 解釋器主要作用是將HTML 文本解釋成DOM樹；CSS 解釋器作用是為DOM 中各元素對象計算出樣式信息；布局則是指在DOM 樹創(chuàng)建之后形成一個內(nèi)部表示模型，這個模型將HTML 元素與CSS 樣式結(jié)合起來，計算出元素的具體大小和位置等布局信息；JS 解釋器能夠解釋JS 代碼并通過DOM 接口和CSSOM 接口來修改網(wǎng)頁內(nèi)容和樣式信息，從而改變渲染的結(jié)果。隨著JS 解釋器越來越重要，JS 解釋器逐漸脫離出來成為獨立的JS 引擎。

2 構(gòu)建Web前端頁面響應時間模型

根據(jù)瀏覽器渲染過程，構(gòu)建Web 前端頁面響應時間模型如下：

其中T 表示W(wǎng)eb 前端頁面響應時間，Tweb表示網(wǎng)絡(luò)傳輸時間，TDOM表示構(gòu)建DOM 樹所需的時間，Tc表示從DOM 樹到構(gòu)建完WebKit 的繪圖上下文時間，Tp表示從繪圖上下文到生成最終圖像的時間。

由公式可知，Tweb為網(wǎng)絡(luò)傳輸時間，這個主要由網(wǎng)絡(luò)帶寬、數(shù)據(jù)傳輸量、用戶及網(wǎng)站服務器所使用網(wǎng)絡(luò)的軟硬件環(huán)境決定，開發(fā)者無法改變。因此要縮短Web前端頁面響應時間，進行前端頁面渲染優(yōu)化，開發(fā)者只能針對TDOM、Tc和Tp三個時間進行性能優(yōu)化。

3 Web前端網(wǎng)頁渲染優(yōu)化策略[2-4]

以S 養(yǎng)生館連鎖店網(wǎng)站為例，顧客就是上帝，網(wǎng)頁打開的速度直接影響到顧客的網(wǎng)絡(luò)體驗，Web 開發(fā)必須從用戶使用的角度出發(fā)。為了給用戶更好的體驗，通過對Web 前端頁面響應時間模型進行分析，明確了在網(wǎng)頁前端方面通過縮短TDOM、Tc和Tp三個時間可以優(yōu)化網(wǎng)頁加快網(wǎng)頁的打開速度，確定從HTML 代碼、CSS 樣式、JavaScript 腳本和框架應用4 個方面給出優(yōu)化策略。

3.1 HTML代碼優(yōu)化

首先，能使用靜態(tài)頁面的堅決不用動態(tài)頁面。例如S 養(yǎng)生館連鎖店網(wǎng)站部分頁面就具備內(nèi)容較多、有較多數(shù)據(jù)庫訪問、會被頻繁訪問但較少更新的特點，將其中包括首頁在內(nèi)的部分頁面設(shè)計成靜態(tài)網(wǎng)頁，然后定期更新，這可以減少每次訪問時瀏覽器渲染的時間。

其次，設(shè)計時盡量使用HTML5 新增的語義化標簽，例如