關(guān)于 CSS 的那些事兒,我從未被告知
CSS 是一種美麗且復(fù)雜的技術(shù),我們每天在工作中都會用到。然而,包括我在內(nèi)的許多開發(fā)者都忽略了它的一些重要方面。
這很明顯,因為在互聯(lián)網(wǎng)上很難找到關(guān)于 CSS 的新知識或高級內(nèi)容。大多數(shù)內(nèi)容創(chuàng)作者只寫一些熱門話題,比如新語言、框架和庫。
個人對 CSS 的了解僅限于讓它正常工作。而這特別令人遺憾,因為我們從未嘗試深入研究這個主題。認識到這一點后,做了一些研究,并列出了一些新發(fā)現(xiàn)的內(nèi)容。
CSS 性能
CSS 性能是一個非常重要的話題,因為它直接影響網(wǎng)站的效率。由于現(xiàn)代應(yīng)用程序包含大量的 CSS 代碼,即使是微小的錯誤也可能導(dǎo)致顯著的性能下降。
子選擇器
首先,下面賂你展示一些令我驚訝的東西。只需看看下面的例子,試著找出可能的問題。
正如你所看到的,這個例子一點都不復(fù)雜。這段 CSS 代碼移除了標(biāo)題中所有段落內(nèi)鏈接的文本裝飾。這不是普通的 CSS 嗎?
但你知道使用這樣的選擇器會導(dǎo)致瀏覽器執(zhí)行大量額外工作嗎?這個問題適用于我們代碼中所有類似的子選擇器。
這是因為瀏覽器在解析 CSS 時,從右向左讀取選擇器。有了這個新知識,我們將這個過程分解成幾個步驟:
- 瀏覽器找到頁面上所有的 <a> 標(biāo)簽。
- 然后它找到包含在段落中的所有錨點。
- 最后,它將找到的集合縮小到僅包含在 #header 元素內(nèi)的錨點。
通過使用更具體的選擇器,我們可以幫助瀏覽器避免所有這些額外的工作。我們可以將 .header__link 類應(yīng)用于錨元素,并用它替換選擇器 #header p a。這樣,瀏覽器會更快地找到所需的元素。
昂貴的 CSS 屬性
所謂昂貴的 CSS 屬性,是指這些屬性在我們的應(yīng)用程序中可能會耗費大量性能。但這并不意味著你完全不能使用它們。你只需要理解,如果元素使用了這些屬性并且經(jīng)常渲染——它肯定會影響性能。
需要注意的一件棘手事情是,改變某些 CSS 屬性需要更新整個布局。幾何屬性如寬度、高度、頂部等可能導(dǎo)致整個樹的重新繪制。
還有一些屬性很難渲染。雖然這些屬性的清單很短,但你可以在這里了解更多關(guān)于它們的信息。
- border-radius
- box-shadow
- filter
- :nth-child
- position: fixed
重繪和重排
重繪(Repaint)和重排(Reflow)是在瀏覽器中渲染網(wǎng)頁過程中兩個重要的概念。當(dāng)頁面加載或更新時,瀏覽器會通過一系列步驟將內(nèi)容顯示在屏幕上,而重繪和重排在這個過程中起著重要作用。
為了更好地理解這個過程,我們可以將其分解為幾個精確的步驟:
- 從服務(wù)器下載的 HTML 文檔用于構(gòu)建文檔對象模型(DOM)。
- 樣式被加載和識別,創(chuàng)建 CSS 對象模型(CSSOM)。
- 基于 DOM 和 CSSOM,形成一個渲染樹,這是一個渲染對象的集合。渲染樹復(fù)制了 DOM 的結(jié)構(gòu),但不可見的元素(例如 <head> 或 display: none 的元素)不包含在內(nèi)。換句話說,渲染樹描述了 DOM 的視覺表示。
- 對于渲染樹中的每個元素,計算其在頁面上的位置,并進行布局。瀏覽器使用流方法,通常一個操作就足以放置所有元素。例如,表格需要更多的操作。
- 最后,所有元素在瀏覽器中被渲染,并且繪制完成。
當(dāng)頁面首次加載時,如果不是空的,至少會執(zhí)行一次重排和重繪。但它們也會在以下情況下繼續(xù)發(fā)生:
- 當(dāng)由于節(jié)點的寬度、高度或其他坐標(biāo)的變化,樹的一部分需要重新計算時,會觸發(fā)重排事件。
- 當(dāng)由于變化,一些顯示的內(nèi)容必須更新時,這主要適用于諸如背景顏色、半徑等樣式屬性,會觸發(fā)重繪事件。
- 此外,當(dāng)發(fā)生重排事件時,總是會伴隨一個重繪事件。而重繪則可以獨立于重排觸發(fā)。
關(guān)于重排
重排是計算網(wǎng)頁上元素布局的過程。它根據(jù)元素的內(nèi)容和樣式來確定每個元素的大小和位置。
在現(xiàn)代應(yīng)用程序中,特別是頁面上有成千上萬個元素和頻繁的布局更新時,它很快會變成一個資源消耗大的操作。即使是對文檔中單個元素的重排,也可能需要重排其父元素和隨后的任何其他元素。
由于它是一個用戶阻塞操作,了解如何改進重排以及各種文檔屬性對其持續(xù)時間的影響是非常有用的。典型的引發(fā)重排過程的情況通常有:
- 對 DOM 的不同操作。例如,添加、刪除和更改節(jié)點。
- 元素內(nèi)容的變化,甚至包括表單字段中的文本。
- 計算(getComputedStyle)或修改 CSS 屬性。
- 對元素類的操作。
- 瀏覽器窗口的操作(調(diào)整大小、滾動)。
- 偽類的激活。:hover 就是一個很好的例子。
關(guān)于重繪
重繪是將像素繪制到屏幕上的簡單過程。在重排期間確定布局后,瀏覽器將每個元素繪制到屏幕上。
重繪通常比重排消耗的資源少,但它仍然會影響網(wǎng)頁的性能。
最典型的情況是當(dāng)元素樣式的變化不影響其在屏幕上的大小或位置時。例如,當(dāng)背景顏色改變時,瀏覽器只需用新樣式重新繪制(或重繪)節(jié)點。
以下是一些會觸發(fā)重繪的操作的例子:
- 改變元素的可見性。
- 改變元素的輪廓。
- 改變背景。
CSS 可以替代 JS 的地方
JavaScript 和 CSS 是非常棒的技術(shù),尤其是在一起使用時。每種技術(shù)都有其獨特的優(yōu)勢,結(jié)合使用時可以創(chuàng)造出令人難以置信的效果。
然而,我可以自信地說,UI 控制中使用 CSS 越多,Web 應(yīng)用程序就越容錯和可靠。
觀點很簡單:
- CSS 本身是一種安全技術(shù)。當(dāng) CSS 解析器遇到無效屬性時,它會簡單地忽略并繼續(xù)。
- JavaScript 不是一種安全技術(shù)。JS 代碼中的單個語法錯誤可能導(dǎo)致整個應(yīng)用程序失敗。換句話說,當(dāng)使用 JS 控制樣式時,確保相應(yīng)構(gòu)造的功能正常工作是至關(guān)重要的。
現(xiàn)在讓我們考慮一些你可以輕松用 CSS 替代 JS 的情況。
平滑滾動
以前,要實現(xiàn)平滑滾動,需要使用幾行 JavaScript 代碼。但現(xiàn)在,這個任務(wù)可以完全通過 CSS 的力量來解決。
現(xiàn)在你可以通過使用 CSS 屬性 scroll-behavior 來實現(xiàn)平滑滾動。
文本處理
CSS 提供了兩個很棒的屬性:text-overflow 和 line-clamp。它們允許我們修剪文本,同時讓我們擺脫使用 JavaScript 代碼或其他復(fù)雜方法來執(zhí)行此類任務(wù)。這兩個屬性雖然不是新的,但非常有用。
text-overflow 屬性
這個屬性控制文本在不適合一行的情況下如何顯示。這個屬性的一個完美例子是在卡片標(biāo)題中使用 text-overflow: ellipsis,它會在被截斷的文本末尾顯示一個 Unicode 字符 …。
請記住,text-overflow: ellipsis 只有在與 white-space: nowrap 和 overflow: hidden 屬性配合使用時才有效。
line-clamp 屬性
line-clamp 屬性在需要處理多行文本時非常有用。上面示例中的卡片描述展示了它的效果。
這個屬性是 CSS Overflow Module Level 3 標(biāo)準(zhǔn)的一部分,雖然目前還處于草案階段,但已經(jīng)有大約 95% 的瀏覽器支持這個屬性,但需要加上 -webkit- 前綴。
在使用它之前,重要的是要提到它不允許控制顯示字符的數(shù)量。但它仍然非常有用。
要使用 line-clamp 屬性,我們需要將其與 display: -webkit-box 和 -webkit-box-orient: vertical 結(jié)合使用。示例如下:
總結(jié)
現(xiàn)代前端開發(fā)的世界正在迅速變化,我們不斷得到新的機會來幫助我們更快、更好地完成工作。嘗試使用 CSS 是非常有趣且有幫助的。如果在不使用 JS 的情況下可以實現(xiàn)相同的結(jié)果,請考慮使用 CSS。