亚洲天堂最新网址,亚洲成人福利视频,在线视频国产偷拍

分享12點(diǎn)PC瀏覽器前端優(yōu)化策略——頁面渲染篇

原創(chuàng)|行業(yè)資訊|編輯：蔣永|2017-11-15 10:46:13.000|閱讀 590 次

概述：在網(wǎng)站開發(fā)中，前端的頁面渲染會(huì)直接影響到頁面的加載速度，所以這一方面的優(yōu)化非常重要。以下是我們總結(jié)的一些方法技巧。

上一篇文章我們講了網(wǎng)頁前端優(yōu)化網(wǎng)絡(luò)加載類的處理。今天，我們?cè)僦v一講頁面渲染類的一些前端優(yōu)化。（查看《分享17點(diǎn)PC瀏覽器前端優(yōu)化策略——網(wǎng)絡(luò)加載篇》）

在網(wǎng)站開發(fā)中，前端的頁面渲染會(huì)直接影響到頁面的加載速度，所以這一方面的優(yōu)化非常重要。以下是我們總結(jié)的一些方法技巧：

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

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

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

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

3．盡量預(yù)先設(shè)定圖片等大小

在加載大量的圖片元素時(shí)，盡量預(yù)先限定圖片的尺寸大小，否則在圖片加載過程中會(huì)更新圖片的排版信息，產(chǎn)生大量的重排

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

在 HTML 中直接縮放圖片會(huì)導(dǎo)致頁面內(nèi)容的重排重繪，此時(shí)可能會(huì)使頁面中的其他操作產(chǎn)生卡頓，因此要盡量減少在頁面中直接進(jìn)行圖片縮放。

5．減少 DOM 元素?cái)?shù)量和深度

HTML 中標(biāo)簽元素越多，標(biāo)簽的層級(jí)越深，瀏覽器解析 DOM 并繪制到瀏覽器中所花的時(shí)間就越長(zhǎng)，所以應(yīng)盡可能保持 DOM 元素簡(jiǎn)潔和層級(jí)較少。

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

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

7．減少使用關(guān)系型樣式表的寫法

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

8．盡量減少使用 JS 動(dòng)畫

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

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

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

10．盡量避免使用 table、iframe

table內(nèi)容的渲染是將 table 的 DOM 渲染樹全部生成完并一次性繪制到頁面上的，所以在長(zhǎng)表格渲染時(shí)很耗性能，應(yīng)該盡量避免使用它，可以考慮使用列表元素 ul 代替。盡量使用異步的方式動(dòng)態(tài)添加 iframe，因?yàn)?iframe 內(nèi)資源的下載進(jìn)程會(huì)阻塞父頁面靜態(tài)資源的下載與 CSS 及 HTML DOM 的解析。