PC網站(zhàn)開(kāi)發中浏覽器(qì)前端優化(huà)策略（二）•÷±

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

上(shàng)一(yī)篇文(wén)章(zhāng)我↕≤σ÷們講了(le)網頁前端優化(huà)網絡加載類的(de)處理(lǐ)。÷≥今天，我們再講一(yī)講頁面渲染類的(de)一(y₩★>♠ī)些(xiē)前端優化(huà)。

在網站(zhàn)開(kāi)發中，前✘' 端的(de)頁面渲染會(huì)直接影(yǐng)響到(dàλ‍λ≠o)頁面的(de)加載速度，所以這(zhè)♦ 一(yī)方面的(de)優化(huà)非常重要(yào)。以下→&(xià)是(shì)我們總結的(de)一(yī)些(xiē)方法技(jì)巧φ>♦：

1．把 CSS 資源引用(yòng)放(fà÷ ng)到(dào) HTML 文(wén)件₽≠(jiàn)頂部

一(yī)般推薦将所有(yǒu) CSS 資σ™‌¶源盡早指定在 HTML 文(wén)檔 <head>中，這(z∞↔‍♦hè)樣浏覽器(qì)可(kě)以優先下(xià)載§ © CSS 并盡早完成頁面渲染。

2．JavaScript 資源引用(yòng)放(fàng)到(dào) H•∑✘TML 文(wén)件(jiàn)底部

JavaScript 資源放(fàng)€∑到(dào) HTML 文(wén)檔底部可("↑₹kě)以防止 JavaScript 的(de)加載和(hé)解析執行(δ €xíng)對(duì)頁面渲染造成阻塞。由于 JavaScript 資源默✔‌認是(shì)解析阻塞的(de)，除非被标記為(wèi≠πδ€)異步或者通(tōng)過其他(tā)的♦₩(de)異步方式加載，否則會(huì)阻塞 HTML DOM< 解析和(hé) CSS 渲染的(de)過程。

3．盡量預先設定圖片等大(dà)小(xiǎo)∞¶₹§

在加載大(dà)量的(de)圖片元素時(shí♣δε)，盡量預先限定圖片的(de)尺寸大(dà)小(xiǎo)♣•★↑，否則在圖片加載過程中會(huì)更新圖片的(de)排版信息，産生(shē•™ng)大(dà)量的(de)重排

4．不(bù)要(yào)在 HTML™≥↔ 中直接縮放(fàng)圖片

在 HTML 中直接縮放(fàng)圖片會(®σ↔©huì)導緻頁面內(nèi)容的(de)重排重繪，此時(shí)可(kě)能β☆ (néng)會(huì)使頁面中的(de)其他(tā)操作Ω&(zuò)産生(shēng)卡頓，因此要(yào)盡量減少(s§< hǎo)在頁面中直接進行(xíng)圖片縮放(fàng)。

5．減少(shǎo) DOM 元素數(shγ₩ù)量和(hé)深度

HTML 中标簽元素越多(duō)，标簽的(de)層級越←→深，浏覽器(qì)解析 DOM 并繪制(zhì)到(dào)π♥浏覽器(qì)中所花(huā)的(de)時(shí)間(jiān) Ω 就(jiù)越長(cháng)，所以應盡可(kě)能(n♣♣↕&éng)保持 DOM 元素簡潔和(hé)層級較少(sh×♦♥ǎo)。

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

CSS 解析匹配到(dào) 渲染樹(shù)的(de)過程>©‍是(shì)從(cóng)右到(dào)左的♣™↓(de)逆向匹配，在選擇器(qì)末尾添加通(tōng)配符至少✘"<★(shǎo)會(huì)增加一(yī)倍多(duō)計(jì)算(suàn)•♥•↕量。

7．減少(shǎo)使用(yòng)關系∑♥©型樣式表的(de)寫法

直接使用(yòng)唯一(yī)的(de)類名即®α可(kě)最大(dà)限度的(de)提升渲染引擎←≥♠繪制(zhì)渲染樹(shù)等效率

8．盡量減少(shǎo)使用(yòng) JS 動畫(‌¥γ™huà)

JS 直接操作(zuò) DOM 極容易引起頁面的(d""$e)重排

9．CSS 動畫(huà)使用(yòng) translate、scal♠>✘e 代替 top、height

盡量使用(yòng) CSS3 的(de) transl≤£≠φate、scale 屬性代替 top、left↕‌₽♥ 和(hé) height、width，避免大(dà)量的γ✘(de)重排計(jì)算(suàn)

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

<table> 內(nèi)容的(de)渲染是(π↑shì)将 table 的(de) DOM 渲染樹(☆↔≠shù)全部生(shēng)成完并一(yī‍∏)次性繪制(zhì)到(dào)頁面上(shàng✔✘♠≥)的(de)，所以在長(cháng)表格渲染時(shí)很(hěn)耗↑'性能(néng)，應該盡量避免使用(yòng)它，可(kě)以考慮使用(y→♣òng)列表元素 <ul> 代替。盡量使用(yòβ↑ng)異步的(de)方式動态添加 iframe，因為$♣™↕(wèi) iframe 內(nèi)資源的(d±δ→☆e)下(xià)載進程會(huì)阻塞父頁面靜(jìng)态資源的(de)下☆§(xià)載與 CSS 及 HTML DOM 的(de)解析。

11．避免運行(xíng)耗時(shí)的(de) JavaScript$αλ

長(cháng)時(shí)間(jiān)運行(¶♠₹γxíng)的(de) JavaScript 會(huì)≈ε₽阻塞浏覽器(qì)構建 DOM 樹(shù)、DOM 渲染樹(shù)、‍$渲染頁面。所以，任何與頁面初次渲染無關的(de)邏輯功能(néng)都↕®(dōu)應該延遲加載執行(xíng)，這(↑β§∏zhè)和(hé) JavaScript 資源的(d¥∑‍e)異步加載思路(lù)是(shì)一(yī)緻的(↑•de)。

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

CSS 表達式或 CSS 濾鏡的(de)解析渲染速度是(shì)比©&₹™較慢(màn)的(de)，在有(yǒu)其他(×←✔tā)解決方案的(de)情況下(xià)應該盡量避αγ免使用(yòng)。

上(shàng)一(yī)篇：PC網站(zhàn)開(kāi)發中浏覽器(qì)前端優化(hu&¥à)策略
下(xià)一(yī)篇：網站(zhàn)開(kāi)發用(yòng ×® )什(shén)麽語言最好(hǎo)