Question

根据我的阅读，不透明度应该是要更改的save css属性。 display属性仅在动画的开头和结尾处更改。整个文档中只有几个css属性，但这只会让我感到困惑。为什么我的油漆时间仍接近60fps大关？

(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>

* edit：删除toFixed（）。执行错误但与问题无关;

* edit2：我发现添加了transform：translateZ（0）; #overlay完全删除了绘画时间。

Answer 1

CSS reflows 是CPU密集型的，因为它们是由浏览器重新呈现整个页面以更新应用于UI的任何样式引起的。 CSS重绘很好。 CSS 重绘非常好，因为浏览器只能更新已更改的元素，而且CPU密集程度要低得多。

你的60fps数字好，更多的帧意味着更流畅的动画。从快速浏览看来Chrome似乎有一个硬编码的60fps上限，Chrome将尽可能快地使用资源渲染您的动画，以实现尽可能流畅的动画，同时考虑到动画的简单性如何能够达到60fps，这个简短的动画实际上不会给你的机器带来任何重大影响（在一个简短的测试中，垃圾邮件在我的机器上发送垃圾邮件，Chrome永远不会超过4％CPU）因此不需要采取纠正措施

是什么原因导致我的页面有如此多的绘画时间？

1 个答案: