分享容易忽視的CSS小知識

本篇內(nèi)容主要講解“分享容易忽視的CSS小知識”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“分享容易忽視的CSS小知識”吧!

后代選擇器

你知道樣式選擇器中間的小空格嗎？它實際上還有一個名字，它的名字是后代選擇器。

布局，繪制和渲染層合并

這些術(shù)語更多地和瀏覽器渲染有關(guān)，但它仍然很重要，因為一些 CSS 屬性會影響渲染進程的不同步驟。

有句話叫做“方法不對，努力白費”所有的前端大神都有自己的學(xué)習(xí)方法，而學(xué)web前端的學(xué)習(xí)也基本一致，而對于一個什么都不懂的初學(xué)者，根本不會知道該怎么學(xué)，這也是造成失敗的最直接原因。所以學(xué)web前端一定要有人指點。如果你處在迷茫期，找不到方向。可以加入我們的前端學(xué)習(xí)交流qun： 784783012 。有任何不明白的東西隨時來問我。點擊： 前端學(xué)習(xí)圈

1. 布局

布局步驟負責(zé)計算元素在屏幕上占用的空間大小。修改 CSS 中的“布局”屬性（例如：寬度、高度）意味著瀏覽器需要檢查其他所有的元素并“重排”頁面，也就是說重新繪制受影響的區(qū)域并將他們合并在一起。

2. 繪制

此過程是為元素的可視化部分（顏色、邊框等）填充像素的過程。繪制元素通常在多個圖層上完成。

改變“繪制”屬性不會影響頁面的布局，所以瀏覽器會跳過布局步驟但仍然會執(zhí)行繪制。

繪制經(jīng)常是整個渲染進程中代價最昂貴的部分。

3. 渲染成合并

在渲染層合并這個步驟中，瀏覽器需要按照正確的順序繪制圖層。因為有一些元素會發(fā)生重疊，所以這個步驟對于確保元素按照預(yù)期順序顯示非常重要。

如果你改變了一個既不需要布局也不需要繪制的 CSS 屬性，那么瀏覽器只需要做渲染層合并操作。

CSS 性能

后代選擇器或許會非常耗能

取決于程序的大小，僅僅使用沒有什么特殊性的后代選擇器代價會非常昂貴。瀏覽器會檢查每個后代元素是否匹配，因為后代這種關(guān)系不僅限于父子之間。

例如：

瀏覽器會評估頁面上的所有鏈接，最終定位到那個實際位于 #nav 元素內(nèi)的鏈接。

一種更高效的方法是在 #nav 元素中的每個 <a> 元素上添加一個特定的 .navigation-link 選擇器。

瀏覽器從右到左讀取選擇器

我覺得我應(yīng)該知道這個，因為這個聽起來很重要，但我并不知道……

解析 CSS 時，瀏覽器會從右到左解析 CSS 選擇器。

讓我們看看下面的例子：

采取的步驟如下：

• 匹配頁面上的每個 <a> 元素。

• 找到被 <li> 元素包裹的 <a> 元素。

• 使用之前的匹配結(jié)果并將范圍縮小到那些被 <ul> 元素包裹的結(jié)果。

• 最終，在上面的選項中篩選出那些被類名為 .container 的元素包裹的結(jié)果。

從上面的步驟我們可以看出，靠右的選擇器越具體，瀏覽器過濾和解析 CSS 屬性的效率就越高。

為了提高上面例子的性能，我們可以在 <a> 標(biāo)簽上面添加類似 .container-link-style 的類名來替換 .container ul li a。

盡可能避免修改布局

更改某些 CSS 屬性可能會需要更新整個頁面的布局。

例如，width、height、top、left（也稱為“幾何屬性”）等屬性就需要重新計算布局和更新渲染樹。

如果在大量的元素上更改這些屬性，那么計算和更新他們的位置/大小需要花費很長的時間。

小心繪制的復(fù)雜性

在繪制方面，一些 CSS 屬性（例如：blur）會比其他屬性花費更高的代價?？梢钥紤]使用其他更有效的方法來實現(xiàn)相同的效果。

代價高昂的 CSS 屬性

一些 CSS 屬性會比其他屬性花費更高的代價，這意味著他們需要更長的時間來繪制。

其中一些屬性如下：

• border-radius

• box-shadow

• filter

• :nth-child

• position: fixed

這并不意味著你根本不應(yīng)該使用他們，但你應(yīng)該明白，如果一個元素使用其中某些屬性并將渲染數(shù)百次，會影響到渲染性能。

順序

順序在 CSS 文件中很重要

讓我們看下面的 CSS 代碼：

然后再來看看這段 HTML 代碼：

我們會發(fā)現(xiàn)影響渲染效果的不是選擇器在 HTML 代碼中出現(xiàn)的順序，而是選擇器在 CSS 文件中出現(xiàn)的順序。

評估 CSS 性能的一個好方法是使用瀏覽器的開發(fā)者工具。

如果你使用的是 Chrome 或者 Firefox，可以打開開發(fā)者工具，轉(zhuǎn)到 Performance 標(biāo)簽，并記錄當(dāng)你加載頁面或與頁面互動時發(fā)生的情況。

到此，相信大家對“分享容易忽視的CSS小知識”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！