PC網站開發中浏覽器前端優化(huà)策略（二）

來(lái)源：lexintech.com 發布時(shí)間：2017-11-14

上一篇文章(zhāng)我們講了(le)網頁前端優化(huà)網絡加載類的(de)處理(lǐ)。今天，我們再講一講頁面渲染類的(de)一些前端優化(huà)。

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

1．把 CSS 資源引用(yòng)放到 HTML 文件頂部

一般推薦将所有 CSS 資源盡早指定在 HTML 文檔 <head>中，這(zhè)樣浏覽器可(kě)以優先下(xià)載 CSS 并盡早完成頁面渲染。

2．JavaScript 資源引用(yòng)放到 HTML 文件底部

JavaScript 資源放到 HTML 文檔底部可(kě)以防止 JavaScript 的(de)加載和(hé)解析執行對(duì)頁面渲染造成阻塞。由于 JavaScript 資源默認是解析阻塞的(de)，除非被标記爲異步或者通(tōng)過其他(tā)的(de)異步方式加載，否則會阻塞 HTML DOM 解析和(hé) CSS 渲染的(de)過程。

3．盡量預先設定圖片等大(dà)小

在加載大(dà)量的(de)圖片元素時(shí)，盡量預先限定圖片的(de)尺寸大(dà)小，否則在圖片加載過程中會更新圖片的(de)排版信息，産生大(dà)量的(de)重排

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

在 HTML 中直接縮放圖片會導緻頁面内容的(de)重排重繪，此時(shí)可(kě)能會使頁面中的(de)其他(tā)操作産生卡頓，因此要盡量減少在頁面中直接進行圖片縮放。

5．減少 DOM 元素數量和(hé)深度

HTML 中标簽元素越多(duō)，标簽的(de)層級越深，浏覽器解析 DOM 并繪制到浏覽器中所花的(de)時(shí)間就越長(cháng)，所以應盡可(kě)能保持 DOM 元素簡潔和(hé)層級較少。

6．盡量避免在選擇器末尾添加通(tōng)配符

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

7．減少使用(yòng)關系型樣式表的(de)寫法

直接使用(yòng)唯一的(de)類名即可(kě)最大(dà)限度的(de)提升渲染引擎繪制渲染樹等效率

8．盡量減少使用(yòng) JS 動畫(huà)

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

9．CSS 動畫(huà)使用(yòng) translate、scale 代替 top、height

盡量使用(yòng) CSS3 的(de) translate、scale 屬性代替 top、left 和(hé) height、width，避免大(dà)量的(de)重排計算(suàn)

10．盡量避免使用(yòng) <table>、 <iframe>

<table> 内容的(de)渲染是将 table 的(de) DOM 渲染樹全部生成完并一次性繪制到頁面上的(de)，所以在長(cháng)表格渲染時(shí)很耗性能，應該盡量避免使用(yòng)它，可(kě)以考慮使用(yòng)列表元素 <ul> 代替。盡量使用(yòng)異步的(de)方式動态添加 iframe，因爲 iframe 内資源的(de)下(xià)載進程會阻塞父頁面靜态資源的(de)下(xià)載與 CSS 及 HTML DOM 的(de)解析。

11．避免運行耗時(shí)的(de) JavaScript

長(cháng)時(shí)間運行的(de) JavaScript 會阻塞浏覽器構建 DOM 樹、DOM 渲染樹、渲染頁面。所以，任何與頁面初次渲染無關的(de)邏輯功能都應該延遲加載執行，這(zhè)和(hé) JavaScript 資源的(de)異步加載思路是一緻的(de)。

12．避免使用(yòng) CSS 表達式或 CSS 濾鏡

CSS 表達式或 CSS 濾鏡的(de)解析渲染速度是比較慢(màn)的(de)，在有其他(tā)解決方案的(de)情況下(xià)應該盡量避免使用(yòng)。

上一篇：PC網站開發中浏覽器前端優化(huà)策略
下(xià)一篇：網站開發用(yòng)什(shén)麽語言最好