| images | ||||
|---|---|---|---|---|
 |
Canvas #1 drawImage Canvas #2 values rounded |
Flash DisplayObjects |
DOM imgs in divs |
CSS3 #1 transitions CSS3 #1 transforms |
| images.resizing | ||||
|
Canvas #1 drawImage Canvas #2 drawImage values rounded Canvas #3 drawImage values rounded drawn from buffer |
Flash DisplayObjects |
DOM imgs in divs |
CSS3 #1 transitions CSS3 #2 transforms |
| images.opacity | ||||
|
Canvas drawImage |
Flash DisplayObjects |
DOM imgs in divs |
CSS3 transitions |
| blitting | ||||
|
Canvas putImageData |
Flash copyPixels |
||
| shapes | ||||
|
Canvas | Flash #1 drawing via Graphics Flash #2 DisplayObjects |
||
| lines | ||||
|
Canvas | Flash | ||
what?
Testing rendering techniques to see how well they perform.
note
- Watch the framerate monitor and your system's CPU monitor
- Close other browser windows and apps running in the background
- Keep the same window size
findings
HTML performance varies widely depending on browser and OS.
+ Flash sourcefiles
+ Thanks Mr. doob for the framerate monitor
+ Test code performance: jsperf.com