不要渲染的浏览器不属于视窗内画布元素？ [英] Do browsers render canvas elements that are not inside the viewport?

问题描述

我有了pretty重（中等重量相当）画布操作正在进行的页面。为配合在移动设备和旧电脑的用户，我想我可以实现一种机制，将检查canvas元素实际上是可见的，并决定是否不断计算和帆布更新（动画30fps的运行），确实有做或不

I have a page that has pretty heavy (mid-weight rather) canvas operations going on. To cater for users on mobile devices and older computers I was thinking I could implement a mechanism that will check if the canvas element is actually visible and decide if the constant calculations and canvas updates (animation running at 30fps) do have to be done or not.

这是干什么用Chrome浏览器开发工具我注意到，甚至当我禁用我的可视性检查，只是让事情呈现所有有问题的功能的CPU占用率下降了不少，当一次性能测试时，工作正常，但没有canvas元素（S）的一部分，是可见的（尽管在理论上仍然应该执行相同的任务）。所以：至少运行Chrome 17在我的电脑上它没有真正发挥作用，如果我检查元素的实际能见度

This is working fine, yet when doing a performance test with the Chrome Dev Tools I noticed that even when I disable my visibility check and just let things render all the time the CPU usage of the function in question drops quite a bit when no part of the canvas element(s) is visible (although in theory it should still be performing the same tasks). So: at least on my computer running Chrome 17 it does not make a real difference if I check for the element's actual visibility.

要削减长话短说：我需要这样做或者浏览器足够的智慧来处理这样的情况下，甚至没有告诉他们（我可以保存可视性检查）

To cut a long story short: Do I need to do this or are browsers smart enough to handle such a case without even telling them (and I can save the visibility checking)?

修改

所以，我做了一些关于这个主题的研究而建的 这个小提琴。

So I made some "research" on this topic and built this fiddle.

什么情况是，它只是在每秒30帧产生噪声。不是太顺眼，但是，嗯......上部只是一个简单的 DIV 来阻止视口。当我向下滚动，并有画布在视口中CPU使用率元素告诉我，它采取了约40％，因此显然是浏览器确实有相当多的，在这里做。当我滚动备份，这样我只是有 DIV 在我的口中着色的栗色和分析的CPU占用率降至折腾到10％左右。当我滚动背下来：使用再次上升

What happens is that it just generates noise at 30 frames per second. Not too pleasing to the eye but, well... The upper part is just a plain div to block the viewport. When I scroll down and have the canvas element in the viewport CPU Usage tells me it's taking up about 40%, so apparently the browser does have quite a lot to do here. When I scroll back up so that I just have the maroon colored div in my viewport and profile the CPU usage it drops to sth around 10%. When I scroll back down: usage goes up again.

所以，当我实现可视性检查就像这个 修改小提琴 ，我看到一个增加（一个微小的一个诚实）的CPU使用率，而不是下降（因为它有检查，如果画布是视域里的额外任务）。

So when I implement a visibility check like in this modified fiddle, I do see an increase (a tiny one to be honest) in CPU usage instead of a drop (as it has the additional task of checking if the canvas is inside the viewport).

所以，我还是想知道，如果这是东西一定的副作用，我不知道（或我在做分析时，一些重大失误），或者如果我可以期待浏览器足够的智慧来处理这种情况？

So I am still wondering if this is some side effect of something that I am not aware of (or I am making some major mistake when profiling) or if I can expect browsers to be smart enough to handle such situations?

如果任何人都可以在该流下了光，我会非常感激！

If anyone could shed a light on that I'd be very thankful!

推荐答案

我想你是否逻辑的运行之间有无的渲染的发生混淆。很多浏览器现在的硬件加速画布所以所有的渲染发生在GPU上，所以实际的像素推不带CPU时间反正。但是你打勾的功能有不平凡的code，产生在CPU上的随机噪声。所以，你只有真正关注过蜱功能是否正在运行。如果画布是屏幕外，它当然不会被渲染到显示器（这是不可见）。至于在画布上绘制调用，它可能依赖于浏览器。它可以提供一切画上的情况下，屏幕外的画布调用你突然滚动它放回查看，或者可能只是排队的所有绘制调用，并没有真正做他们什么，直到你可以观看滚动的画布。我不知道每个浏览器确实存在。

I think you're confused between whether the logic is running and whether the rendering is happening. Many browsers now hardware-accelerate their canvases so all rendering happens on the GPU, so actual pixel pushing takes no CPU time anyway. However your tick function has non-trivial code to generate random noise on the CPU. So you're only really concerned over whether the tick function is running. If the canvas is offscreen, it certainly won't be rendered to the display (it's not visible). As for the canvas draw calls, it probably depends on the browser. It could render all draw calls to an off-screen canvas in case you suddenly scroll it back in to view, or it could just queue up all the draw calls and not actually do anything with them until you scroll the canvas in to view. I'm not sure what each browser does there.

然而，您不应使用的setInterval 或的setTimeout 的动画画布。使用新的<一个href=\"https://developer.mozilla.org/en/DOM/window.requestAnimationFrame\"><$c$c>requestAnimationFrame API。浏览器不知道你在一个计时器调用做，所以总是会调用计时器。 requestAnimationFrame ，另一方面是专为视觉的东西设计的，所以浏览器有机会不叫剔功能，还是在画布，以减少这就是所谓的速度，或页面是不可见的。

However, you shouldn't use setInterval or setTimeout for animating Canvas. Use the new requestAnimationFrame API. Browsers don't know what you do in a timer call so will always call the timer. requestAnimationFrame on the other hand is designed specifically for visual things, so the browser has the opportunity to not call the tick function, or to reduce the rate it's called at, if the canvas or page is not visible.

至于如何浏览器的实际的处理它，我不知道。但是，你一定要preFER它，因为未来的浏览器也许能更好地优化 requestAnimationFrame 中，他们不能优化方法的setInterval 或的setTimeout 。我觉得现代的浏览器也减少了普通定时器1赫兹如果页面是不可见的，但它肯定更容易为浏览器优化 requestAnimationFrame ，再加上一些浏览器让你V -syncing和其他美好的事物吧。

As for how browsers actually handle it, I'm not sure. However, you should definitely prefer it since future browsers may be able to better optimise requestAnimationFrame in ways they cannot optimise setInterval or setTimeout. I think modern browsers also reduce the ordinary timers to 1 Hz if the page is not visible, but it's definitely much easier for the browser to optimise requestAnimationFrame, plus some browsers get you V-syncing and other niceness with it.

所以我不能肯定 requestAnimationFrame 将意味着如果画布滚出视你的滴答函数没有被调用。所以，我建议你使用的两个的 requestAnimationFrame 和现有的可视性检查。这应该保证你最有效的呈现。

So I'm not certain requestAnimationFrame will mean your tick function is not called if the canvas is scrolled out of view. So I'd recommend using both requestAnimationFrame and the existing visibility check. That should guarantee you the most efficient rendering.

这篇关于不要渲染的浏览器不属于视窗内画布元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！