调试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