調試UI響應的CSS-css教學-PHP中文網

首頁

web前端

css教學

調試UI響應的CSS

Jennifer Aniston

Feb 18, 2025 pm 01:13 PM

本文節選自蒂芙尼·布朗撰寫的《CSS大師》一書。該書在全球各大書店有售，您也可以在此處購買電子書版本。

CSS中某些屬性和值會觸發重排（reflow），這代價高昂，可能降低用戶界面的響應速度——頁面渲染、動畫流暢度和滾動性能都會受到影響，尤其是在手機和平板電視等低功耗設備上。

什麼是重排？ {.title}

重排是指任何更改頁面部分或全部佈局的操作。例如，更改元素的尺寸或更新其左側位置。它們會導致瀏覽器重新計算文檔中其他元素的高度、寬度和位置。

重繪（repaint）與重排類似，都會強制瀏覽器重新渲染文檔的一部分。例如，當鼠標懸停在按鈕上時更改其顏色就是一個重繪操作。重繪比重排影響較小，因為它不會影響節點的尺寸或位置；但是，重繪也應盡量減少。

重排和重繪通常由DOM操作觸發，例如添加或刪除元素。但它們也可能由影響元素尺寸、可見性或位置的屬性更改引起。無論更改是由JavaScript還是基於CSS的動畫引起的，情況都是如此。

注意：頁面加載{.title}

頁面加載時，瀏覽器解析初始HTML、CSS和JavaScript，始終會觸發重排和重繪。

要完全避免項目中的重繪和重排是困難的。但是，我們可以使用時間線工具來識別它們並減少它們的影響。

時間線工具{.title}

時間線工具起初可能有點令人困惑。它們測量前端的性能，記錄各種任務完成所需的時間。通過在與頁面交互時記錄活動，我們可以找出哪些CSS代碼可能導致性能瓶頸。

要使用時間線，請點擊開發者工具界面中的時間線選項卡。在Chrome、Opera和Firefox中，它被恰當地命名為“時間線”。 Safari將其命名為複數形式“時間線”。 Internet Explorer 11 使用更具描述性的名稱“UI響應能力”。 ^[9]

在任何瀏覽器中，按“記錄”按鈕開始記錄過程。與頁面有問題的部分交互，完成後，單擊相應的按鈕停止記錄。

根據您使用的瀏覽器，您可能會立即看到數據，或者在停止記錄後看到數據。 Safari和Firefox實時顯示數據，而Chrome、Opera和Internet Explorer在您停止記錄後呈現性能圖表。

文檔加載、函數調用、DOM事件、樣式重新計算和繪製操作都會在每個瀏覽器中記錄，從而讓我們概述性能瓶頸。就CSS性能而言，我們至少要關注兩個相關的方面：

大量的樣式重新計算和繪製操作
耗時較長的操作，時間線中較大的塊表示

為了了解實際情況，我們將比較兩個基本文檔，示例A和示例B。在這兩種情況下，我們都將一系列div{.literal}元素從x位置0移動到x位置1000。兩個示例都使用CSS轉換。但是，在示例A中，我們將對left屬性進行動畫處理。在示例B中，我們將使用轉換變換並對transform屬性進行動畫處理。

兩個示例的標記相同（結果如圖3.16所示）：

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Performance example</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <button type="button" id="move">Move</button>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <🎜>
  </body>
</html>

Debugging CSS for UI Responsiveness

圖3.16. Safari瀏覽器中我們的HTML演示頁面，包含div元素

兩個文檔的JavaScript代碼也相同。單擊“移動”按鈕會在每個div元素上切換moved類：

var move = document.getElementById('move');
move.addEventListener('click', function(e) {
    var objs = document.body.querySelectorAll('div');
    Array.prototype.forEach.call(objs, function(o){
        o.classList.toggle('moved');
    });
});

我們的CSS代碼是兩者不同的部分。示例A使用的CSS如下：

div {
  background: #36f;
  margin-bottom: 1em;
  width: 30px;
  height: 30px;
  position: relative;
  left: 0;
  transition: left 2s ease-in;
}

.moved {
    left: 1000px;
}

觸發後，此動畫將在我們的時間線中生成大量樣式計算和重繪指示器。下面的圖片顯示了Safari（圖3.17）、Chrome（圖3.18）、Internet Explorer（圖3.19）和Firefox（圖3.20）中此轉換的時間線輸出。

Debugging CSS for UI Responsiveness

圖3.17. Safari瀏覽器中左側位置轉換的時間線輸出

圖3.18. Chrome瀏覽器中的相同輸出

圖3.19. Internet Explorer 11瀏覽器中左側位置轉換的時間線輸出

圖3.20. Firefox瀏覽器中的輸出

樣式計算和重繪的原因與我們正在轉換的屬性有關：left。 left屬性在更改時會觸發重排，即使更改是由動畫或轉換引起的也是如此。

現在，讓我們看一下示例B的CSS：

div {
  background: #f3f;
  margin-bottom: 1em;
  width: 30px;
  height: 30px;
  position: relative;
  left: 0;
  transition: transform 2s ease-in;
  transform: translateX(0);
}

.moved {
    transform: translateX(1000px);
}

在這裡，我們使用轉換並在translateX(0)和translateX(1000px)之間進行轉換。

在大多數瀏覽器中，轉換不會觸發重排，我們的時間線將包含更少的重繪操作。這在Safari（圖3.21）、Chrome（圖3.22）和Internet Explorer（圖3.23）中很明顯。 Firefox是例外；比較圖3.20和圖3.24。左側轉換和轉換變換的時間線非常相似。

Debugging CSS for UI Responsiveness