国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > 使用CSS提高網(wǎng)站性能的30種方法

使用CSS提高網(wǎng)站性能的30種方法

時間：2023-05-24 04:33:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-05-24 04:33:01 來源：網(wǎng)站運(yùn)營

使用CSS提高網(wǎng)站性能的30種方法：根據(jù)http://httparchive.org的頁面重量報告，CSS在平均70個請求和2MB的網(wǎng)頁上占7個HTTP請求和70Kb的代碼。這并不是網(wǎng)站性能糟糕的最壞原因（我正看著你呢，JavaScript），但CSS面臨著特定的挑戰(zhàn)：

下面的30個技巧將幫助您優(yōu)化CSS，以改善實(shí)際和感知的響應(yīng)時間。

1.使用CSS性能分析工具

衡量是確定業(yè)績機(jī)會和評估收益的唯一途徑。所有瀏覽器都提供DevTools面板，通常通過“更多工具”菜單或鍵盤快捷鍵Ctrl打開|按下Cmd + Shift +i或F12組合鍵。

“網(wǎng)絡(luò)”面板是一個很好的起點(diǎn)，刷新后，它會顯示資源下載的瀑布圖：







較長的條突出顯示加載緩慢或渲染受阻的資源（如上圖中的白色塊所示）。

該燈塔Chrome、Edge、Brave、Opera和Vivaldi中提供的面板可以評估核心Web重要指標(biāo)并提出績效建議：







相同的瀏覽器還提供了一個覆蓋面板來幫助定位未使用的CSS屬性，如紅色邊框所示：







請注意，未使用的樣式指示符：

大多數(shù)DevTools還提供性能面板。它們最常用于JavaScript評估，但也可以在應(yīng)用CSS時識別CPU和布局峰值。

在線性能工具還可以報告一系列CSS改進(jìn)因素：

2.快速間接改進(jìn)CSS

您可以在不接觸任何代碼的情況下進(jìn)行性能改進(jìn)：

3.預(yù)加載樣式表

該<鏈接rel ="預(yù)加載">標(biāo)記允許您在引用CSS之前啟動下載。當(dāng)樣式表引用出現(xiàn)在其它資源之后，或者您已經(jīng)嵌套了@導(dǎo)入指令：

!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><!-- preload CSS file --><link rel="preload" href="styles.css" as="style" /><!-- more code --><!-- use preloaded styles --><link rel="stylesheet" href="styles.css" />

4.刪除未使用的樣式和文件

刪除所有不使用的樣式表。您可能能夠識別不再使用的頁面、小部件或框架代碼。如果您將樣式表拆分為具有明確責(zé)任級別和適當(dāng)文檔的單獨(dú)文件，則此任務(wù)會更容易。

以下工具可以通過分析HTML和CSS來識別冗余代碼：

單獨(dú)的HTML分析通常是不夠的，但是您可以配置白名單樣式，比如那些由JavaScript激活的樣式。

5.刪除CSS攻擊和回退

舊的代碼庫可能有一系列笨拙的IE黑客和后備，試圖修復(fù)布局問題或啟用現(xiàn)代CSS屬性。該應(yīng)用程序的最后一個版本是在十年前發(fā)布的，現(xiàn)在已不再受支持。是時候刪除代碼了。

即使你很不幸有很大比例的IE用戶，許多CSS黑客使瀏覽器變慢。

6.使用fonts

使用OS字體可以保存數(shù)百KB，并避免出現(xiàn)諸如無樣式文本閃爍（FOUT）或不可見文本閃爍（FOIT）等問題。您的用戶可能根本不會注意到。當(dāng)然，你的設(shè)計師會...

7.刪除不必要的字體

標(biāo)準(zhǔn)字體需要為每種粗細(xì)和樣式創(chuàng)建單獨(dú)的文件。您可以刪除那些不常用的。

同樣，您不太可能需要字體中的所有字符和字形?？梢允褂靡韵鹿ぞ呱勺煮w子集字體松鼠或指定所需的字符谷歌字體例如，加載"OpenReplay"的Oswald字體字符：

<link href="https://fonts.googleapis.com/css2?family=Oswald&text=OpenReplay" rel="stylesheet">您還可以考慮可變字體。它們使用矢量插值定義了各種樣式、權(quán)重和斜體。該文件稍大，但只需要一種字體而不是多種字體。

8. Host font files locally

引用Google字體很容易，但額外的DNS查找、生成子集和跟蹤使用情況會帶來性能成本。本地托管字體的下載和呈現(xiàn)速度明顯更快。

