PC網站開發中瀏覽器前端優化策略（二）

來源：m.bqtao.cn ?? ?? 發布時間：2017-11-14

上一篇文章我們講了網頁前端優化網絡加載類的處理。今天，我們再講一講頁面渲染類的一些前端優化。

在網站開發中，前端的頁面渲染會直接影響到頁面的加載速度，所以這一方面的優化非常重要。以下是我們總結的一些方法技巧：

1．把 CSS 資源引用放到 HTML 文件頂部

一般推薦將所有 CSS 資源盡早指定在 HTML 文檔 <head>中，這樣瀏覽器可以優先下載 CSS 并盡早完成頁面渲染。

2．JavaScript 資源引用放到 HTML 文件底部

JavaScript 資源放到 HTML 文檔底部可以防止 JavaScript 的加載和解析執行對頁面渲染造成阻塞。由于 JavaScript 資源默認是解析阻塞的，除非被標記為異步或者通過其他的異步方式加載，否則會阻塞 HTML DOM 解析和 CSS 渲染的過程。

3．盡量預先設定圖片等大小

在加載大量的圖片元素時，盡量預先限定圖片的尺寸大小，否則在圖片加載過程中會更新圖片的排版信息，產生大量的重排

4．不要在 HTML 中直接縮放圖片

在 HTML 中直接縮放圖片會導致頁面內容的重排重繪，此時可能會使頁面中的其他操作產生卡頓，因此要盡量減少在頁面中直接進行圖片縮放。

5．減少 DOM 元素數量和深度

HTML 中標簽元素越多，標簽的層級越深，瀏覽器解析 DOM 并繪制到瀏覽器中所花的時間就越長，所以應盡可能保持 DOM 元素簡潔和層級較少。

6．盡量避免在選擇器末尾添加通配符

CSS 解析匹配到渲染樹的過程是從右到左的逆向匹配，在選擇器末尾添加通配符至少會增加一倍多計算量。

7．減少使用關系型樣式表的寫法

直接使用唯一的類名即可最大限度的提升渲染引擎繪制渲染樹等效率

8．盡量減少使用 JS 動畫

JS 直接操作 DOM 極容易引起頁面的重排

9．CSS 動畫使用 translate、scale 代替 top、height

盡量使用 CSS3 的 translate、scale 屬性代替 top、left 和 height、width，避免大量的重排計算

10．盡量避免使用 <table>、 <iframe>

<table> 內容的渲染是將 table 的 DOM 渲染樹全部生成完并一次性繪制到頁面上的，所以在長表格渲染時很耗性能，應該盡量避免使用它，可以考慮使用列表元素 <ul> 代替。盡量使用異步的方式動態添加 iframe，因為 iframe 內資源的下載進程會阻塞父頁面靜態資源的下載與 CSS 及 HTML DOM 的解析。

11．避免運行耗時的 JavaScript

長時間運行的 JavaScript 會阻塞瀏覽器構建 DOM 樹、DOM 渲染樹、渲染頁面。所以，任何與頁面初次渲染無關的邏輯功能都應該延遲加載執行，這和 JavaScript 資源的異步加載思路是一致的。

12．避免使用 CSS 表達式或 CSS 濾鏡

CSS 表達式或 CSS 濾鏡的解析渲染速度是比較慢的，在有其他解決方案的情況下應該盡量避免使用。