Fronttalks

Аппаратное ускорение в жизни верстальщика

Аппаратное ускорение в жизни верстальщика

Яндекс
Завьялов Александр

Demo

FPS

Chrome Timeline

От разметки к изображению

(как это было)

Лучшая в мире страничка

От разметки к изображению

                <!DOCTYPE html>
                <html>
                    <head>
                        <title>Пиар самого себя</title>
                        <meta charset="utf-8">
                        <link rel="stylesheet" href="main.css">
                    </head>
                    <body>
                        <section>
                            <h1>Всем привет!</h1>
                            <img src="i.jpg" alt="Я">
                            <p>Я занимаюсь фронтенд разработкой.</p>
                            <p>И это круто!</p>
                        </section>
                        <script src="main.js"></script>
                    </body>
                </html>
            

DOM Tree

                <!DOCTYPE html>
                <html>
                    <head>
                        <title>Пиар самого себя</title>
                        <meta charset="utf-8">
                        <link rel="stylesheet" href="main.css">
                    </head>
                    <body>
                        <section>
                            <h1>Всем привет!</h1>
                            <img src="i.jpg" alt="Я">
                            <p>Я занимаюсь фронтенд разработкой.</p>
                            <p>И это круто!</p>
                        </section>
                        <script src="main.js"></script>
                    </body>
                </html>
            
html
head
title
meta
body
section
h1
img
p
p
script

DOM Tree + CSS

DOM
html
head
title
meta
body
section
h1
img
p
p
script
+

RenderTree

DOM
+
CSS
RenderTree
p::after {
  ...
}

Компоновка

html
body
section
h1
img
p
p
html, body
section
h1
img
p
p

Отрисовка

Отрисовка

Отрисовка. «Грязные» области

Весь процесс

Как работают браузеры

Отрисовка

Скролл

Compositing


Compositing

    * X Window, Windows API, что есть в ОС

Оптимизированный скролл

GPU Accelerated Compositing

GPU Accelerated Compositing. Вчера.

GPU Accelerated Compositing. Сегодня.

Браузер Проверка Отключение По умолчанию
Firefox about:support (graphics section) about:config, settings вкл.*
Chrome chrome://gpu cli options вкл.*
IE9+ - tools > internet option вкл.*
Safari - menu -> debug
cli options
вкл.*
Opera opera:gpu opera:config вкл.* (webkit)
Мобильные: iOS6+, Android4+, Windows Phone 7 (IE9)

* - драйвер

GPU Accelerated Compositing

GPU Accelerated Compositing

GPU Accelerated Compositing in Chrome

Слои

Слой (композитный слой) - часть страницы, поддерево DOM. Отрисовывается независимо, компонуется в GPU. Может растягиваться, перемещаться, скрываться (через прозрачность) без отрисовки.

Paint - дорого
Composite - дешево

Слои

Условия создания слоя:

Дебаг

Trace Event Profiling Tool (about:tracing)

Дебаг для взрослых

./Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary
--enable-threaded-compositing
--force-compositing-mode
--enable-impl-side-painting
--enable-skia-benchmarking
--allow-webui-compositing

Слои для анимаций. Дружелюбный CSS.

Все остальные могут вызвать обновление текстур

Слои для анимаций

Пример с выезжающим меню (CSS animation)

Больше примеров!

Успех!

Помним

Советы

Подводные камни

Если стало интересно

СПАСИБО!

Twitter: alzavyalov