Web開放字體格式2.0（WOFF2）是您唯一需要的文件版本。所有現(xiàn)代瀏覽器都支持這種字體，IE用戶可以回到OS字體。

您還應(yīng)該在CSS中定義適當(dāng)?shù)淖煮w顯示加載選項(xiàng)。以下選項(xiàng)可提供明顯的性能提升：

9.使用HTML<鏈接>而不是CSS @導(dǎo)入

@ import at-rule允許您在CSS中加載樣式表：

/* main.css */@import url("reset.css");@import url("base.css");@import url("grid.css");這允許您將樣式表拆分為更小、更易于管理的樣式表，但是每個@import都會阻塞渲染。瀏覽器必須依次下載和解析每個文件。

使用HTML<鏈接>標(biāo)記效率更高，因?yàn)槊總€樣式表都是并行加載的：

<link rel="stylesheet" href="reset.css"><link rel="stylesheet" href="base.css"><link rel="stylesheet" href="grid.css">或者...

10.捆綁和縮小樣式表

HTTP/2可以比HTTP/1.1更好地服務(wù)于多個樣式表，但是單個文件需要一個頭，并且可以更有效地進(jìn)行g(shù)zip壓縮和緩存。您可以在開發(fā)過程中使用任意數(shù)量的文件，但是要使用構(gòu)建步驟來捆綁和縮小到單個樣式表中。包括Sass預(yù)處理器或PostCSS導(dǎo)入插件在內(nèi)的工具可以在一個命令中完成這項(xiàng)艱巨的工作。

11.使用現(xiàn)代CSS布局

較早的布局技術(shù)，如浮動和，我敢說，HTML<表>是笨重的，難以管理，并需要大量的代碼來管理間距和媒體查詢。如果您的代碼庫中仍然有它們，那么是時候切換到：

所有這些都更易于開發(fā)，使用更少的代碼，渲染更快，并且可以適應(yīng)不同的屏幕大小，而無需媒體查詢。

非常舊的瀏覽器不支持這些屬性，它們將每個元素顯示為一個標(biāo)準(zhǔn)塊。這導(dǎo)致了一個更簡單、更快的類似移動設(shè)備的線性布局，而且?guī)缀鯖]有理由添加后備。

12.用CSS效果替換圖像

盡可能使用CSS代碼生成圖形，而不是引用圖像?，F(xiàn)代的瀏覽器為復(fù)雜的形狀提供了漸變、帶圖案的邊框、圓角、陰影、濾鏡、疊加、混合模式、蒙版、剪切和偽元素。

CSS效果使用的帶寬要少得多，可重復(fù)使用，易于修改，并且通常可以制作動畫。

13.從不嵌入base64編碼的位圖

您可以使用base64編碼將圖像嵌入到CSS中，base64編碼將像素轉(zhuǎn)換為文本字符：

.imgbackground { background-image: url('data:image/jpg;base64,0123456...');}該技術(shù)減少了HTTP請求，但可能會損害CSS性能：

只有當(dāng)圖像很小，生成的字符串不比URL長多少時，才考慮base64編碼。

14.盡可能使用SVG

“可縮放矢量圖形”包含繪圖指令，例如“在此點(diǎn)繪制一個半徑為50個單位、紅色填充和藍(lán)色3個單位邊框的圓”：

<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 120 120"> <circle cx="60" cy="60" r="50" stroke-width="3" stroke="#00f" fill="#ff0" /><svg>它們是徽標(biāo)和圖表的理想選擇，在任何分辨率下都很好看，并且文件大小應(yīng)該比位圖小。

在可行的情況下，您可以將SVG直接內(nèi)聯(lián)到CSS代碼中：

