前端性能優(yōu)化從css說起

shiyang6017 發(fā)布于2019-08-23 14:31 / 1700人閱讀

摘要：放在中減少引起和接下來我們?cè)賮碛懻撘幌聢D片與雪碧圖或精靈，在網(wǎng)頁中我們會(huì)用到很多圖標(biāo)，如果每一個(gè)圖標(biāo)是多帶帶的一張圖片，那網(wǎng)頁加載的時(shí)候，就會(huì)有多個(gè)請(qǐng)求去請(qǐng)求圖片，顯而易見會(huì)影響網(wǎng)頁性能，所以要采取方法對(duì)網(wǎng)頁中圖標(biāo)使用進(jìn)行優(yōu)化處理。

???????我們都知道性能對(duì)于一個(gè)網(wǎng)站來說相當(dāng)重要，以至于很多公司都會(huì)專門招聘人員優(yōu)化網(wǎng)站性能，網(wǎng)上關(guān)于探討網(wǎng)站性能優(yōu)化的文章也非常多。性能是什么呢？簡(jiǎn)單來說，就是用戶打開網(wǎng)站到網(wǎng)頁完全呈現(xiàn)在用戶面前所耗費(fèi)的時(shí)間，研究表明：用戶最滿意的打開網(wǎng)頁時(shí)間是2-5秒，如果等待超過10秒，99%的用戶會(huì)關(guān)閉這個(gè)網(wǎng)頁。
???????影響網(wǎng)站的性能有多重因素，我們就著重從前端方面來進(jìn)行探討，首先我們先了解一下網(wǎng)頁的解析過程。

主要過程有：1.解析HTML構(gòu)建DOM樹；2.解析css構(gòu)建CSSOM樹；3.根據(jù)DOM樹和CSSOM來構(gòu)造 Rendering Tree（渲染樹）；4.Layout頁面位置計(jì)算布局； 5.Paint繪制；css的加載不會(huì)阻塞DOM樹的解析，但是會(huì)阻塞DOM樹的渲染和后面js語句的執(zhí)行，所以說才有了優(yōu)化css的必要性，針對(duì)這一問題，我們可以從以下方面進(jìn)行考慮優(yōu)化。

1.結(jié)合構(gòu)建工具（webpack,gulp...），對(duì)css文件進(jìn)行打包壓縮，抽離公共樣式，刪除多余的樣式、空格、注釋。
2.減少樣式選擇器的層級(jí)，減少樣式匹配時(shí)間。        
3.盡量使用class選擇器，增強(qiáng)樣式的復(fù)用；

???????css中還有兩個(gè)重要的知識(shí)點(diǎn)repaint(重繪)和reflow(回流)，repaint主要是針對(duì)某一個(gè)DOM元素進(jìn)行的重繪，reflow則是回流，針對(duì)整個(gè)頁面的重排，我們都知道這兩個(gè)特性都會(huì)消耗網(wǎng)頁性能，他們的觸發(fā)場(chǎng)景也是不同的。不涉及任何DOM元素排版問題的變動(dòng)為repaint，例如元素的color/text-align/text-decoration等等屬性的變動(dòng)，除上面所提到的DOM元素style修改基本為reflow，例如元素的任何涉及長(zhǎng)、寬、行高、邊框、display等style的修改。很多時(shí)候我們是無法避免引起repaint和reflow，但是我們還是要盡量通過各種方法來減少引起這兩個(gè)特性,我們可以從以下方面進(jìn)行考慮優(yōu)化。

1.盡可能在DOM末梢通過改變class來修改元素的style屬性：盡可能的減少受影響的DOM元素。
2.避免設(shè)置多項(xiàng)內(nèi)聯(lián)樣式：使用常用的class的方式進(jìn)行設(shè)置樣式，以避免設(shè)置樣式時(shí)訪問DOM的低效率。
3.設(shè)置動(dòng)畫元素position屬性為fixed或者absolute：由于當(dāng)前元素從DOM流中獨(dú)立出來，因此受影響的只有當(dāng)前元素，元素repaint。
4.犧牲平滑度滿足性能：動(dòng)畫精度太強(qiáng)，會(huì)造成更多次的repaint/reflow，犧牲精度，能滿足性能的損耗，獲取性能和平滑度的平衡。
5.避免使用table進(jìn)行布局：table的每個(gè)元素的大小以及內(nèi)容的改動(dòng)，都會(huì)導(dǎo)致整個(gè)table進(jìn)行重新計(jì)算，造成大幅度的repaint或者reflow。改用div則可以進(jìn)行針對(duì)性的repaint和避免不必要的reflow。
6.避免在CSS中使用運(yùn)算式：expression、calc、等等，可能會(huì)造成多次repaint和reflow。
7.css放在head中,減少引起repaint和reflow;

???????接下來我們?cè)賮碛懻撘幌耣ase64圖片與CssSprites（雪碧圖或css精靈），在網(wǎng)頁中我們會(huì)用到很多圖標(biāo)，如果每一個(gè)圖標(biāo)是多帶帶的一張圖片，那網(wǎng)頁加載的時(shí)候，就會(huì)有多個(gè)請(qǐng)求去請(qǐng)求圖片，顯而易見會(huì)影響網(wǎng)頁性能，所以要采取方法對(duì)網(wǎng)頁中圖標(biāo)使用進(jìn)行優(yōu)化處理。
???????Css Sprites（雪碧圖）：將許多的小圖片整合到一張大圖片中，利用css中的background-image屬性，background-position屬性定位某個(gè)圖片位置，來達(dá)到在大圖片中引用某個(gè)部位的小圖片的效果。優(yōu)點(diǎn)：減少網(wǎng)頁的http請(qǐng)求，提升網(wǎng)頁加載速度；合并多張小圖片，減少資源體積。缺點(diǎn)：前期需要處理圖片，增加工程量；不利于改動(dòng)和維護(hù)。
???????base64編碼：base64是網(wǎng)絡(luò)上最常見的用于傳輸8Bit字節(jié)代碼的編碼方式之一，要求把每三個(gè)8Bit的字節(jié)轉(zhuǎn)換為四個(gè)6Bit的字節(jié)，Base64是網(wǎng)絡(luò)上最常見的用于傳輸8Bit字節(jié)代碼的編碼方式之一，通俗點(diǎn)來講就是將資源原本二進(jìn)制形式轉(zhuǎn)成以64個(gè)字符基本單位，所組成的一串字符串。優(yōu)點(diǎn)：減少http請(qǐng)求；圖片可以避免跨域問題。缺點(diǎn)：低版本IE不兼容；過多使用base64圖片會(huì)使得css過大，不利于css加載和解析；
???????在網(wǎng)頁開發(fā)中我們經(jīng)常會(huì)在引入圖片，也會(huì)使用到上面兩種方法來優(yōu)化處理網(wǎng)頁，他們有各自不同的使用場(chǎng)景。Css Sprites 主要針對(duì)一些不需要經(jīng)常變動(dòng)的小圖片，如表情，標(biāo)志等，base64主要適用于小于幾k的圖片，圖片太大的話反而得不償失。
???????洋洋灑灑寫了一些關(guān)于css優(yōu)化的東西，當(dāng)然也汲取了前輩們的智慧，算是總結(jié)一下吧，我相信關(guān)于css的優(yōu)化知識(shí)還有很多，不斷學(xué)習(xí)吧！！