检测canvas/css3动画在不可见时和视口外是否正在优化

Question

检测canvas/css3动画在不可见时和视口外是否正在优化

Dha*_*run 5 javascript performance canvas html5-canvas

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

我尝试webkitCSSMatrix在一个循环中使用每秒上下移动100px的对象来尝试确定每个刻度移动的像素数,但如果我将动画移出视图则没有区别.

有任何想法吗？

Answer 1

小智 6

您可以使用单独的计时器测试来查看伪经验方面在外部和内部绘制的对象的差异(计时器实际上不会证明任何东西,但会给您带来强烈的冲突).

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

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

更新:似乎我误解了问题是在画布位图之外,而不是在视口之外.

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

描述浏览器更新比仅使用画布要复杂一些,但原则上:屏幕上看不到的所有内容都被剪裁(未绘制).看起来似乎很明显而且有点类似,但这并不意味着其他地方没有任何更新.

浏览器可能会也可能不会保留要绘制到屏幕的元素的内部位图(如果部分在视图中则剪裁,如果在外部视图则根本不剪辑).

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

因此,您可能会在某些浏览器中看到性能受损.浏览器还可以选择仅在可见时更新位图内容,并且仅在不显示时调整大小.

遗憾的是,没有准确的方法来衡量是否会发生这种情况,因为它取决于许多因素(固定/绝对元素与非固定/绝对元素,内容,浏览器实现,硬件加速与否等等).

画布元素是天真的,所以它很容易预测,但是如果画布在画面之外的时候将某些东西画到画布上,它将被绘制到它的位图并在画布再次在视图中时显示.但是,尝试进行窗口大小调整,画布的内容将消失(在某些浏览器中),您需要重绘.这意味着在使用画布的过程中至少有一个层比其他元素更少.

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

更新结束

这是一个简单的在线测试

在这个测试中,我们在内部的一个按钮处,在内部的另一个按钮处绘制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);

Run Code Online (Sandbox Code Playgroud)

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