Databases
StackOverflow2013
Postsdbo
PODo browsers render canvas elements that are not inside the viewport?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODo browsers render canvas elements that are not inside the viewport?
    primarykey
    data
    text
    <p>I have a page that has pretty heavy (mid-weight rather) <code>canvas</code> 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.</p> <p>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.</p> <p>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)?</p> <hr> <p><strong>EDIT</strong>:</p> <p>So I made some "research" on this topic and built <strong><a href="http://jsfiddle.net/cd9pJ/1/" rel="noreferrer">this fiddle.</a></strong></p> <p>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 <code>div</code> to block the viewport. When I scroll down and have the <code>canvas</code> 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 <code>div</code> in my viewport and profile the CPU usage it drops to sth around 10%. When I scroll back down: usage goes up again.</p> <p>So when I implement a visibility check like in this <strong><a href="http://jsfiddle.net/FKCLw/2/" rel="noreferrer">modified fiddle</a></strong>, 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).</p> <p>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?</p> <p>If anyone could shed a light on that I'd be very thankful!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USm90
    1. USm90
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PODo browsers render canvas elements that are not inside the viewport?
      1. USm90
      1. VTBountyStart
    2. VO
      singulars
      1. PODo browsers render canvas elements that are not inside the viewport?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PODo browsers render canvas elements that are not inside the viewport?
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload