javascript - 检测在不可见和在视口(viewport)外时是否对canvas/css3动画进行了优化

Question

我假设使用HTML5中的所有这些硬件加速动画，实际上不会渲染在视口(viewport)之外运行的动画。我希望能够检测到是否正在发生。

我尝试在每秒移动100px的对象上循环使用webkitCSSMatrix来尝试确定每个刻度线移动了多少像素，但是如果我将动画移出视线则没有区别。

有任何想法吗？

Answer 1

您可以使用单独的计时器测试来查看伪经验方面在外部和内部绘制的对象之间的差异(计时器实际上并不能证明任何东西，但可以为您提供强大的indisium)。

但是，了解 Canvas 的工作原理也可以为您提供坚实的指导。例如， Canvas 是一个简单的位图，没有任何内部管理(屏幕刷新之外)。这意味着您不可能实际写任何超出其范围的内容，因为这会破坏内存。换句话说，由于这个非常基本的原因，会发生裁剪。

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

更新:似乎是因为我误解了这个问题，所以问题通常在 Canvas 位图之外，而不是在视口(viewport)之外。

因此，无论外部视口(viewport)是 Canvas 还是外部视口(viewport)，都进行了一次小小的更新-

描述浏览器更新的过程比仅 Canvas 要复杂一些，但原则上:屏幕上不可见的所有内容都会被裁剪(未绘制)。似乎很明显，而且有点类似，但这并不意味着其他地方没有任何更新。

浏览器可能会(也可能不会)保留要绘制到屏幕上的元素的内部位图(如果部分 View ，则将其剪裁；如果外部 View ，则将其剪断)。

主要区别在于，即使有必要，浏览器也可以(取决于实现方式)更新此内部位图，即使该位图不可见。受此元素的位置，尺寸和堆栈位置影响的DOM重排。

因此，您可能会在某些浏览器中看到性能下降的消息。浏览器还可以选择仅在可见时更新位图内容，而在不可见时仅调整大小。

不幸的是，由于它取决于许多因素(固定/绝对元素与非固定/绝对，什么内容，浏览器实现，硬件是否加速等)，因此没有准确的方法来衡量是否发生这种情况。

canvas元素是朴素的，因此很容易预测，但是如果在 Canvas 位于视口(viewport)之外时在 Canvas 上绘制一些东西，它将被绘制到其位图并在再次查看 Canvas 时显示。但是，尝试调整窗口大小， Canvas 的内容将消失(在某些浏览器中)，您将需要重新绘制。这意味着与其他元素相比， Canvas 在该过程中的参与至少少一层。

我希望这是有道理的-道歉，我有点没准备好做这个解释，因为我刚刚意识到自己误解了这个问题。

更新结束

Here is a simple online test

在此测试中，我们在一个按钮内部，另一个按钮内部绘制了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在蜗牛计算机上执行此操作的结果是:

timer: 3156.000ms
timer: 112.000ms

这是(内部:外部)3156:112的比率-或-实际绘制内容时，它花费了28倍的时间。这表明浏览器仅花费时间检查边界，但如果超出边界，则实际上不会移动内存中的任何数据。

另一种方法类似于已经回答的方法，以使用内置工具。但是为此，请使用探查器:

转到控制台，然后选择配置文件和CPU配置文件:

开始记录一个配置文件，然后单击“内部”按钮。完成后停止

开始记录第二个配置文件，然后单击“外部”按钮。完成后停止

现在您可以比较两个轮廓-对于内部图纸，我得到了以下结果:

在这里，您可以看到它使用了大约9.92％的比例绘制填充的矩形(未针对空闲时间进行调整)。

在第二个配置文件中，我得到了:

在这里只有1.24％被用来“绘制”。

比率是9.92:1.24或8倍。在这两种情况下，当您将某些内容更新到内存(位图缓冲区)而不是更新到内存时，您都可以看到性能上的巨大差异。

那么屏幕外的 Canvas 呢？这些情况也是一样，因为需要在屏幕外 Canvas 的缓冲区中更新某些内容。它保存的“唯一”内容是对浏览器主缓冲区的更新，该更新可能会或可能不会进行优化。