Tuesday, February 14, 2012

improving browser reflow (rendering) performance

Subject: improving browser reflow (rendering) performance

  • note: originally emailed 02/14/2012 and sanitized for public consumption
  • sidenote: posting here so i can lead people here whenever they ask me about this stuff...



[Boss],

To answer the question on why the android tablet was performing worse than the iPad, I took out the transparent animated images during the ‘spin’ to ‘fix’ the issue.  (This is probably why iPad didn’t support animated PNGs in the first place.)

To understand why the rendering was bad and how to improve on 2D performance for the browser games we’re doing, last night I got a crash course about browser “reflow” behavior.

In a nutshell: I was wondering if there was a way to stop the browser from re-drawing the page every time one element was being change.

There is no ‘double buffering’ for the browser, but there is something close to it (DocumentFragment).  Meaning, that I would have to update/animate everything that is dynamic manually in the render/game loop.   The payoff is a (2-3x) performance improvement.

I am going to restructure the current games to take advantage of this.  [XYZ] was re-rendering the pages 3 times an update using the animated PNGs and [ZYX] rotation.





The following are resources to learn more about this:

Here is an nice example of how a browser draws stuff to the page:

Here’s some information on what the rendering path looks like on your typical browsers (in a easy to read format)

If you want to know more (warning: VERY INDEPTH) about how browsers work:

No comments: