Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML GL - возьмите столько FPS, сколько вам нужно, и немного эффектов в придачу / Радин Денис

761 views

Published on

DOM - удобная абстракция, но обладая развесистой моделью, она медленна и ограничивает разработчика в применении эффектов. Тезис "DOM - это медленно" действительно справедлив - любое его изменение создает волну событий по документу и, если десктопные браузеры могут справиться с такой нагрузкой, то мобильные и встроенные системы зачастую буксуют. Именно сложность DOM-модели не позволяет достигнуть заветных 60 FPS, создает задержки при анимации и всячески расстраивает пользователей и разработчиков.

В докладе будет рассмотрен вывод HTML/CSS контента в "бездомном" режиме через WebGL, что позволяет веб-разработчикам использовать возможности современных 3D-ускорителей для реализации эффектов и производительности доступных современным игровым движкам.

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

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

HTML GL - возьмите столько FPS, сколько вам нужно, и немного эффектов в придачу / Радин Денис

  1. 1. Рендеринг HTML/CSS в WebGL
  2. 2. @PixelsCommander denis.radin@gmail.com
  3. 3. Я не пишу “встроенный JavaScript”. На кой ляд мне оптимимзация?
  4. 4. Оптимизация производительности не только делает ваше приложение быстрее. Она позволяет вам делать вещи недоступные ранее.
  5. 5. DOM - это медленно Из-за сложной модели
  6. 6. Вывод изображения DOM ● Создать тег ● Загрузить файл ● Добавить тег ● Вычисл. стили ● Вычисл. коорд. ● Вывести изобр. Canvas ● Загрузить файл ● ctx.drawImage
  7. 7. И GPU DOM медленный Ведь меняет только последний шаг
  8. 8. DOM предсказуем с трудом
  9. 9. А HTML GL бездомен Но только на время анимации
  10. 10. Но инспектабелен вне анимаций
  11. 11. Так же
  12. 12. Узнаете?
  13. 13. CPU GPU
  14. 14. GPU справляется с 100 000 000 текстурированных поверхностей Можете читать, как “100 000 000 HTML элементов”
  15. 15. Зачем так много? Иногда это все еще недостаточный уровень детализации
  16. 16. Что может OpenGL Игры намного тяжелее и требовательней к ресурсам
  17. 17. Потому что GPU не задействован и DOM сложен (ok, ok, мы помним это!) В то же время простой HTML слайдер подтормаживает???
  18. 18. Давайте выпустим кроликов! OpenGL доступен в Web через WebGL
  19. 19. Почему мы не используем WebGL для контента? Императивен, многословен, не поддерживает лэйауты
  20. 20. 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);
  21. 21. Рендеринг HTML/CSS через WebGL
  22. 22. <img src=”back.png”> HTML GL <html-gl> <img src=”back.png”> </html-gl>
  23. 23. Легче не придумать Просто оберните ваш HTML тегом <html-gl> или примените jQuery плагин $(myNode).htmlgl()
  24. 24. Как это работает?
  25. 25. Диаграмма
  26. 26. Использует: DOM Mutation Observers, html2canvas, PixiJS
  27. 27. Использует: DOM Mutation Observers, html2canvas, PixiJS
  28. 28. pixelscommander.com/en/ Нативный,быстрый, надежный Rasterization API
  29. 29. HTML GL / DOM Простой пример
  30. 30. HTML GL / DOM Вложенный контент и события
  31. 31. HTML GL / Извините, это невозможно в DOM Немного GL
  32. 32. HTML GL / Извините, это невозможно в DOM Ништяки для мобильной разработки
  33. 33. Ничего не надо учить Пишем HTML/CSS Просто добавляем <html-gl> И самое прекрасное!
  34. 34. Эффект как плагин, добавь свой
  35. 35. Независит от фреймворков, но ожидается React-GL
  36. 36. github.com/PixelsCommander/HTML-GL Open source
  37. 37. ChallengingNative.com Разработка, профайлинг и оптимизация быстрых веб приложений
  38. 38. Вопросы? github.com/PixelsCommander/HTML-GL @PixelsCommander

×