在一篇文章中，我們介紹了性能優(yōu)化的重要性，總結(jié)了JS的幾種JS優(yōu)化方法和方法。今天，我們將從CSS的角度來討論前端優(yōu)化

在性能優(yōu)化中，有一個重要的指標(biāo)-一個有意義的繪制（FMP），它指的是頁面的主要內(nèi)容出現(xiàn)在屏幕上的時間。這個指標(biāo)影響用戶在看到頁面之前需要等待的時間，這可以通過內(nèi)聯(lián)關(guān)鍵CSS來減少

減小文件大小，壓縮代碼，使用代碼壓縮工具壓縮代碼，刪除多余的空格和換行符以及其他冗余部分

CSS異步加載要立即使用的文件，并將它們加載到頁眉中。其他模塊的CSS可以在頁面呈現(xiàn)后通過loadcss和preload異步加載

DNS預(yù)取預(yù)解析將DNS預(yù)取屬性添加到頁面，以通知瀏覽器預(yù)解析指定的域名。經(jīng)過預(yù)解析后，用戶訪問相應(yīng)域名不會有任何延遲，從而加快了加載速度

硬件加速通過GPU渲染使動畫更加平滑。過程說明：-小心使用硬件加速。雖然改進(jìn)是顯而易見的，但它也對內(nèi)存產(chǎn)生了巨大的影響——GPU渲染會影響字體的抗鋸齒效果，并且文本會變得模糊

動畫效果要優(yōu)先使用變換，優(yōu)先選擇變換，盡量不要使用高、寬、邊、填充，因為與其他屬性相比，變換可以直接減少主線的計算量

圖像壓縮圖像延遲加載，因為頁面可以同時發(fā)送到后臺的請求數(shù)量有限制（通常，瀏覽器有4到8個請求，ie67有2個請求）。因此，如果頁面上有許多資源需要請求，頁面加載時間將變得非常長。該資源可以根據(jù)資源的活動位置實時加載

在加載圖像預(yù)加載頁面時，首先加載部分內(nèi)容（通常是一個屏幕內(nèi)容），然后在加載先加載的部分內(nèi)容（通常是一個屏幕內(nèi)容）之后再加載其他內(nèi)容

當(dāng)重畫元素的外觀發(fā)生變化時，避免頁面重繪。在網(wǎng)站的使用中，重繪是不可避免的。但是，瀏覽器通過將多個重新排列和重畫合并到一個執(zhí)行中來優(yōu)化這一點。雖然瀏覽器已經(jīng)做了相應(yīng)的優(yōu)化，但要盡量避免重畫，可以使頁面更加流暢

減少一些屬性的使用。當(dāng)瀏覽器繪制屏幕時，所有需要瀏覽器操作或計算的屬性都將花費更多。重新繪制頁面時，會降低瀏覽器的渲染性能。因此，在編寫CSS時，如果有替代方案，應(yīng)該盡量減少box shadow/border radius/filter/transparency/：nth child等屬性的使用，這樣當(dāng)瀏覽器繪制或重畫時，瀏覽器會有更好的渲染效果

減少重新排列會導(dǎo)致瀏覽器重新計算整個文檔并重建渲染樹，這會降低瀏覽器的渲染速度。如下所示，有很多操作會觸發(fā)重新排序，我們應(yīng)該避免頻繁觸發(fā)它們

觸發(fā)重新排列的屬性：寬度、高度、填充、邊距、顯示、邊框?qū)挾?、位置上、左、右、下、字體大小、浮動、文本對齊flow-y、字體粗細(xì)、溢出、字體系列高度、垂直對齊、清除、空白、小高度

注意使用特殊的CSS樣式。將樣式表放在頁面頂部以刪除多余和無用的CSS?？梢越y(tǒng)一設(shè)置重復(fù)樣式，以避免重復(fù)設(shè)置CSS屬性，這些屬性可以在引用中統(tǒng)一設(shè)置

正確使用display屬性顯示：行內(nèi)寬度，高度、邊距、填充和浮動不得在之后使用；

顯示：內(nèi)聯(lián)塊浮點不應(yīng)在之后使用；

顯示：塊垂直align之后不應(yīng)使用；

顯示：表格-*保證金或浮動不應(yīng)在之后使用

小心使用浮動，避免使用復(fù)雜的選擇器。使用不超過三個層次結(jié)構(gòu)。通過CSS繼承屬性來減少代碼量?？梢詮母冈乩^承到子元素的屬性（如顏色、字體大小等）不需要重復(fù)設(shè)置

選擇器的使用-保持簡單，不要使用太嵌套和太復(fù)雜的選擇器。

-避免了選擇器和通配符的有效和有效的使用。

-不要使用類選擇器和ID選擇器來裝飾元素標(biāo)記，例如H3?降價內(nèi)容。如果你這樣做，你也會降低效率。

服務(wù)器壓縮使用工具規(guī)范CSS代碼編寫規(guī)范精心選擇高消耗樣式，高消耗屬性在渲染前需要大量計算：框陰影、邊界半徑、透明度變換、cssfilter（性能殺手）