80%的前端大牛都會忽視的CSS 小知識
有很多開發者並不怎麼關注 CSS,我想這已經不是什麼新鮮事了。透過網上的各種對話,或者與朋友和同事聊天的時候你都可以觀察到這個現象。
然而,在社群中,我們學到的很多知識都是來自於同伴的分享,有時我會意識到很多關於 CSS 的基礎知識在社群中從來沒有被分享過,因為其他人從來不願意花時間在 CSS 上深究。
為了解決這個問題,我決定對 CSS 做一些研究並整理出一部分概念,我認為這些概念對於更好地理解和編寫 CSS 程式碼很有幫助。
這份清單肯定沒有那麼全面,它只包含了過去幾天我學到的新知識,分享出來希望能夠幫助到大家。
在所有的程式語言中都有一些用來描述概念的特定術語。CSS 作為一門程式語言也是一樣的,瞭解這些術語對於溝通交流甚至只是為了提高自己的知識儲備都是很有幫助的。
後代選擇器
你知道樣式選擇器中間的小空格嗎?它實際上還有一個名字,它的名字是 後代選擇器 。
佈局,繪製和渲染層合併
這些術語更多地和瀏覽器渲染有關,但它仍然很重要,因為一些 CSS 屬性會影響渲染程式的不同步驟。
有句話叫做“方法不對,努力白費”所有的前端大神都有自己的學習方法,而學web前端的學習也基本一致,而對於一個什麼都不懂的初學者,根本不會知道該怎麼學,這也是造成失敗的最直接原因。所以學web前端一定要有人指點。如果你處在迷茫期,找不到方向。可以加入我們的前端學習交流qun: 784783012 。有任何不明白的東西隨時來問我。點選: 前端學習圈
1. 佈局
佈局步驟負責計算元素在螢幕上佔用的空間大小。修改 CSS 中的“佈局”屬性(例如:寬度、高度)意味著瀏覽器需要檢查其他所有的元素並“重排”頁面,也就是說重新繪製受影響的區域並將他們合併在一起。
2. 繪製
此過程是為元素的視覺化部分(顏色、邊框等)填充畫素的過程。繪製元素通常在多個圖層上完成。
改變“繪製”屬性不會影響頁面的佈局,所以瀏覽器會跳過佈局步驟但仍然會執行繪製。
繪製經常是整個渲染程式中代價最昂貴的部分。
3. 渲染成合並
在渲染層合併這個步驟中,瀏覽器需要按照正確的順序繪製圖層。因為有一些元素會發生重疊,所以這個步驟對於確保元素按照預期順序顯示非常重要。
如果你改變了一個既不需要佈局也不需要繪製的 CSS 屬性,那麼瀏覽器只需要做渲染層合併操作。
CSS 效能
後代選擇器或許會非常耗能
取決於程式的大小,僅僅使用沒有什麼特殊性的後代選擇器代價會非常昂貴。瀏覽器會檢查每個後代元素是否匹配,因為後代這種關係不僅限於父子之間。
例如:
瀏覽器會評估頁面上的所有連結,最終定位到那個實際位於
#nav
元素內的連結。
一種更高效的方法是在
#nav
元素中的每個
<a>
元素上新增一個特定的
.navigation-link
選擇器。
瀏覽器從右到左讀取選擇器
我覺得我應該知道這個,因為這個聽起來很重要,但我並不知道……
解析 CSS 時,瀏覽器會從右到左解析 CSS 選擇器。
讓我們看看下面的例子:
採取的步驟如下:
-
匹配頁面上的每個
<a>
元素。 -
找到被
<li>
元素包裹的<a>
元素。 -
使用之前的匹配結果並將範圍縮小到那些被
<ul>
元素包裹的結果。 -
最終,在上面的選項中篩選出那些被類名為
.container
的元素包裹的結果。
從上面的步驟我們可以看出,靠右的選擇器越具體,瀏覽器過濾和解析 CSS 屬性的效率就越高。
為了提高上面例子的效能,我們可以在
<a>
標籤上面新增類似
.container-link-style
的類名來替換
.container ul li a
。
儘可能避免修改佈局
更改某些 CSS 屬性可能會需要更新整個頁面的佈局。
例如,
width
、
height
、
top
、
left
(也稱為“幾何屬性”)等屬性就需要重新計算佈局和更新渲染樹。
如果在大量的元素上更改這些屬性,那麼計算和更新他們的位置/大小需要花費很長的時間。
小心繪製的複雜性
在繪製方面,一些 CSS 屬性(例如:blur)會比其他屬性花費更高的代價。可以考慮使用其他更有效的方法來實現相同的效果。
代價高昂的 CSS 屬性
一些 CSS 屬性會比其他屬性花費更高的代價,這意味著他們需要更長的時間來繪製。
其中一些屬性如下:
-
border-radius
-
box-shadow
-
filter
-
:nth-child
-
position: fixed
這並不意味著你根本不應該使用他們,但你應該明白,如果一個元素使用其中某些屬性並將渲染數百次,會影響到渲染效能。
順序
順序在 CSS 檔案中很重要
讓我們看下面的 CSS 程式碼:
然後再來看看這段 HTML 程式碼:
我們會發現影響渲染效果的不是選擇器在 HTML 程式碼中出現的順序,而是選擇器在 CSS 檔案中出現的順序。
評估 CSS 效能的一個好方法是使用瀏覽器的開發者工具。
如果你使用的是 Chrome 或者 Firefox,可以開啟開發者工具,轉到 Performance 標籤,並記錄當你載入頁面或與頁面互動時發生的情況。
資源
在為這篇文章做研究時,我遇到了一些非常有意思的工具,如下所示:
CSS Triggers —— 該網站列出了一些 CSS 屬性,以及在應用程式中使用和修改這些屬性對效能的影響。
Uncss —— 一種可以從 CSS 檔案中刪除未使用的樣式的工具。
Css-explain —— 一種可以解釋 CSS 選擇器的小工具。
Fastdom —— 批處理 DOM 讀/寫操作的工具,可以加快佈局效能。
差不多就是這樣啦!希望它有意義!
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69901074/viewspace-2640760/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 【前端詞典】幾個有益的 CSS 小知識前端CSS
- 前端須知的 Cookie 知識小結前端Cookie
- 前端小知識點前端
- CSS小知識點一CSS
- Web前端之HTML+CSS的知識總結Web前端HTMLCSS
- 這些鮮為人知的前端冷知識,你都GET了嗎?前端
- 前端小知識點彙總前端
- 前端(js html)小知識點前端JSHTML
- 前端小知識--JavaScript事件流前端JavaScript事件
- 前端-html和css基礎知識前端HTMLCSS
- 【Web前端基礎知識】css表示顏色的方法Web前端CSS
- 前端開發必會的10個知識點前端
- 大前端開發人員必知必會的HTTP知識前端HTTP
- 前端基礎知識複習之CSS前端CSS
- 前端開發知識點之 html &css前端HTMLCSS
- 2021年你需要掌握的前端小知識前端
- 關於前端應該知道的5個小知識前端
- 【愣錘筆記】能解決80%場景的Git必會知識點筆記Git
- 【Web前端基礎知識】CSS的定位機制之定位Web前端CSS
- 阿里巴巴java開發手冊容易忽視的幾個知識點阿里Java
- 【譯】從沒有人告訴過我的 CSS 小知識CSS
- [譯] 從沒有人告訴過我的 CSS 小知識CSS
- 不可忽視的前端安全問題——XSS攻擊前端
- 前端知識點小結--node、express、mongodb前端ExpressMongoDB
- 前端進階-個人筆記-小知識前端筆記
- 前端開發基礎知識整理–css篇前端CSS
- 每個前端工程師都應該瞭解的圖片知識前端工程師
- 不要忽視Web程式設計中的小細節Web程式設計
- Mybatis中的小知識MyBatis
- VEEAM的小知識點
- 前端開發者都應知道的 jQuery 小技巧前端jQuery
- CSS知識CSS
- Go 語言切片的三種特殊狀態 —— 90% 的開發者都忽視了Go
- 冷門前端知識,介紹雙執行緒的小程式!前端執行緒
- 你不一定知道的幾個前端小知識前端
- 80%的前端程式設計師都遇到的問題,你中招了嗎?前端程式設計師
- 前端小知識--從Javascript閉包看let前端JavaScript
- 前端筆記(關於css盒模型知識整理)前端筆記CSS模型