Web 前端網頁渲染優化研究

肖建芳

（汕頭職業技術學院計算機系，汕頭515041）

0 引言

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

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

1 網頁渲染的基本過程[1]

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

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

2 構建Web前端頁面響應時間模型

根據瀏覽器渲染過程，構建Web 前端頁面響應時間模型如下：

其中T 表示Web 前端頁面響應時間，Tweb表示網絡傳輸時間，TDOM表示構建DOM 樹所需的時間，Tc表示從DOM 樹到構建完WebKit 的繪圖上下文時間，Tp表示從繪圖上下文到生成最終圖像的時間。

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

3 Web前端網頁渲染優化策略[2-4]

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

3.1 HTML代碼優化

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

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