DOM - удобная абстракция, но обладая развесистой моделью, она медленна и ограничивает разработчика в применении эффектов. Тезис "DOM - это медленно" действительно справедлив - любое его изменение создает волну событий по документу и, если десктопные браузеры могут справиться с такой нагрузкой, то мобильные и встроенные системы зачастую буксуют. Именно сложность DOM-модели не позволяет достигнуть заветных 60 FPS, создает задержки при анимации и всячески расстраивает пользователей и разработчиков. В докладе будет рассмотрен вывод HTML/CSS контента в "бездомном" режиме через WebGL, что позволяет веб-разработчикам использовать возможности современных 3D-ускорителей для реализации эффектов и производительности доступных современным игровым движкам. В этом докладе: - подходы к решению проблемы медленного DOM; - существующие решения: react-canvas, методология Netflix; - поиск идеального решения для оптимизации производительности; - рендеринг HTML/CSS через WebGL, знакомство с HTML GL; - ограничения и рекомендации.

1. Рендеринг HTML/CSS в WebGL

2. @PixelsCommander
denis.radin@gmail.com

5. Я не пишу “встроенный JavaScript”.
На кой ляд мне оптимимзация?

7. Оптимизация производительности не
только делает ваше приложение
быстрее. Она позволяет вам делать
вещи недоступные ранее.

8. DOM - это медленно
Из-за сложной модели

9. Вывод изображения
DOM
● Создать тег
● Загрузить файл
● Добавить тег
● Вычисл. стили
● Вычисл. коорд.
● Вывести изобр.
Canvas
● Загрузить файл
● ctx.drawImage

10. И GPU DOM медленный
Ведь меняет только последний шаг

11. DOM предсказуем с трудом

12. А HTML GL бездомен
Но только на время анимации

13. Но инспектабелен вне анимаций

14. Так же

15. Узнаете?

17. CPU GPU

19. GPU справляется с
100 000 000
текстурированных
поверхностей
Можете читать, как
“100 000 000 HTML элементов”

20. Зачем так много?
Иногда это все еще недостаточный
уровень детализации

21. Что может OpenGL
Игры намного тяжелее
и требовательней к
ресурсам

23. Потому что GPU не задействован и
DOM сложен (ok, ok, мы помним
это!)
В то же время
простой HTML слайдер
подтормаживает???

24. Давайте выпустим кроликов!
OpenGL доступен в
Web через WebGL

25. Почему мы не
используем WebGL для
контента?
Императивен, многословен, не
поддерживает лэйауты

26. HTML
<img src=”back.png”>
WebGL: Плохой мальчик
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.com/demos/assets/crate.
jpg')});
var plain = new THREE.Mesh(new THREE.Plain(200,
200), material);
scene.add(plain);

28. Рендеринг HTML/CSS через WebGL

29. <img src=”back.png”>
HTML GL
<html-gl>
<img src=”back.png”>
</html-gl>

30. Легче не придумать
Просто оберните ваш HTML тегом
<html-gl> или примените jQuery
плагин $(myNode).htmlgl()

31. Как это работает?

32. Диаграмма

33. Использует:
DOM Mutation Observers,
html2canvas, PixiJS

34. Использует:
DOM Mutation Observers,
html2canvas, PixiJS

35. pixelscommander.com/en/
Нативный,быстрый,
надежный
Rasterization API

36. HTML GL / DOM
Простой пример

37. HTML GL / DOM
Вложенный контент и
события

38. HTML GL / Извините, это
невозможно в DOM
Немного GL

39. HTML GL / Извините, это
невозможно в DOM
Ништяки для
мобильной разработки

40. Ничего не надо учить
Пишем HTML/CSS
Просто добавляем <html-gl>
И самое прекрасное!

41. Эффект как плагин, добавь свой

42. Независит от фреймворков,
но ожидается React-GL

43. github.com/PixelsCommander/HTML-GL
Open source

44. ChallengingNative.com
Разработка, профайлинг и оптимизация быстрых веб приложений

45. Вопросы?
github.com/PixelsCommander/HTML-GL
@PixelsCommander