标签: will-change

我找到了CSS will-change^{W3.org文档,MDN docs}属性(已经在Chrome中运行,并且得到了Firefox和Opera的支持),但我不确定它是如何工作的.有没有人知道更多关于这个神秘的事情？

我刚刚读到它允许浏览器为将来的元素做计算做准备.我不想误解它.所以我有几个问题.

1. 我应该将此属性添加到元素类还是其悬停状态？

   .my-class{
       will-change: 'opacity, transform'
   }
   .my-class:hover{
       opacity: 0.5
   }
   .my-class:active{
       transform: rotate(5deg);
   }
   

   Run Code Online (Sandbox Code Playgroud)

   要么

   .my-class{
       ...
   }
   .my-class:hover{
       will-change: 'opacity'
       opacity: 0.5
   }
   .my-class:active{
       will-change: 'transform'
       transform: rotate(5deg);
   }
   

   Run Code Online (Sandbox Code Playgroud)

2. 它如何提高浏览器性能？从理论上讲,当加载CSS时,浏览器已经"知道"每个元素会发生什么,不是吗？

如果您可以添加说明如何有效使用它的任何好例子,我将不胜感激:)

看看这个CodePen,看看我的意思:

.perspective-container {
  margin: 50px 0;
  perspective: 1000px;
  perspective-origin: 0 50%;
}
.card {
  border: 10px solid blue;
  width: 300px;
  height: 300px;
  overflow: hidden;
  transform: rotateY(-45deg);
}
.card-inner {
  width: 300px;
  height: 300px;
  overflow: hidden;
}
.scroller {
  transform: translate(0, -100px);
}
.scroller-3d {
  transform: translate3d(0, -100px, 0);
}
.will-change {
  will-change: transform;
}

<h1>Incorrect (uses will-change):</h1>
<div class="perspective-container">
  <div class="card"><div class="card-inner">
    <div class="scroll-container">
      <div class="scroller will-change">
        <img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" />
      </div>
    </div>
  </div></div>
</div>
<h1>Incorrect (uses translate3d):</h1>
<div …

我有一个动画和JS用于交替2个div并改变他们的背景图像(来自几十个图像的数组),有点可互换的div.一切正常,但是当动画运行时,我可以看到我的CPU处于100%.起初我认为这可能是由于setInterval,但是当我将代码从交替图像更改为每次迭代时只增加一个数字并将其记录到控制台时 - 我看到CPU过载减少了大约40-50%.所以我明白这可能是因为动画.

这是我的HTML代码:

<div class="wallpaper wallpaper-1" id="wallpaper-1"></div>
<div class="wallpaper wallpaper-2" id="wallpaper-2"></div>

CSS:

.wallpaper {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-transform: translateZ(0);
    -webkit-animation-timing-function: linear;
}

.animate {
    -webkit-animation-name: fadeInOut;
    -webkit-animation-duration: 6s;
}

@-webkit-keyframes fadeInOut {
    0% {
        opacity: 0;
        -webkit-transform: scale(1);
    }
    16% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.1);
    }
}

和JS一起打勾:

Wallpapers.get().then(function(list) {
    var wp1, wp2, divs = [], path, bgs …

我有一个问题will-change.我不知道为什么它会导致这个问题,但是当我添加will-change包装器时,我有隐藏div的列表(应该在悬停时显示),它会显示divs.t显示部分或不显示(取决于浏览器).你知道为什么它打破了这个功能吗？

链接 - > http://jsbin.com/rukanajugi/1/edit?html,css,output

我正在尝试优化我的网络应用程序的滚动。我有包含大量数据的数据表，滚动变得非常糟糕。我添加will-change: transform到数据表中，但它破坏了我的表标题position: fixed（我将它们固定以允许它们随视口滚动）。元素根本不随视口移动，它们只是停留在文档流中。

但我偶然发现，如果我will-change:opacity改为使用，我的固定标题就可以了。有人可以解释这种行为吗？我找不到任何说明他们应该采取不同行动的文件。

这是一个代码笔，其中包含我正在谈论的示例。在值之间切换，并在蓝色 div 中滚动。 https://codepen.io/bkfarns/pen/aLYgrN

这里也是来自笔的基本代码：

html：

  <div class="container">
    <div class="fixed">should be position: fixed</div>
    <div class="too-tall">div that is too tall</div>
  </div>

css：

.container {
    margin-left: 100px;
    background-color: blue;
    width:400px;
    height:300px;
    overflow: auto;
    will-change: transform;//changing this to opacity fixes the issue
}

.fixed {
  background-color: grey;
  position: fixed;
  margin-left: 150px;
  margin-top: 100px;
}

.too-tall {
  background-color: red;
  width: 90px;
  height: 600px;
}

由于这个CSS规则,我有两个DOM元素存在于它们自己的复合层上:

.element-one, 
.element-two {
    will-change: transform;
    transform: translateZ(0); // Fallback
}

现在,我可以使用Chrome开发工具的" 显示图层边框"选项检查这些图层.

太棒了!这就是我所看到的

我熟悉橙色边框颜色,这意味着元素存在于自己的复合图层上.但绿色表示什么？

所有开发工具文档似乎都已过时.