在一篇文章中，我們介紹了性能優(yōu)化的重要性，總結(jié)了JS的幾種JS優(yōu)化方法和方法。今天，我們將從CSS的角度來(lái)討論前端優(yōu)化
在性能優(yōu)化中，有一個(gè)重要的指標(biāo)-一個(gè)有意義的繪制（FMP），它指的是頁(yè)面的主要內(nèi)容出現(xiàn)在屏幕上的時(shí)間。這個(gè)指標(biāo)影響用戶在看到頁(yè)面之前需要等待的時(shí)間，這可以通過(guò)內(nèi)聯(lián)關(guān)鍵CSS來(lái)減少
減小文件大小，壓縮代碼，使用代碼壓縮工具壓縮代碼，刪除多余的空格和換行符以及其他冗余部分
CSS異步加載要立即使用的文件，并將它們加載到頁(yè)眉中。其他模塊的CSS可以在頁(yè)面呈現(xiàn)后通過(guò)loadcss和preload異步加載
DNS預(yù)取預(yù)解析將DNS預(yù)取屬性添加到頁(yè)面，以通知瀏覽器預(yù)解析指定的域名。經(jīng)過(guò)預(yù)解析后，用戶訪問(wèn)相應(yīng)域名不會(huì)有任何延遲，從而加快了加載速度
硬件加速通過(guò)GPU渲染使動(dòng)畫(huà)更加平滑。過(guò)程說(shuō)明：-小心使用硬件加速。雖然改進(jìn)是顯而易見(jiàn)的，但它也對(duì)內(nèi)存產(chǎn)生了巨大的影響——GPU渲染會(huì)影響字體的抗鋸齒效果，并且文本會(huì)變得模糊
動(dòng)畫(huà)效果要優(yōu)先使用變換，優(yōu)先選擇變換，盡量不要使用高、寬、邊、填充，因?yàn)榕c其他屬性相比，變換可以直接減少主線的計(jì)算量
圖像壓縮圖像延遲加載，因?yàn)轫?yè)面可以同時(shí)發(fā)送到后臺(tái)的請(qǐng)求數(shù)量有限制（通常，瀏覽器有4到8個(gè)請(qǐng)求，ie67有2個(gè)請(qǐng)求）。因此，如果頁(yè)面上有許多資源需要請(qǐng)求，頁(yè)面加載時(shí)間將變得非常長(zhǎng)。該資源可以根據(jù)資源的活動(dòng)位置實(shí)時(shí)加載
在加載圖像預(yù)加載頁(yè)面時(shí)，首先加載部分內(nèi)容（通常是一個(gè)屏幕內(nèi)容），然后在加載先加載的部分內(nèi)容（通常是一個(gè)屏幕內(nèi)容）之后再加載其他內(nèi)容
當(dāng)重畫(huà)元素的外觀發(fā)生變化時(shí)，避免頁(yè)面重繪。在網(wǎng)站的使用中，重繪是不可避免的。但是，瀏覽器通過(guò)將多個(gè)重新排列和重畫(huà)合并到一個(gè)執(zhí)行中來(lái)優(yōu)化這一點(diǎn)。雖然瀏覽器已經(jīng)做了相應(yīng)的優(yōu)化，但要盡量避免重畫(huà)，可以使頁(yè)面更加流暢
減少一些屬性的使用。當(dāng)瀏覽器繪制屏幕時(shí)，所有需要瀏覽器操作或計(jì)算的屬性都將花費(fèi)更多。重新繪制頁(yè)面時(shí)，會(huì)降低瀏覽器的渲染性能。因此，在編寫(xiě)CSS時(shí)，如果有替代方案，應(yīng)該盡量減少box shadow/border radius/filter/transparency/：nth child等屬性的使用，這樣當(dāng)瀏覽器繪制或重畫(huà)時(shí)，瀏覽器會(huì)有更好的渲染效果
減少重新排列會(huì)導(dǎo)致瀏覽器重新計(jì)算整個(gè)文檔并重建渲染樹(shù)，這會(huì)降低瀏覽器的渲染速度。如下所示，有很多操作會(huì)觸發(fā)重新排序，我們應(yīng)該避免頻繁觸發(fā)它們
觸發(fā)重新排列的屬性：寬度、高度、填充、邊距、顯示、邊框?qū)挾取⑽恢蒙稀⒆蟆⒂摇⑾隆⒆煮w大小、浮動(dòng)、文本對(duì)齊flow-y、字體粗細(xì)、溢出、字體系列高度、垂直對(duì)齊、清除、空白、小高度
注意使用特殊的CSS樣式。將樣式表放在頁(yè)面頂部以刪除多余和無(wú)用的CSS。可以統(tǒng)一設(shè)置重復(fù)樣式，以避免重復(fù)設(shè)置CSS屬性，這些屬性可以在引用中統(tǒng)一設(shè)置
正確使用display屬性顯示：行內(nèi)寬度，高度、邊距、填充和浮動(dòng)不得在之后使用；
顯示：內(nèi)聯(lián)塊浮點(diǎn)不應(yīng)在之后使用；
顯示：塊垂直align之后不應(yīng)使用；
顯示：表格-*保證金或浮動(dòng)不應(yīng)在之后使用
小心使用浮動(dòng)，避免使用復(fù)雜的選擇器。使用不超過(guò)三個(gè)層次結(jié)構(gòu)。通過(guò)CSS繼承屬性來(lái)減少代碼量。可以從父元素繼承到子元素的屬性（如顏色、字體大小等）不需要重復(fù)設(shè)置
選擇器的使用-保持簡(jiǎn)單，不要使用太嵌套和太復(fù)雜的選擇器。
-避免了選擇器和通配符的有效和有效的使用。
-不要使用類選擇器和ID選擇器來(lái)裝飾元素標(biāo)記，例如H3?降價(jià)內(nèi)容。如果你這樣做，你也會(huì)降低效率。
服務(wù)器壓縮使用工具規(guī)范CSS代碼編寫(xiě)規(guī)范精心選擇高消耗樣式，高消耗屬性在渲染前需要大量計(jì)算：框陰影、邊界半徑、透明度變換、cssfilter（性能殺手）