DOM + CSS - прекрасная абстракция, облегчающая разработку UI, однако она не лишена недостатков. В то же время мы знаем, что в браузере есть альтернативные технологии отображения контента: SVG, Canvas и WebGL. Этот доклад о специфике применения и супер-силах каждой из них.

1. Alternative rendering
Canvas, WebGL, SVG

2. Why not DOM ?
It is slow since is a quite complex model

3. Canvas
Simple and sometimes fast

4. Display image: DOM vs Canvas
DOM Canvas

5. Display image: DOM vs Canvas
DOM
● Create IMG tag
Canvas

6. Display image: DOM vs Canvas
DOM
● Create IMG tag
● Load file
Canvas

7. Display image: DOM vs Canvas
DOM
● Create IMG tag
● Load file
● Append IMG tag
Canvas

8. Display image: DOM vs Canvas
DOM
● Create IMG tag
● Load file
● Append IMG tag
● Calc. styles
Canvas

9. Display image: DOM vs Canvas
DOM
● Create IMG tag
● Load file
● Append IMG tag
● Calc. styles
● Calc. position
Canvas

10. Display image: DOM vs Canvas
DOM
● Create IMG tag
● Load file
● Append IMG tag
● Calc. styles
● Calc. position
● Display image
Canvas

11. Display image: DOM vs Canvas
DOM
● Create IMG tag
● Load file
● Append IMG tag
● Calc. styles
● Calc. position
● Display image
Canvas
● Load file

12. Display image: DOM vs Canvas
DOM
● Create IMG tag
● Load file
● Append IMG tag
● Calc. styles
● Calc. position
● Display image
Canvas
● Load file
● ctx.drawImage

13. DOM is hardly predictable
< 100 msec
100-300 msec
300 - 1000 msec
1+ sec
10+ sec
Instant response
Small delay
System works
Switching task
Cancelling operation

14. When to use?
1. A lot of animated objects
2. Dynamicly changing shapes
3. Need highly consistent browser behaviour
4. Solution should be easy to maintain and
widely compatible

15. Tricks
1. Smaller means faster (width, height)
2. Rounded coordinates for drawing
3. Draw from another canvas, not image
4. Use RAF and decrease framerate if needed
(skip some frames)
5. Use few canvases if have content partially
changing

16. WebGL
Fast, amazing and hard to use

17. WebGL: Good parts
1. You may utilize GPU in the best way
2. After you sent shaders and buffers to GPU
you do not use JS anymore and it makes
rendering incredibly fast
3. WebGL calls are inspectable with vast see of
optimizations and workarounds possible

18. When to use?
1. A lot of animated objects
2. Need highest performance possible
3. Have high budget and modern hardware

19. Tricks
1. Debug WebGL calls with WebGL inspector
2. Check your drivers, are they bottleneck?
3. Use engines (Pixi, Cocos2d, Three)
4. Move to declarative engine (HTML-GL)

20. WebGL: Bad parts
DOM
<img src=”back.png”>
WebGL (three.js)
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera(45,
window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 500;
var scene = new THREE.Scene();
var material = new THREE.MeshLambertMaterial({
map:
THREE.ImageUtils.loadTexture('http://www.html5canvastutorials.co
m/demos/assets/crate.jpg')});
var plain = new THREE.Mesh(new THREE.Plain(200, 200),
material);
scene.add(plain);

21. HTML-GL?
DOM
<img src=”back.png”>
HTML-GL
<html-gl>
<img src=”back.png”>
</html-gl>

22. htmlgl.com

23. SVG
No speed improvement,
but some effects

24. When to use?
1. Need vector shapes animated and scalable
interface elements
2. Do not care about FPS too much
3. Have browsers supporting SVG

25. Trick
SVG layer is not hardware accelerated and
causes repaints when something is moved, but
you may wrap it with GPU accelerated element
and apply transformations on that element
instead of SVG