css如何实现响应式_调试CSS以实现UI响应

css如何实现响应式

The following is an extract from our book, CSS Master, written by Tiffany Brown. Copies are sold in stores worldwide, or you can buy it in ebook form here.

以下是蒂芙尼·布朗(Tiffany Brown)所著《 CSS Master》一书的摘录。 副本在世界各地的商店中都有出售，您也可以在这里以电子书的形式购买。

CSS properties and values that trigger reflows are particularly expensive. They can slow user interface responsiveness―page rendering, animation smoothness, and scroll performance―especially on low-powered devices such as phones and smart TVs.

触发重排CSS属性和值特别昂贵。 它们会减慢用户界面的响应速度(页面渲染，动画平滑度和滚动性能)，尤其是在手机和智能电视等低功耗设备上。

什么是回流？ {。标题} (What is a reflow? {.title})

A reflow is any operation that changes the layout of part or all of a page. Examples include changing the dimensions of an element or updating its left position. They’re because they force the browser to recalculate the height, width, and position of other elements in the document.

回焊是改变的一部分或全部页面的布局进行任何操作。 示例包括更改元素的尺寸或更新其左侧位置。 这是因为它们迫使浏览器重新计算文档中其他元素的高度，宽度和位置。

Repaints are similar to reflows in that they force the browser to re-render part of the document. Changing the color of a button when in a :hover{.literal} state is one example of a repaint. They’re a bit less troublesome than reflows because they do not affect the dimensions or position of nodes; however, repaints should still be kept to a minimum.

重绘与重排相似，因为重绘会强制浏览器重新呈现文档的一部分。 在:hover {.literal}状态下更改按钮的颜色是重新绘制的一个示例。 它们比重排麻烦些，因为它们不影响节点的尺寸或位置。 但是，重涂仍应保持在最低水平。

Reflows and repaints are most often triggered by DOM operations; for example, adding to or removing elements. But they can also be caused by changes to properties that affect the dimensions, visibility, or position of an element. This is true whether the change is caused by JavaScript or a CSS-based animation.

重排和重绘通常是由DOM操作触发的； 例如，添加或删除元素。 但是它们也可能是由影响元素尺寸，可见性或位置的属性更改引起的。 无论更改是由JavaScript还是基于CSS的动画引起的，都是如此。

注意：页面加载{.title} (Note: Page Loads {.title})

Page loads will always trigger reflow and repaints as the browser parses the initial HTML, CSS, and JavaScript.

当浏览器解析初始HTML，CSS和JavaScript时，页面加载将始终触发重排并重新绘制。

It’s difficult to completely banish repaints and reflows from a project. We can, however, identify them and reduce their impact using timeline tools.

很难完全消除项目中的重绘和重排。 但是，我们可以使用时间轴工具来识别它们并减少它们的影响。

时间轴工具{.title} (Timeline Tools {.title})

Timeline tools are a bit befuddling at first. They measure the performance of your front end, capturing how much time it takes for various tasks to complete. By recording activity while interacting with our pages, we can spot what lines of our CSS may be causing performance bottlenecks.

首先，时间轴工具有些令人困惑。 它们测量您的前端性能，捕获完成各种任务所需的时间。 通过记录与页面交互时的活动，我们可以发现CSS的哪些行可能导致性能瓶颈。

To use the timeline, click the timeline tab in the developer tools interface. In Chrome, Opera, and Firefox, it’s appropriately named Timeline. Safari makes it plural, so it’s Timelines. Internet Explorer 11 uses the more descriptive UI Responsiveness.^[9]

要使用时间线，请在开发人员工具界面中单击时间线标签。 在Chrome，Opera和Firefox中，它的名称适当地称为“时间轴”。 Safari使它复数，所以它就是时间轴。 Internet Explorer 11使用更具描述性的UI响应性。 ^[9]

In any browser, press the Record button to start the recording process. Interact with the problematic portions of the page and, when you’re done, click the appropriate button to stop recording.

在任何浏览器中，按“录制”按钮即可开始录制过程。 与页面中有问题的部分进行交互，完成后，单击相应的按钮以停止记录。

Depending on which browser you use, you may see data immediately or after you stop recording. Safari and Firefox display data in real time, while Chrome, Opera, and Internet Explorer render a performance chart after you stop recording.

根据您使用的浏览器，您可能会立即或停止记录后看到数据。 Safari和Firefox实时显示数据，而Chrome，Opera和Internet Explorer在停止记录后会显示性能图表。

Document loads, function calls, DOM events, style recalculations, and paint actions are all logged in every browser, giving us an overview of performance bottlenecks. What we’re looking for, at least as far as CSS performance is concerned, are two related aspects:

文档加载，函数调用，DOM事件，样式重新计算和绘画操作都记录在每个浏览器中，从而使我们大致了解了性能瓶颈。 至少就CSS性能而言，我们正在寻找的是两个相关方面：

• large numbers of style recalculation and paint operations

  大量的样式重新计算和绘制操作

• operations that take a long time, as indicated by larger blocks in the timeline

  耗时较长的操作，如时间线中较大的方框所示

To see what this looks like in practice, we’ll compare two basic documents, Examples A and B. In both cases, we’re moving a series of div{.literal} elements from an x-position of zero to an x-position of 1,000. Both examples use CSS transitions. In Example A, however, we’re going to animate the left{.literal} property. In Example B, we’re going to use a translation transform and animate the transform{.literal} property.

