80%的前端大牛都會(huì)忽視的CSS小知識(shí)

有很多開發(fā)者并不怎么關(guān)注 CSS，我想這已經(jīng)不是什么新鮮事了。通過網(wǎng)上的各種對(duì)話，或者與朋友和同事聊天的時(shí)候你都可以觀察到這個(gè)現(xiàn)象。

然而，在社區(qū)中，我們學(xué)到的很多知識(shí)都是來自于同伴的分享，有時(shí)我會(huì)意識(shí)到很多關(guān)于 CSS 的基礎(chǔ)知識(shí)在社區(qū)中從來沒有被分享過，因?yàn)槠渌藦膩聿辉敢饣〞r(shí)間在 CSS 上深究。

為了解決這個(gè)問題，我決定對(duì) CSS 做一些研究并整理出一部分概念，我認(rèn)為這些概念對(duì)于更好地理解和編寫 CSS 代碼很有幫助。

在所有的編程語言中都有一些用來描述概念的特定術(shù)語。CSS 作為一門編程語言也是一樣的，了解這些術(shù)語對(duì)于溝通交流甚至只是為了提高自己的知識(shí)儲(chǔ)備都是很有幫助的。

后代選擇器

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


布局，繪制和渲染層合并

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

1. 布局

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

2. 繪制

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

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

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

3. 渲染成合并

在渲染層合并這個(gè)步驟中，瀏覽器需要按照正確的順序繪制圖層。因?yàn)橛幸恍┰貢?huì)發(fā)生重疊，所以這個(gè)步驟對(duì)于確保元素按照預(yù)期順序顯示非常重要。

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

CSS 性能

后代選擇器或許會(huì)非常耗能

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

例如：


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

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

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

我覺得我應(yīng)該知道這個(gè)，因?yàn)檫@個(gè)聽起來很重要，但我并不知道……

解析 CSS 時(shí)，瀏覽器會(huì)從右到左解析 CSS 選擇器。

讓我們看看下面的例子：

采取的步驟如下：

?匹配頁(yè)面上的每個(gè) <a> 元素。
?找到被 <li> 元素包裹的 <a> 元素。
?使用之前的匹配結(jié)果并將范圍縮小到那些被 <ul> 元素包裹的結(jié)果。
?最終，在上面的選項(xiàng)中篩選出那些被類名為 .container 的元素包裹的結(jié)果。
從上面的步驟我們可以看出，靠右的選擇器越具體，瀏覽器過濾和解析 CSS 屬性的效率就越高。

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

盡可能避免修改布局

更改某些 CSS 屬性可能會(huì)需要更新整個(gè)頁(yè)面的布局。

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

如果在大量的元素上更改這些屬性，那么計(jì)算和更新他們的位置/大小需要花費(fèi)很長(zhǎng)的時(shí)間。

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

在繪制方面，一些 CSS 屬性（例如：blur）會(huì)比其他屬性花費(fèi)更高的代價(jià)。可以考慮使用其他更有效的方法來實(shí)現(xiàn)相同的效果。

代價(jià)高昂的 CSS 屬性

一些 CSS 屬性會(huì)比其他屬性花費(fèi)更高的代價(jià)，這意味著他們需要更長(zhǎng)的時(shí)間來繪制。

其中一些屬性如下：

?border-radius
?box-shadow
?filter
?:nth-child
?position: fixed

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

順序

順序在 CSS 文件中很重要

讓我們看下面的 CSS 代碼：



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



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

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

網(wǎng)頁(yè)標(biāo)題：80%的前端大牛都會(huì)忽視的CSS小知識(shí)
標(biāo)題鏈接：http://www.muchs.cn/news21/255471.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、外貿(mào)建站、網(wǎng)站設(shè)計(jì)公司、自適應(yīng)網(wǎng)站、品牌網(wǎng)站制作、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)