.svgbackground { background: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 120 120"><circle cx="60" cy="60" r="50" stroke-width="3" stroke="#00f" fill="#f0" /></svg>') center no-repeat;}這將增加樣式表的大小，但對于必須立即顯示的較小的可重用圖標(biāo)來說，這很有用。

15.使用CSS設(shè)置SVG樣式

直接將SVG代碼嵌入到HTML中通常更有用和有效，例如。

<main> <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 120 120"> <circle cx="60" cy="60" r="50" stroke-width="3" stroke="#00f" fill="#ff0" /> <svg></main>這將SVG放入DOM中。SVG的屬性具有低特異性，并且可以在CSS中覆蓋：

/* change to green and black */circle { stroke-width: 10px; stroke: #000; fill: #0f0;}您可以：

開源會話重放

OpenReplay是一個開源會話回放套件，可讓您查看用戶在Web應(yīng)用上執(zhí)行的操作，從而幫助您更快地解決問題。OpenReplay是自托管的，可以完全控制您的數(shù)據(jù)。







開始享受調(diào)試體驗(yàn)-開始免費(fèi)使用OpenReplay。

16.成為CSS框架的犧牲品

CSS框架在你開始web開發(fā)時是很有幫助的。他們提供了一套有吸引力的風(fēng)格，所以你可以迅速成為生產(chǎn)力。缺點(diǎn)？......

17.預(yù)處理代碼生成

CSS預(yù)處理器（如Sass）通過提供變量、循環(huán)、函數(shù)和mixin等語言構(gòu)造，使CSS開發(fā)受益匪淺。也就是說，一定要檢查生成的代碼，以確保它與您自己編寫的代碼一樣簡潔。特別是，深度嵌套的結(jié)構(gòu)可能會導(dǎo)致過于復(fù)雜的選擇器，從而使樣式表變得龐大。

18.簡化您的選擇器

現(xiàn)代瀏覽器解析長選擇器沒有問題，但是降低復(fù)雜性將減小文件大小，提高性能，并使代碼更易于維護(hù)。

您還應(yīng)該考慮新的：is、：where和：has選擇器，它們可以像這樣轉(zhuǎn)換CSS選擇器：

article section.primary:not(:first-child) h1,article section.primary:not(:first-child) h2,article section.primary:not(:first-child) p,article section.secondary:not(:first-child) h1,article section.secondary:not(:first-child) h2,article section.secondary:not(:first-child) p { color: red;}變成一句簡潔的話：

article section:not(:first-child):where(.primary, .secondary) :where(h1, h2, p) { color: red;}

19.避免昂貴的屬性

某些CSS屬性比其他屬性需要更多的處理。將這段代碼添加到樣式表中，看看滾動是如何變得不穩(wěn)定的！

*, ::before, ::after { box-shadow: 3px 5px 5px rgba(0,0,0,0.3);}以下特性觸發(fā)CPU密集型繪制計算：

這并不是說您不應(yīng)該使用它們，但是在將這些屬性應(yīng)用于許多元素時要謹(jǐn)慎。

20.使用CSS轉(zhuǎn)換和動畫

CSS過渡和動畫將比JavaScript支持的效果更平滑，后者改變了相同的屬性。但是，最好避免對觸發(fā)重新布局的屬性進(jìn)行動畫處理，例如尺寸（寬度、高度、填充、邊框）或位置（頂部、底部、左側(cè)、右側(cè)、邊距）。這會導(dǎo)致整個頁面在每個動畫幀上重新布局。

有效的動畫特性包括：

瀏覽器可以使用硬件加速的GPU在自己的圖層中渲染這些效果，這只會影響最終的合成渲染階段。

通過使用將元素從頁面流中取出，可以提高其他動畫屬性的性能位置：絕對。

21.用途意志改變必要時

該意志改變性質(zhì)警告瀏覽器某個元素將以特定方式進(jìn)行動畫處理，以便瀏覽器可以提前進(jìn)行優(yōu)化：

.animatedelement { will-change: transform, opacity;}可以設(shè)置任意數(shù)量的逗號分隔值。

改變意愿應(yīng)該作為解決特定性能問題的最后手段。不應(yīng)將其應(yīng)用于太多的元素或在頁面加載時立即啟動動畫。給予瀏覽器一點(diǎn)時間進(jìn)行優(yōu)化。

22. @transkey_groupall~trans

HTTP協(xié)議保存-數(shù)據(jù)標(biāo)題指示用戶已請求縮減的數(shù)據(jù)。瀏覽器可能會將此選項(xiàng)標(biāo)記為"lite"或"turbo"模式，當(dāng)啟用此選項(xiàng)時，會顯示保存-數(shù)據(jù)標(biāo)頭隨每個瀏覽器請求一起發(fā)送：

GET /main.css HTTP/2.0Host: mysite.comSave-Data: on服務(wù)器可以檢測報頭并相應(yīng)地作出響應(yīng)。例如，它可以提供更簡單的CSS文件，該文件具有使用OS字體、塊顏色和更少圖像的線性布局。

服務(wù)器必須在修改請求時返回以下標(biāo)頭，以確保輕量級CSS文件在用戶停用時不會被重用保存-數(shù)據(jù)：

Vary: Accept-Encoding, Save-Data客戶端JavaScript還可以檢測保存-數(shù)據(jù)選項(xiàng)卡頁面上創(chuàng)建或編輯條目.下面的代碼添加全用戶體驗(yàn)類添加到<超文本標(biāo)記語言>元素時保存-數(shù)據(jù)是不啟用：

if ('connection' in navigator && !navigator.connection.saveData) { document.documentElement.classList.add('fullUX');}然后，樣式表可以應(yīng)用適當(dāng)?shù)臉邮?，而無需任何服務(wù)器交互：

/* no hero image by default */header { background-color: #ceb; background-image: none;}/* hero image when Save-Data is not enabled */.fullUX header { background-image: url('bigimg.jpg');}prefers-reduced-data media查詢提供了一個僅CSS的替代方案，盡管目前還沒有任何瀏覽器支持它：

/* no hero image by default */header { background-color: #ceb; background-image: none;}/* hero image when no Save-Data */@media (prefers-reduced-data: no-preference) { header { background-image: url('bigimg.jpg');}}

23.考慮關(guān)鍵內(nèi)聯(lián)CSS

Tools such as Lighthouse may recommend you "inline critical CSS" or "reduce render-blocking style sheets. " by:

下面的示例將剩余的CSS作為"打印"樣式表，瀏覽器以較低的優(yōu)先級異步加載。該加載代碼在下載后將其切換回所有媒體的標(biāo)準(zhǔn)樣式表。該<諾斯克文>確保在未啟用JavaScript的情況下仍然加載：

<head><!-- critical styles --><style> body { font-family: sans-serif; color: #111; }</style><!-- load remaining styles --><link rel="stylesheet" href="main.css" media="print" onload="this.media='all'"><noscript> <link rel="stylesheet" href="main.css"></noscript><head>該技術(shù)顯著提高了性能，并可能有利于具有一致界面的網(wǎng)站或單頁面應(yīng)用程序。較大的站點(diǎn)可能更具挑戰(zhàn)性：

如果您有一個小型站點(diǎn)，可以可靠地自動化構(gòu)建過程，或者有一個單頁應(yīng)用程序，請考慮關(guān)鍵的CSS。

24.創(chuàng)建針對設(shè)備的樣式表

包含所有設(shè)備代碼的單個（構(gòu)建）樣式表對于大多數(shù)站點(diǎn)都是實(shí)用的。然而，如果你的代碼庫很大，或者移動的和桌面設(shè)計有很大的不同，你可以創(chuàng)建特定于設(shè)備的樣式表，例如。

<!-- core styles for all devices --><link rel="stylesheet" href="core.css"><!-- served to screens less than 400px wide --><link rel="stylesheet" media="(max-width: 399px)" href="mobile.css"><!-- served to screens 400px or wider --><link rel="stylesheet" media="(min-width: 400px)" href="desktop.css">

25.考慮CSS遏制

CSS包含通過允許您標(biāo)識頁的獨(dú)立子樹來提高性能。然后瀏覽器可以優(yōu)化特定DOM內(nèi)容塊的呈現(xiàn)過程。

該集裝箱屬性支持以空格分隔的列表形式顯示以下一個或多個值：

還提供了兩個特定值：

考慮一個具有長<烏爾>列表設(shè)置為包含：嚴(yán)格;。更改任何子項(xiàng)的內(nèi)容時<里>，瀏覽器將不會重新計算該項(xiàng)目、列表中的其他項(xiàng)目或頁面上的任何其他元素的大小或位置。渲染速度更快。

26.嘗試漸進(jìn)式渲染

漸進(jìn)式呈現(xiàn)是一種為每個頁面和組件定義單獨(dú)樣式表的技術(shù)。這將有利于具有大量CSS的大型站點(diǎn)，這些站點(diǎn)的頁面具有不同的設(shè)計或由一系列組件構(gòu)成。

你可以領(lǐng)養(yǎng)原生Web組件或在組件出現(xiàn)在HTML中之前立即引用較小的CSS文件：

<body><!-- core styles --><link rel="stylesheet" href="core.css" /><!-- header --><link rel="stylesheet" href="header.css" /><header>header content</header><!-- article --><link rel="stylesheet" href="article.css" /><main> <h1>title</h1> <!-- widget --> <link rel="stylesheet" href="widget.css" /> <div class="widget">widget content</div></main><!-- footer --><link rel="stylesheet" href="footer.css" /><footer>footer content</footer></body>大多數(shù)瀏覽器在HTML下載時呈現(xiàn)HTML。每個樣式表<鏈接>都是呈現(xiàn)阻止的，但每個文件不應(yīng)超過幾千字節(jié)。

較舊的瀏覽器可能會顯示一個空白頁面，直到所有CSS都加載完畢，但總體影響應(yīng)該不會比一個大的呈現(xiàn)阻塞樣式表更糟。

27.采用web組件

本機(jī)瀏覽器Web組件提供了一種創(chuàng)建封裝的、單一責(zé)任的自定義功能的方法。換句話說，您可以創(chuàng)建自己的HTML標(biāo)記，例如<hello-world>，它與每個框架都兼容。

JavaScript框架引入了這些概念，但它們的組件從未真正與其他CSS或JavaScript分離。原生組件提供了一個Shadow DOM，它隔離了元素，因此樣式和功能不會泄漏。優(yōu)點(diǎn)：

組件仍然可以顯示shadow：part元素，因此可以進(jìn)行有限的外部樣式設(shè)置。

28.使用良好實(shí)踐開發(fā)技術(shù)

良好實(shí)踐技術(shù)會不斷發(fā)展、過期，并且因開發(fā)人員而異，但可靠的方法包括：

29.擁抱瀑布

CSS新手通常會嘗試?yán)@過全局名稱空間，并分別設(shè)置每個組件的樣式。CSS-in-JS框架通常在構(gòu)建時創(chuàng)建隨機(jī)類名，因此組件樣式不會沖突。

最后，使用CSS級聯(lián)比使用CSS級聯(lián)更好。例如，你可以設(shè)置默認(rèn)字體、顏色、大小、邊框等。它們是普遍應(yīng)用的，然后在必要時覆蓋它們。這樣可以減少重復(fù)，縮短樣式表的長度，提高樣式表的性能。

30.學(xué)會愛上CSS

一知半解大有幫助?，F(xiàn)代CSS的幾行代碼可以取代和改進(jìn)十年前需要復(fù)雜JavaScript的效果。您對CSS了解得越多，需要編寫的代碼就越少。

誠然，CSS很容易學(xué)習(xí)，但掌握起來很有挑戰(zhàn)性。沒有人期望您理解數(shù)百個屬性，但是當(dāng)您下次在Stack Overflow或ChatGPT上找到解決方案時，逐步瀏覽代碼是值得的。扎實(shí)掌握CSS基礎(chǔ)知識可以徹底改變您的工作流程、增強(qiáng)您的應(yīng)用程序并顯著提高性能。

如果你正在學(xué)習(xí)css，為你整理了一套30天的課程體系，可以進(jìn)入一起學(xué)習(xí)！







為幫助到一部分同學(xué)不走彎路，真正達(dá)到一線互聯(lián)網(wǎng)大廠前端項(xiàng)目研發(fā)要求，首次實(shí)力寵粉，打造了《30天挑戰(zhàn)學(xué)習(xí)計劃》，內(nèi)容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真實(shí)企業(yè)項(xiàng)目開發(fā)，云服務(wù)器部署上線，從入門到精通

共4大完整的項(xiàng)目開發(fā) ！一行一行代碼帶領(lǐng)實(shí)踐開發(fā)，實(shí)際企業(yè)開發(fā)怎么做我們就是怎么做。從學(xué)習(xí)一開始就進(jìn)入工作狀態(tài)，省得浪費(fèi)時間。

從學(xué)習(xí)一開始就同步使用 Git 進(jìn)行項(xiàng)目代碼的版本的管理，Markdown 記錄學(xué)習(xí)筆記，包括真實(shí)大廠項(xiàng)目的開發(fā)標(biāo)準(zhǔn)和設(shè)計規(guī)范，命名規(guī)范，項(xiàng)目代碼規(guī)范，SEO優(yōu)化規(guī)范

從藍(lán)湖UI設(shè)計稿 到 PC端，移動端，多端響應(yīng)式開發(fā)項(xiàng)目開發(fā)

這些內(nèi)容在《30天挑戰(zhàn)學(xué)習(xí)計劃》中每一個細(xì)節(jié)都有講到，包含視頻+圖文教程+項(xiàng)目資料素材等。只為實(shí)力寵粉，真正一次掌握企業(yè)項(xiàng)目開發(fā)必備技能，不走彎路 ！

過程中【不涉及】任何費(fèi)用和利益，非誠勿擾 。

如果你沒有添加助理老師微信，可以添加下方微信，說明要參加30天挑戰(zhàn)學(xué)習(xí)計劃，來自本站！老師會邀請你進(jìn)入學(xué)習(xí)，并給你發(fā)放相關(guān)資料。

30 天挑戰(zhàn)學(xué)習(xí)計劃 Web 前端從入門到實(shí)戰(zhàn) | arry老師的博客-艾編程

關(guān)鍵詞：方法,性能,提高,使用

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