为了查看实际情况，我们将比较两个基本文档，示例A和B。在这两种情况下，我们都将一系列div {.literal}元素从x位置的零位置移动到x- 1000的位置。 这两个示例都使用CSS过渡。 但是，在示例A中，我们将为left {.literal}属性设置动画。 在示例B中，我们将使用翻译转换并为transform {.literal}属性设置动画。

Our markup for both is the same (the result can be seen in Figure 3.16):

两者的标记是相同的(结果如图3.16所示)：

<!DOCTYPE html> 
  <html lang="en-US"> 
  <head> 
    <meta charset="utf-8"> 
    <title>Performance example</title> 
    <style type="text/css"
     > /* CSS will go here. */ 
    </style> 
 </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> 

<script type="text/javascript" src="toggle-move-class.js"> ↵</script> 
</body> 
</html>

Figure 3.16. Our HTML demo page of div elements in Safari

图3.16。 我们的Safari中div元素HTML演示页

Our JavaScript for both documents is also the same. Clicking the Move button toggles the moved{.literal} class on each div{.literal} element:

两个文档JavaScript也相同。 单击“移动”按钮可在每个div {.literal}元素上切换已moved {.literal}类：

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

Our CSS is where matters diverge. The CSS used in Example A follows:

我们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;
}

When triggered, this animation will generate a lot of style calculation and repaint indicators in our timeline. The images that follow show timeline output for this transition in Safari (Figure 3.17), Chrome (Figure 3.18), Internet Explorer (Figure 3.19), and Firefox (Figure 3.20)

触发后，此动画将在我们的时间轴中生成大量样式计算和重新绘制指示器。 后面的图像显示了Safari(图3.17)，Chrome(图3.18)，Internet Explorer(图3.19)和Firefox(图3.20)中此过渡的时间轴输出。

Figure 3.17. Safari timeline output for left-position transition

图3.17。 Safari时间线输出，用于左移过渡

Figure 3.18. The same again in Chrome

图3.18。 在Chrome中也一样

Figure 3.19. Internet Explorer 11 timeline output for left-position transition

图3.19。 Internet Explorer 11时间线输出，用于向左转换

Figure 3.20. And how it looks in Firefox

图3.20。 以及它在Firefox中的外观

The reason for the style calculations and repaints has to do with the property we’re transitioning: left{.literal}. The left{.literal} property triggers a reflow whenever it is changed, even if that change is caused by an animation or transition.

进行样式计算和重新绘制的原因与我们正在转换的属性有关： left {.literal}。 left {.literal}属性只要更改就触发重排，即使该更改是由动画或过渡引起的。

Now, let’s take a look at the CSS for Example B:

现在，让我们看一下示例BCSS：

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);
}

Here we’re using a transform and transitioning between translateX(0){.literal} and translateX(1000px){.literal}.

在这里，我们使用translateX(0) {.literal}和translateX(1000px) 1000px translateX(0) {.literal}之间的转换和过渡。

In most browsers, transforms don’t trigger reflows, and our timelines will contain far fewer repaint operations. This is evident in Safar (Figure 3.21), Chrome (Figure 3.22), and Internet Explorer (Figure 3.23). Firefox is the exception here; compare Figure 3.20 to Figure 3.24. The timelines for a left transition and a translation transformation are very similar.

在大多数浏览器中，转换不会触发重排，并且我们的时间轴将包含更少的重绘操作。 这在Safar(图3.21)，Chrome(图3.22)和Internet Explorer(图3.23)中很明显。 Firefox是这里的例外。 比较图3.20和图3.24。 left过渡和翻译转换的时间线非常相似。

Figure 3.21. Safari timeline output for a transition of the -webkit-transform property

图3.21。 Safari时间线输出，用于-webkit-transform属性的过渡

Figure 3.22. The same for Chrome, this time utilizing the transform property

图3.22。 对于Chrome同样如此，这次使用了transform属性

Figure 3.23. How it looks in Internet Explorer 11

图3.23。 在Internet Explorer 11中的外观

Figure 3.24. Firefox timeline output for a transition of the transform property

图3.24。 Firefox时间轴输出，用于转换属性

识别要删除的行{.title} (Identifying Lines to Remove {.title})

Unfortunately, there is no definitive list of which properties cause reflows and repaints. Paul Lewis’ CSS Triggers comes closest, but it’s Chrome-specific. Browsers do behave similarly for many of these properties, however, so this resource will at least give you an idea of what properties may be causing trouble.

不幸的是，没有确定哪些属性导致重排和重绘的明确列表。 Paul Lewis的CSS Triggers最接近，但特定于Chrome。 浏览器对于这些属性中的许多属性确实具有相似的行为，因此，该资源至少会使您了解哪些属性可能会引起麻烦。

Once you know which properties could be problematic, the next step is to test the hypothesis. Disable that property―either with a comment or by adding a temporary x-{.literal} prefix―and rerun the timeline test.

一旦知道了哪些属性可能有问题，下一步就是检验假设。 禁用该属性(通过添加注释或添加临时x- {.literal}前缀)，然后重新运行时间轴测试。

Remember that performance is relative, not absolute or perfect. The goal is improvement: make it perform better that it did before. If a property or effect is performing unacceptably slow, eliminate it altogether.

请记住，性能是相对的，不是绝对的或完美的。 目标是改进：使其性能比以前更好。 如果某个属性或效果的执行速度令人无法接受，请完全消除它。

翻译自: https://www.sitepoint.com/debugging-css-for-ui-responsiveness/

css如何实现响应式