建站
咨詢
售后
建站咨詢
新聞中心
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：申請(qǐng)域名、雅安服務(wù)器托管、營(yíng)銷軟件、網(wǎng)站建設(shè)、固原網(wǎng)站維護(hù)、網(wǎng)站推廣。
即使在2021年，網(wǎng)絡(luò)性能仍然是一個(gè)問題。根據(jù)http Archive，平均每個(gè)頁面需要2MB的下載，發(fā)出60多個(gè)HTTP請(qǐng)求，在移動(dòng)設(shè)備上完全加載可能需要18秒。樣式表占60 kB，分為七個(gè)請(qǐng)求，因此在試圖解決性能問題時(shí)，它很少是最優(yōu)先考慮的。
然而，CSS確實(shí)有影響，不管它看起來多么輕微。一旦解決了JavaScript問題，學(xué)習(xí)正確優(yōu)化CSS應(yīng)該是下一個(gè)重點(diǎn)。
CSS如何影響頁面性能
CSS看起來是無辜的，但可能需要一些繁重的處理。
CSS渲染阻塞
當(dāng)瀏覽器遇到標(biāo)記時(shí)，它會(huì)在獲取和解析CSS文件時(shí)停止其他瀏覽器下載和處理。
JavaScript也可以阻止瀏覽器渲染，但異步處理可以通過以下方式實(shí)現(xiàn)：
諸如圖像之類的資源通常需要更多帶寬，但可以使用有效的格式，并且可以延遲加載（loading="lazy"屬性），而不阻止瀏覽器渲染。
所有這些都不可能用CSS實(shí)現(xiàn)。文件被緩存，因此后續(xù)頁面加載應(yīng)該更快，但渲染阻塞過程仍然存在。
大型CSS文件處理耗時(shí)
樣式表越大，下載和處理CSS對(duì)象模型（CSSOM）所需的時(shí)間就越長(zhǎng)，瀏覽器和JavaScript API可以使用該模型顯示頁面。盡管CSS樣式表比大多數(shù)其他網(wǎng)站文件都小，但它們也不能免于“越小越好”的經(jīng)驗(yàn)法則。
CSS文件增長(zhǎng)
識(shí)別不再使用的樣式可能很困難，刪除錯(cuò)誤的樣式可能會(huì)對(duì)站點(diǎn)造成嚴(yán)重破壞。開發(fā)人員通常選擇最安全的“保留一切”方法。不再使用的頁面樣式、組件和小部件仍然存在于CSS中。結(jié)果如何？文件大小、復(fù)雜性和維護(hù)工作量呈指數(shù)級(jí)增長(zhǎng)，使得開發(fā)人員刪除冗余代碼的可能性越來越小。
樣式表可以引入其他資源
CSS可以使用@import規(guī)則引用其他樣式表。這些導(dǎo)入阻止當(dāng)前樣式表的處理，并串聯(lián)進(jìn)一步加載 CSS 文件。
其他資產(chǎn)，如字體和圖像，也可以參考。瀏覽器將嘗試優(yōu)化下載，但當(dāng)有疑問時(shí)，它會(huì)立即獲取它們。內(nèi)襯基座 64 編碼文件仍需進(jìn)一步處理。
CSS可以使用@import規(guī)則引用其他樣式表。這些導(dǎo)入會(huì)阻止當(dāng)前樣式表的處理，并以串行方式加載更多CSS文件。
也可以引用其他資源，例如字體和圖像。瀏覽器將嘗試優(yōu)化下載，但如果有疑問，它將立即獲取下載。內(nèi)聯(lián)base64編碼文件需要進(jìn)一步處理。
CSS效果渲染
瀏覽器有三個(gè)渲染階段：
- 布局layout（或回流reflow）階段計(jì)算每個(gè)元素的尺寸，以及它如何影響周圍元素的大小或位置。
- 繪制paint階段將每個(gè)元素的可視部分繪制到單獨(dú)的層上：文本、顏色、圖像、邊框、陰影等。
- 渲染層合成（composite draws）根據(jù)堆疊上下文、位置、z-indexes等，以正確的順序?qū)⒚總€(gè)層繪制到頁面上。
如果不小心，CSS屬性更改和動(dòng)畫可能會(huì)導(dǎo)致所有三個(gè)階段重新渲染。某些特性（如陰影和漸變）在計(jì)算上也比塊顏色和邊距更昂貴。
CSS性能分析工具
承認(rèn)您有CSS性能問題是恢復(fù)的第一步！找到并解決原因是另一回事。
以下工具和服務(wù)（不按任何順序排列）可以幫助您識(shí)別代碼中的樣式瓶頸。
1. 開發(fā)人員工具網(wǎng)絡(luò)面板
Web性能專家花大量時(shí)間在開發(fā)工具上，尤其是在網(wǎng)絡(luò)面板上。DevTools是大多數(shù)現(xiàn)代瀏覽器的原生版本，不過我們將在示例中使用Google Chrome。
DevTools可以從瀏覽器菜單打開，通常是在“更多工具”>“開發(fā)人員工具”中，或者通過鍵盤快捷鍵Ctrl | Cmd+Shift+I或F12打開。
切換到“網(wǎng)絡(luò)”選項(xiàng)卡，并確保選中“禁用緩存”，以防止緩存文件影響報(bào)告。您還可以更改限制選項(xiàng)以模擬較慢的移動(dòng)網(wǎng)絡(luò)。
刷新頁面以查看下載和處理瀑布圖：
DevTools網(wǎng)絡(luò)面板
任何耗時(shí)較長(zhǎng)的加載進(jìn)度條都值得關(guān)注，但您應(yīng)該特別關(guān)注堵塞/停滯加載進(jìn)度條（顯示為白色）。在本例中，高亮顯示的行和所有后續(xù)行都無法開始下載，直到在HTML頁面頂部處理了渲染阻塞CSS和JavaScript文件。
過濾器框允許您顯示或隱藏特定資源：
larger-than:: 限制大于的文件，以字節(jié)（10000）、千字節(jié)（1000 kB）或兆字節(jié)（1 M）表示-larger-than:: 限制小于的文件-domain:*<.yourdomain.com>：顯示未從主域加載的第三方請(qǐng)求。這些都是網(wǎng)站速度慢的主要原因。
具有優(yōu)化CSS的高性能頁面通常具有較少的資源，這些資源與短阻塞/暫停條并行加載。
2. WebPageTest
WebGetest提供了類似的網(wǎng)絡(luò)瀑布視圖，以及許多其他性能圖表：
WebPageTest.org頁面資源加載瀑布圖
該服務(wù)使用基于不同全球位置的設(shè)備，因此您可以評(píng)估真實(shí)世界的性能和CSS優(yōu)化。
3. Chrome開發(fā)人員工具Lighthouse面板
DevTools Lighthouse面板在基于鉻的瀏覽器中提供，如Chrome、Edge、Brave、Opera和Vivaldi。您可以為移動(dòng)和桌面設(shè)備生成性能、漸進(jìn)式Web應(yīng)用、最佳實(shí)踐、可訪問性和搜索引擎優(yōu)化報(bào)告。
DevTools Lighthouse面板
該工具提供改進(jìn)建議，包括優(yōu)化CSS的方法。并非所有這些都是切實(shí)可行的，但最有利于性能提升的點(diǎn)都會(huì)被強(qiáng)調(diào)。
4. Google PageSpeed Insights
PageSpeed Insights是Lighthouse的在線版本。它的功能較少，但可以在任何瀏覽器中使用，并提供一些可選的見解。
例如，一個(gè)樹狀圖顯示了最大的JavaScript資源，其中包含一個(gè)覆蓋率指標(biāo)，該指標(biāo)指示使用和未使用代碼的比例：
Google PageSpeed Insights樹狀圖
CSS不會(huì)顯示，但JavaScript的數(shù)量將影響樣式的效率。
類似的網(wǎng)站速度測(cè)試工具包括Pingdom和GTmetrix等十余個(gè)。
5. Chrome開發(fā)人員工具覆蓋范圍面板
Chromium瀏覽器中的DevTools覆蓋范圍面板有助于定位未使用的CSS（和JavaScript）代碼。從DevTools更多工具子菜單中選擇覆蓋范圍，然后刷新頁面并瀏覽站點(diǎn)/應(yīng)用程序：
DevTools覆蓋范圍面板
CSS和JavaScript資產(chǎn)顯示在覆蓋范圍面板中，未使用代碼的比例用紅色表示。單擊任何文件以查看其源代碼，未使用的代碼在行號(hào)欄中以紅色突出顯示。
需要注意的幾件事：
- 如果刷新或?qū)Ш降叫马撁?，覆蓋率指標(biāo)將重置，這在WordPress站點(diǎn)上是典型的。只有在瀏覽一個(gè)加載內(nèi)容而不刷新頁面的單頁應(yīng)用程序時(shí)，未使用的代碼度量才會(huì)降低。
- 該工具只能解釋在特定時(shí)間點(diǎn)使用的CSS。它無法確定小部件是否未被查看或具有多個(gè)JavaScript綁定狀態(tài)。
6. Chrome開發(fā)人員工具性能監(jiān)視器
基于Chromium的瀏覽器具有實(shí)時(shí)性能監(jiān)視器。同樣，這可以從DevTools的“更多工具”菜單中獲得。當(dāng)您瀏覽頁面、滾動(dòng)和觸發(fā)動(dòng)畫時(shí)，圖表會(huì)更新：
DevTools性能監(jiān)視器
以下指標(biāo)對(duì)于優(yōu)化CSS性能特別重要（越低越好）：
- CPU使用率：處理器使用率從0%到100%。
- 布局/秒：瀏覽器重新布局頁面的速率。
- 樣式重新計(jì)算次數(shù)/秒：瀏覽器必須重新計(jì)算樣式的速率。
如果CSS由于外部因素而陷入困境，其他指標(biāo)也可能有用（同樣，值越低表示性能越好）：
- JS堆大小：JavaScript對(duì)象使用的總內(nèi)存。
- DOM節(jié)點(diǎn)：HTML文檔中的元素?cái)?shù)。
- JS事件偵聽器：已注冊(cè)的JavaScript事件偵聽器的數(shù)量。
- 文檔：資源的數(shù)量，包括頁面、CSS文件、JavaScript模塊等。
- 文檔幀：幀、iframe和JavaScript工作腳本的數(shù)量。
7. Chrome開發(fā)人員工具性能報(bào)告
DevTools性能面板允許您記錄頁面活動(dòng)以進(jìn)行進(jìn)一步分析，并幫助確定性能問題。生成的報(bào)告很復(fù)雜，許多開發(fā)人員都避免使用它們，但它們提供了有價(jià)值的信息。
性能面板的設(shè)置圖標(biāo)允許您設(shè)置各種選項(xiàng)，例如降低網(wǎng)絡(luò)和CPU的速度。您還可以禁用JavaScript示例，以便不記錄詳細(xì)的調(diào)用堆棧。
要開始，請(qǐng)單擊循環(huán)記錄圖標(biāo)，加載和/或使用頁面，然后單擊停止按鈕查看報(bào)告：
DevTools性能報(bào)告
幾乎所有這些指標(biāo)都對(duì)JavaScript開發(fā)人員有用，但CSS優(yōu)化問題可能從以下方面特別明顯：
- 頂部紅色條：這表示幀速率顯著下降，這可能會(huì)導(dǎo)致性能問題。這在頁面加載開始時(shí)是應(yīng)該的，但是過多的CSS動(dòng)畫也可能是一個(gè)問題。
- 摘要圖表：高加載、渲染和繪制度量可能表明CSS問題。
間接CSS性能優(yōu)化
下面的優(yōu)化程序不會(huì)直接解決CSS問題，但它們可以幫助您解決一些性能問題，所需的工作量相對(duì)較小。
使用好主機(jī)
使用一臺(tái)性能良好的主機(jī)，使服務(wù)器在物理上更接近用戶，將立即帶來性能優(yōu)勢(shì)。托管計(jì)劃各不相同，但主要有三種類型：
云托管計(jì)劃和價(jià)格差異巨大。你可以考慮：
交換主機(jī)可以提高性能。它不太可能解決您所有的問題，但它是解決后端和帶寬問題的經(jīng)濟(jì)高效的解決方案。
您還可以考慮使用內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）或?qū)I(yè)圖像和視頻CDN，它可以在地理上更接近用戶的多個(gè)位置上分發(fā)負(fù)載。
利用瀏覽器和服務(wù)器效率功能
大約10%的站點(diǎn)不激活gzip（或更好的）壓縮，這通常是默認(rèn)的服務(wù)器選項(xiàng)。通過在傳輸之前壓縮文件，可以將CSS的大小減少60%或更多。它不會(huì)修復(fù)低效的CSS，但代碼會(huì)更快到達(dá)！
您還應(yīng)該激活HTTP/2（或更好），它以較小的二進(jìn)制格式發(fā)送數(shù)據(jù)，壓縮頭，并且可以在同一TCP連接上發(fā)送多個(gè)文件。
最后，確保瀏覽器能夠有效緩存CSS和其他文件。這通常是在HTTP頭中設(shè)置Expires、Last Modified和/或ETag哈希的問題。
優(yōu)化CMS
諸如WordPress之類的內(nèi)容管理系統(tǒng)可以通過主題和插件進(jìn)行擴(kuò)展，這些主題和插件服務(wù)于它們自己的CSS。在可能的情況下，您應(yīng)加快CMS的速度，以：
優(yōu)化圖像
圖像的處理和呈現(xiàn)開銷與HTML、CSS和JavaScript不同，但它們占頁面重量和可用帶寬的很大一部分?？紤]：
專業(yè)的圖像CDN可以為您處理一些這方面的工作。有關(guān)更多提示，請(qǐng)查看我們關(guān)于如何為Web優(yōu)化圖像的指南。
刪除未使用的CSS
最快的樣式是那些您永遠(yuǎn)不需要加載或渲染的樣式！嘗試刪除/編輯您不再需要的任何CSS代碼，例如用于遺留頁面、小部件或框架的CSS代碼。在較大的網(wǎng)站上，這可能很困難，而且并不總是清楚特定的樣式集是否是必需的。
以下工具在構(gòu)建時(shí)分析HTML和CSS的使用情況，或者通過抓取URL來識(shí)別冗余代碼。這并不總是足夠的，因此可以設(shè)置其他配置，以確保列出由JavaScript和用戶交互觸發(fā)的樣式：
- UnCSS
- UnusedCSS
- PurgeCSS
- PurifyCSS
還有一個(gè)更好的選擇：將CSS拆分為具有明確責(zé)任級(jí)別的單獨(dú)文件，并相應(yīng)地編制文檔。然后，刪除不必要的樣式變得相當(dāng)容易。
優(yōu)化CSS加載性能
并不是所有的CSS都加載相同。謙遜的標(biāo)簽有許多不總是合乎邏輯的選項(xiàng)和怪癖。
優(yōu)化Web字體使用
谷歌字體和類似的字體設(shè)計(jì)商已經(jīng)徹底改變了網(wǎng)絡(luò)字體，但幾行字體代碼可能會(huì)占用數(shù)百KB的帶寬。
以下是我們的優(yōu)化建議：
使用適當(dāng)?shù)淖煮w加載選項(xiàng)
下載和處理Web字體可能需要幾秒鐘的時(shí)間。瀏覽器將：
兩者都不理想。CSS font-display屬性和Google Font & display =參數(shù)可以選擇一個(gè)備選選項(xiàng)：
- auto：瀏覽器的默認(rèn)行為（通常為FOIT）。
- block：有效地阻止。文本最多三秒鐘不可見。沒有字體交換，但文本可能需要時(shí)間才能顯示。
- swap：實(shí)際上是FOUT。在web字體可用之前，將使用第一個(gè)回退。文本可以立即讀取，但字體交換效果可能會(huì)不和諧。Font Style Matcher可用于定義大小類似的回退。
- fallback：FOIT和FOUT之間的妥協(xié)。文本在短時(shí)間內(nèi)不可見（通常為100毫秒），然后使用第一個(gè)回退，直到web字體可用。
- optional：與回退類似，只是沒有發(fā)生字體交換。只有在初始期間可用時(shí)，才會(huì)使用web字體。您的第一個(gè)頁面視圖可能會(huì)顯示回退字體，后續(xù)視圖將使用下載和緩存的web字體。
使用swap、fallback或optional可以提高性能。
避免CSS @import
@import at-rule允許將CSS文件包含在其他文件中：
/* main.css */
@import url("reset.css");
@import url("grid.css");
@import url("widget.css");
這似乎是加載較小組件和字體的有效方法。不幸的是，每個(gè)@import都是渲染阻塞，每個(gè)文件都必須按順序加載和解析。
HTML中的多個(gè)標(biāo)記更有效，可以并行加載CSS文件：
也就是說，這樣更加合理…
串聯(lián)和最小化CSS
現(xiàn)代構(gòu)建工具、CSS預(yù)處理器（如Sass）和WordPress插件可以將所有部分組合到一個(gè)大型CSS文件中。然后刪除不必要的空白、注釋和字符，以將文件大小減至最小。
使用HTTP/2及更高版本，多個(gè)文件的性能問題較少，但單個(gè)文件只需要一個(gè)頭，可以更高效地進(jìn)行g(shù)zip壓縮和緩存。
單獨(dú)的CSS文件只有在您有一個(gè)或多個(gè)頻繁更改的樣式表（可能每周更改幾次）時(shí)才實(shí)用。即使如此，大部分靜態(tài)CSS代碼仍然可以合并到一個(gè)文件中。有關(guān)更多提示，請(qǐng)查看我們關(guān)于如何最小化CSS和JS的教程。
避免Base64編碼
工具可以將圖像編碼為base64字符串，您可以將其用作HTML的
.background {
background-image: url('data:image/jpg;base64,ABC123...');
}
這會(huì)減少HTTP請(qǐng)求的數(shù)量，但會(huì)損害CSS性能：
- base64字符串可以比其二進(jìn)制等效字符串大30%。
- 瀏覽器必須先解碼字符串，然后才能使用圖像，并且
- 改變一個(gè)圖像像素會(huì)使整個(gè)CSS文件無效。
只考慮Base64編碼，如果您使用的是非常小的、不經(jīng)常改變的圖像，其中生成的字符串不長(zhǎng)于URL。
也就是說，您可以用UTF8編碼可重用的SVG圖標(biāo)，例如。
.svgbackground {
background-image: url('data:image/svg+xml;utf8,');
}
刪除CSS Hacks和IE Fallbacks
除非你很不幸，并且有很多Internet Explorer用戶，否則可以從你的CSS中刪除有條件的樣式表和黑客。在大多數(shù)情況下，IE用戶仍然會(huì)看到一些東西，特別是如果您使用的是“移動(dòng)優(yōu)先”設(shè)計(jì)，默認(rèn)情況下會(huì)顯示更簡(jiǎn)單的線性視圖。結(jié)果可能不太好，也不會(huì)是完美的像素，但你的開發(fā)預(yù)算最好是考慮所有用戶的可訪問性。
預(yù)加載CSS文件
標(biāo)記提供了一個(gè)可選的預(yù)加載屬性，可以立即開始下載，而不是等待HTML中的真正引入：
My page
這在WordPress和其他CMS中尤其有用，在這些CMS中，插件可以在頁面下方添加樣式表。
使用關(guān)鍵內(nèi)聯(lián)CSS
分析工具可能會(huì)建議您“內(nèi)聯(lián)關(guān)鍵CSS”或“減少渲染阻塞樣式表”。這可以通過以下方式提高性能：
- 識(shí)別折疊上方元素使用的基本樣式（頁面加載時(shí)可見的樣式）
- 將關(guān)鍵CSS內(nèi)聯(lián)到
中的諸如critical和criticalCSS之類的工具可以幫助提取視圖中元素的樣式。
這項(xiàng)技術(shù)顯著提高了績(jī)效，提高了審計(jì)分?jǐn)?shù)。具有一致界面的站點(diǎn)或應(yīng)用程序應(yīng)該更容易實(shí)現(xiàn)，但在其他地方可能更難實(shí)現(xiàn)：
- 除了最簡(jiǎn)單的站點(diǎn)外，構(gòu)建工具對(duì)于所有站點(diǎn)都是必不可少的。
- 每個(gè)設(shè)備上的“折疊”都不同。
- 站點(diǎn)可以有各種各樣的布局，需要不同的關(guān)鍵CSS。
- 關(guān)鍵的CSS工具可以與特定的框架、HTML生成的客戶端和動(dòng)態(tài)內(nèi)容進(jìn)行斗爭(zhēng)。
- 這種技術(shù)主要有利于第一頁的加載。CSS被緩存用于后續(xù)頁面，因此附加的內(nèi)聯(lián)樣式將增加頁面的權(quán)重。
使用媒體查詢渲染
單個(gè)連接和縮小將使大多數(shù)站點(diǎn)受益，但需要大量較大屏幕樣式的站點(diǎn)可以拆分CSS文件并使用媒體查詢加載：
本例假定采用移動(dòng)優(yōu)先的方法。移動(dòng)設(shè)備加載core.css，但可能不需要下載或解析其余的樣式表。
使用漸進(jìn)式渲染
漸進(jìn)式渲染是一種為單獨(dú)的頁面或組件定義單獨(dú)樣式表的技術(shù)。它可以使非常大的站點(diǎn)受益，在這些站點(diǎn)中，單個(gè)頁面由廣泛的組件構(gòu)成。
在HTML中引用組件之前立即加載每個(gè)CSS文件：
... 這在大多數(shù)瀏覽器中行之有效。（Safari顯示一個(gè)空白頁面，直到加載所有CSS，但它不應(yīng)該明顯比單個(gè)大樣式表差。）
采用Web組件還鼓勵(lì)使用在呈現(xiàn)自定義元素時(shí)加載的范圍樣式。
優(yōu)化CSS性能
CSS技術(shù)和屬性給瀏覽器、CPU、內(nèi)存、帶寬和其他資源帶來了不同的壓力。以下提示可以幫助您避免不必要的處理和緩慢的性能。
采用現(xiàn)代布局技術(shù)（Grid和Flexbox）
基于浮動(dòng)的布局很難創(chuàng)建，使用大量屬性，需要連續(xù)調(diào)整邊距和填充，必須使用媒體查詢進(jìn)行管理，并且需要大量的瀏覽器處理。多年來，它們是唯一可行的布局方法，但已不再必要。使用以下任一選項(xiàng)：
- CSS Flexbox用于一維布局，可以換行到下一行。它是菜單、圖像庫、卡片等的理想選擇。
- CSS Grid用于具有顯式行和列的二維布局。它非常適合頁面布局。
兩者都更易于開發(fā)，使用更少的代碼，渲染速度更快，并且無需媒體查詢即可適應(yīng)任何屏幕大小。
非常舊的瀏覽器無法識(shí)別現(xiàn)代的flexbox和網(wǎng)格屬性，因此每個(gè)元素都成為一個(gè)塊。以簡(jiǎn)單的移動(dòng)式線性布局顯示它們：不需要使用基于浮點(diǎn)的回退來模擬設(shè)計(jì)。
用CSS漸變和效果替換圖像
在可能的情況下，選擇CSS代碼而不是圖像。使用漸變、邊界、半徑、陰影、過濾器、混合模式、遮罩、剪裁和偽元素效果進(jìn)行實(shí)驗(yàn)，以重用或替換現(xiàn)有圖像。
CSS效果使用更少的帶寬，更容易修改，并且通?？梢栽O(shè)置動(dòng)畫。
避免過度使用高成本的屬性
您可能有簡(jiǎn)潔的聲明性代碼，但某些CSS需要比其他CSS更多的處理。以下屬性觸發(fā)繪畫計(jì)算，當(dāng)過度使用時(shí)計(jì)算成本可能會(huì)很高：
position: fixedborder-radiusbox-shadowtext-shadowopacitytransformfilterbackdrop-filterbackground-blend-mode
盡可能使用CSS過渡和動(dòng)畫
CSS過渡和動(dòng)畫總是比JavaScript支持的效果更平滑，后者修改類似的屬性。它們不會(huì)在非常舊的瀏覽器中處理，但是，由于這些瀏覽器可能運(yùn)行在性能較差的設(shè)備上，這是最好的。
但是，請(qǐng)避免過多的動(dòng)畫。這些效果應(yīng)該能夠增強(qiáng)用戶體驗(yàn)，而不會(huì)對(duì)性能產(chǎn)生負(fù)面影響或?qū)е聲炣?。檢查prefers-reduced-motion媒體查詢，必要時(shí)禁用動(dòng)畫。
避免觸發(fā)重新布局的動(dòng)畫屬性
更改元素的尺寸（寬度、高度、填充、邊框）或位置（頂部、底部、左側(cè)、右側(cè)、邊距）可能會(huì)導(dǎo)致整個(gè)頁面在每個(gè)動(dòng)畫幀上重新布局。要設(shè)置動(dòng)畫的最有效特性是：
opacityfilter: 模糊、對(duì)比度、陰影和其他效果transform: 平移（移動(dòng)）、縮放或旋轉(zhuǎn)圖元素
瀏覽器可以使用硬件加速的GPU在自己的層中渲染這些效果，因此只影響合成階段。
如果必須設(shè)置其他屬性的動(dòng)畫，可以通過使用position:absolute將元素從頁面流中移除來提高性能。
注意復(fù)雜選擇器
瀏覽器將快速解析最復(fù)雜的CSS選擇器，但簡(jiǎn)化它們會(huì)減少文件大小并提高性能。復(fù)雜選擇器通常是在CSS預(yù)處理器（如Sass）中創(chuàng)建深度嵌套的結(jié)構(gòu)時(shí)生成的。
指示哪些元素將更改
CSS will-change屬性允許您警告元素將如何更改或設(shè)置動(dòng)畫，以便瀏覽器可以提前進(jìn)行優(yōu)化：
.myelement { will-change: transform, opacity; }可以定義任意數(shù)量的逗號(hào)分隔值，但該屬性只能作為解決已知性能問題的最后手段。您不應(yīng)該將它應(yīng)用于太多的元素，并確保給它足夠的時(shí)間進(jìn)行初始化。
考慮CSS Containment
Containment是一種新的CSS特性，它允許您識(shí)別頁面的孤立子樹，從而提高性能。瀏覽器可以通過呈現(xiàn)（或不呈現(xiàn)）特定的DOM內(nèi)容塊來優(yōu)化處理。
contain屬性在空格分隔的列表中接受以下一個(gè)或多個(gè)值：
none: 未應(yīng)用Containmentlayout: 元素的布局與頁面的其余部分隔離-其內(nèi)容不會(huì)影響其他元素paint: 圖元的子圖元不會(huì)顯示在其邊界之外size: 可以在不檢查子元素的情況下確定元素的大小-維度與內(nèi)容無關(guān)
還提供了兩個(gè)特殊值：
strict: 應(yīng)用所有containment 規(guī)則（無規(guī)則除外）content: 應(yīng)用布局和繪制
重要：一個(gè)頁面有一個(gè)包含應(yīng)用
contain: strict;的的內(nèi)容，瀏覽器將不會(huì)重新計(jì)算該項(xiàng)、列表中的其他項(xiàng)或頁面上任何其他元素的大小或位置。大多數(shù)現(xiàn)代瀏覽器都支持CSS Containment。Safari或較舊的應(yīng)用程序中不支持Containment，但在這些應(yīng)用程序中可以安全地使用Containment，因?yàn)闉g覽器將忽略該屬性。
對(duì)“Save-Data”標(biāo)頭作出響應(yīng)
Save Data是一個(gè)HTTP請(qǐng)求頭，指示用戶已請(qǐng)求減少的數(shù)據(jù)。在某些瀏覽器中，它可能被標(biāo)記為“Lite”或“Turbo”模式。
啟用后，每個(gè)瀏覽器請(qǐng)求都會(huì)發(fā)送一個(gè)
Save-Data標(biāo)頭：GET /main.css HTTP/1.0 Host: site.com Save-Data: on
當(dāng)檢測(cè)到Save-Data時(shí)，服務(wù)器可以做出相應(yīng)的響應(yīng)。在CSS的情況下，它可以發(fā)送一個(gè)簡(jiǎn)單的移動(dòng)式線性布局，使用OS字體，切換到塊顏色，或者加載低分辨率的圖像背景。
注意：服務(wù)器應(yīng)在修改請(qǐng)求時(shí)返回以下標(biāo)頭，以確保在用戶關(guān)閉Lite/Turbo模式時(shí)不會(huì)緩存和重用最小內(nèi)容：
Vary: Accept-Encoding, Save-Data
客戶端JavaScript也可以檢測(cè)到此標(biāo)頭。當(dāng)未啟用“Save-Data”時(shí)，以下代碼將bestUX類添加到
元素：if ('connection' in navigator && !navigator.connection.saveData) { document.documentElement.classList.add('bestUX'); }然后，樣式表可以相應(yīng)地做出響應(yīng)，而無需任何服務(wù)器操作：
/* no hero image by default */ header { background-color: #abc; background-image: none; } /* hero image when no Save-Data */ .bestUX header { background-image: url("hero.jpg"); }prefers-reduced-data媒體查詢提供了一個(gè)僅CSS選項(xiàng)作為替代，盡管在編寫本文時(shí)，任何瀏覽器都不支持此選項(xiàng)：
/* no hero image by default */ header { background-color: #abc; background-image: none; } /* hero image when no Save-Data */ @media (prefers-reduced-data: no-preference) { header { background-image: url("hero.jpg"); } }小結(jié)
對(duì)于CSS性能的優(yōu)化有很多選擇，但是對(duì)于新項(xiàng)目，請(qǐng)考慮以下做法：
- 使用移動(dòng)優(yōu)先的方法：首先編寫最簡(jiǎn)單的移動(dòng)布局，然后隨著屏幕空間和瀏覽器功能集的增加添加增強(qiáng)功能。
- 將CSS拆分為具有可識(shí)別責(zé)任的單獨(dú)文件：CSS預(yù)處理器或CMS插件可以將CSS部分合并到單個(gè)文件中。
- 添加一個(gè)構(gòu)建步驟：提供了一些工具，可以自動(dòng)刪除代碼、識(shí)別問題、連接、縮小、減少圖像大小等。自動(dòng)化使生活更輕松，而且您不太可能忘記優(yōu)化步驟。
- 記錄樣式表：帶有文檔化示例的樣式指南將使您的代碼更易于獲取和維護(hù)。您將能夠識(shí)別和刪除舊的CSS，而無需付出任何代價(jià)。
最后，學(xué)習(xí)CSS！您知道的越多，需要編寫的代碼就越少，Web應(yīng)用程序就會(huì)變得越快。無論您使用哪種平臺(tái)和框架，它都將使您成為更好的開發(fā)人員。
新聞名稱：如何優(yōu)化CSS以達(dá)網(wǎng)站性能之巔
當(dāng)前URL：http://fisionsoft.com.cn/article/dhihdis.html
