Do browsers render canvas elements that are not inside the viewport?

Question

I have a page with fairly heavy (average weight) canvas operations. In order to serve users on mobile devices and old computers, I thought that I could implement a mechanism that checks whether the canvas element is really visible, and decide whether to perform constant calculations and canvas updates (animation running at 30 frames per second), or not.

This works great, but when performing a performance test using the Chrome Dev Tools, I noticed that even when I turn off the visibility check and just let things constantly show that the CPU usage of this function drops very little, no part of the canvas’s elements (s) are visible (although theoretically, it should still perform the same tasks). So: at least on my computer running Chrome 17, it doesn't really matter if I check the actual visibility of the item.

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

---

EDIT

So I did some “research” on this topic and created this script.

What happens is that it generates noise at a speed of 30 frames per second. Not too nice for the eyes, but, well ... The top is just a div to block the viewport. When I scroll down and I have a canvas element in the viewport, then using the processor tells me that it takes about 40%, so there seems to be a lot of browser here. When I scroll through the backup, so that I only have a maroon div color in my viewport and the CPU usage profiling is reduced to 10%. When I scroll back, usage again increases.

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

So I’m still wondering if this is some side effect of what I don’t know (or am I making some serious mistake when profiling), or if I can expect browsers to be smart enough to handle such situations?

If anyone could shed light on this, I would be very grateful!

Answer 1

I think you are confused about whether the logic works and whether the rendering is happening. Many browsers now accelerate their canvases in hardware, so all rendering takes place on the GPU, so actually clicking on a pixel in any case does not require processor time. However, the tick function has a nontrivial code for generating random noise on the CPU. So you really care if the tick function works. If the canvas is turned off, it will not appear on the display (it does not appear). As for canvas drawing calls, this probably depends on the browser. It can display all callbacks on a screen canvas if you suddenly scroll back to view it, or it can just queue all drawing calls and actually do nothing with them until you scroll the canvas to view it. I'm not sure what every browser does.

However, you should not use setInterval or setTimeout to animate the Canvas . Use the new requestAnimationFrame API. Browsers do not know what you are doing in the timer call, so always call the timer. requestAnimationFrame , on the other hand, is specifically designed for visual things, so the browser has the ability to not call the tick function or reduce the speed it called if the canvas or page is not visible.

As for how browsers really handle this, I'm not sure. However, you should definitely give preference, as future browsers may better optimize requestAnimationFrame ways they cannot optimize setInterval or setTimeout . I think that modern browsers also reduce normal timers to 1 Hz if the page is not visible, but it is much easier for the browser to optimize requestAnimationFrame , and some browsers will get you V-sync and other pleasantness with it.

So I'm not sure if requestAnimationFrame will mean that your tick function is not called if the canvas scrolls out of sight. Therefore, I would recommend using both requestAnimationFrame and the existing visibility check. This should guarantee you the most efficient rendering.

Answer 2

From his own experience, he displays everything you say in order to display it regardless of the position on the screen.

For example, if you draw tiles larger than the size of the canvas, you will still see a drop in performance if you do not optimize the script.

Try using a feature with the required animation performance and see if you all get the same results.