關(guān)于 CSS 的那些事兒，我從未被告知

CSS 性能

CSS 性能是一個非常重要的話題，因為它直接影響網(wǎng)站的效率。由于現(xiàn)代應(yīng)用程序包含大量的 CSS 代碼，即使是微小的錯誤也可能導(dǎo)致顯著的性能下降。

首先，下面賂你展示一些令我驚訝的東西。只需看看下面的例子，試著找出可能的問題。

正如你所看到的，這個例子一點都不復(fù)雜。這段 CSS 代碼移除了標(biāo)題中所有段落內(nèi)鏈接的文本裝飾。這不是普通的 CSS 嗎？

但你知道使用這樣的選擇器會導(dǎo)致瀏覽器執(zhí)行大量額外工作嗎？這個問題適用于我們代碼中所有類似的子選擇器。

這是因為瀏覽器在解析 CSS 時，從右向左讀取選擇器。有了這個新知識，我們將這個過程分解成幾個步驟：

通過使用更具體的選擇器，我們可以幫助瀏覽器避免所有這些額外的工作。我們可以將 .header__link 類應(yīng)用于錨元素，并用它替換選擇器 #header p a。這樣，瀏覽器會更快地找到所需的元素。

所謂昂貴的 CSS 屬性，是指這些屬性在我們的應(yīng)用程序中可能會耗費大量性能。但這并不意味著你完全不能使用它們。你只需要理解，如果元素使用了這些屬性并且經(jīng)常渲染——它肯定會影響性能。

需要注意的一件棘手事情是，改變某些 CSS 屬性需要更新整個布局。幾何屬性如寬度、高度、頂部等可能導(dǎo)致整個樹的重新繪制。

還有一些屬性很難渲染。雖然這些屬性的清單很短，但你可以在這里了解更多關(guān)于它們的信息。

重繪（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 的視覺表示。
對于渲染樹中的每個元素，計算其在頁面上的位置，并進(jìn)行布局。瀏覽器使用流方法，通常一個操作就足以放置所有元素。例如，表格需要更多的操作。
最后，所有元素在瀏覽器中被渲染，并且繪制完成。

當(dāng)頁面首次加載時，如果不是空的，至少會執(zhí)行一次重排和重繪。但它們也會在以下情況下繼續(xù)發(fā)生：

重排是計算網(wǎng)頁上元素布局的過程。它根據(jù)元素的內(nèi)容和樣式來確定每個元素的大小和位置。

在現(xiàn)代應(yīng)用程序中，特別是頁面上有成千上萬個元素和頻繁的布局更新時，它很快會變成一個資源消耗大的操作。即使是對文檔中單個元素的重排，也可能需要重排其父元素和隨后的任何其他元素。

由于它是一個用戶阻塞操作，了解如何改進(jìn)重排以及各種文檔屬性對其持續(xù)時間的影響是非常有用的。典型的引發(fā)重排過程的情況通常有：

重繪是將像素繪制到屏幕上的簡單過程。在重排期間確定布局后，瀏覽器將每個元素繪制到屏幕上。

重繪通常比重排消耗的資源少，但它仍然會影響網(wǎng)頁的性能。

最典型的情況是當(dāng)元素樣式的變化不影響其在屏幕上的大小或位置時。例如，當(dāng)背景顏色改變時，瀏覽器只需用新樣式重新繪制（或重繪）節(jié)點。

以下是一些會觸發(fā)重繪的操作的例子：

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 的情況。