Question

我假设在HTML5中使用所有这些硬件加速动画，实际上不会渲染在视口外运行的动画。我希望能够发现是否发生了这种情况。

我已经尝试在一个循环中使用webkitCSSMatrix来对象每秒上下移动100px，以尝试确定每个滴答移动的像素数，但是如果没有差别的话我将动画移出视野。

有什么想法吗？

Answer 1

您可以使用单独的计时器测试来查看伪经验方在外部和内部绘制的对象的差异（计时器实际上证明除了为您提供强大的 { {3}} 的）。

但是，了解画布的工作方式也可以为您提供可靠的指针。例如，画布是一个简单的位图，没有任何内部管理（超出屏幕刷新）。这意味着你不可能实际写出超出其范围的任何东西，因为这会破坏内存。换句话说，剪辑做是出于这个非常基本的原因。

对于计时器测试，您可以运行一个简单的测试，在边界内绘制一些东西，然后在边界外绘制相同的偏移量：

更新：似乎我误解了问题是在画布位图之外，而不是在视口之外。

关于外部视口的小更新，无论是否是画布 -

描述浏览器更新比仅使用画布要复杂一些，但原则上：在屏幕上看不到的 Everything 被剪裁（未绘制）。看起来似乎很明显而且有点儿，但这并不意味着其他地方没有任何更新。

浏览器可能会也可能不会保留要绘制到屏幕上的元素的内部位图（如果部分在视图中则剪裁或在外部视图时不剪辑）。

主要区别在于，如果需要，浏览器可能（取决于实现）更新此内部位图，即使它不可见，即。受此元素位置，维度和堆栈位置影响的DOM重新流动。

出于这个原因，您可能会在某些浏览器中看到性能受到影响。浏览器还可以选择仅在可见时更新位图内容，并且仅在不显示时调整大小。

不幸的是，如果发生这种情况，测量没有准确的方法，因为它取决于许多因素（固定/绝对元素与非固定/绝对，内容，浏览器实现，硬件加速与否等等。）

canvas元素是 naiv ，因此预测很简单，但是如果在画布位于视口外部时向画布绘制某些内容，它将被绘制到其位图并在画布再次显示时显示。但是，尝试进行窗口大小调整，画布的内容将消失（在某些浏览器中），您需要重绘。这意味着在使用画布的过程中至少有一个层比其他元素更少。

我希望这有任何意义 - 我道歉，我有点没有准备好做这个解释，因为我刚才意识到我误解了这个问题。

更新结束

<强> indisium

在这个测试中，我们在内部的一个按钮处，在内部的另一个按钮处绘制10,000个填充矩形。这不是一个科学的准确测试，但它清楚地显示了一个区别，因为当绘图超出它所做的一切时，它检查绑定并且不更新位图数组中的任何内容 -

function draw(x) {

    console.time('timer');
    var cnt = 10000, w = ez.width, h = ez.height;

    while(cnt--) {
        ctx.fillRect(x, 0, w, h);
    }

    console.timeEnd('timer');
}

inside.addEventListener('click', function(){draw(0)}, false);
outside.addEventListener('click', function(){draw(ez.width)}, false);

使用控制台计时器和Chrome在我的蜗牛计算机上的结果是：