javascript - 是什么导致我的页面有如此多的绘制时间？

Question

根据我的阅读，不透明度应该是要更改的保存 css 属性。 display 属性仅在动画开始和结束时发生变化。整个文档中只有几个 css 属性，但这让我感到困惑。为什么我的绘画时间仍然接近 60fps 标记？

My paint graph

(function() {
  var lastTime = 0;
  var vendors = ['webkit', 'moz'];
  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
    window.cancelAnimationFrame =
      window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
  }

  if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() {
          callback(currTime + timeToCall);
        },
        timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };

  if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
}());

function ease(t) {
  return t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t
}

(function(w, d) {

  var toggle = 0,
    fadeId,
    overlay = d.getElementById('overlay'),
    o_style = overlay.style;

  function addEvent(elm, evt, fnc) {
    return w.addEventListener ? elm.addEventListener(evt, fnc, false) : elm.attachEvent(evt, fnc);
  }

  var cur_opacity = 0,
    factor = 400,
    start_time,
    time_Δ,
    dur,
    b,
    Δ;

  function loop(time) {

    if (!start_time) start_time = time; // set time if not set

    time_Δ = time - start_time + 16; // calculate passed time

    cur_opacity = ease(time_Δ / dur) * Δ + b;
    // calculate opacity

    if (time_Δ < dur) {
      fadeId = requestAnimationFrame(loop);
    } else {
      if (Δ > 0) {
        cur_opacity = 1;
      } else {
        cur_opacity = 0;
        o_style.display = 'none';
      }
    }

    o_style.opacity = cur_opacity;

  }

  function fade() {
    if (fadeId) cancelAnimationFrame(fadeId);
    toggle ? toggle = 0 : toggle = 1;

    b = cur_opacity; // set current opacity as base
    Δ = toggle - cur_opacity; // set change we make
    dur = factor * Math.abs(Δ); // set the animation duration

    start_time = 0; // reset time
    o_style.display = 'block'; // always show overlay first
    fadeId = requestAnimationFrame(loop); // init animation
  }

  addEvent(d, 'click', function(event) {
    if (fadeId) cancelAnimationFrame(fadeId);
    fadeId = requestAnimationFrame(fade);
  })

}(window, document))

html,
body {
  margin: 0;
  padding: 0;
  background: #444;
  height: 100%;
}
#overlay {
  background: #fff;
  height: 100%;
  opacity: 0;
}

<div id="overlay"></div>

*编辑:删除了 toFixed()。实现错误但与问题无关；

*edit2:我发现添加 transform:translateZ(0); #overlay 完全删除了绘制时间。

Answer 1

CSS 回流 是 CPU 密集型的，因为浏览器必须重新呈现整个页面才能更新应用到 UI 的任何样式。 CSS 重绘很好。 CSS Repaints 非常好，因为浏览器能够仅更新已更改的元素，而且 CPU 占用率大大降低。

您的 60fps 数字很好，更多的帧意味着更流畅的动画。快速浏览一下，Chrome 似乎有一个硬编码的 60fps 上限，Chrome 会尽可能快地使用可用资源渲染动画，以实现尽可能流畅的动画，同时牢记动画的简单性以及它能够达到 60fps 的持续性如何这个简短的动画实际上不太可能对你的机器产生任何影响(在一个简短的测试中，在我的机器上发送垃圾邮件，Chrome 永远不会超过 4％的 CPU)因此不需要采取纠正措施.