Як писати кращі CSS з продуктивністю в розумі

У сьогоднішньому пості ми подумаємо над вибором коду, який ми можемо зробити в CSS для поліпшення продуктивності сайту. Але перш ніж ми поринемо в ці варіанти, давайте спочатку зробимо короткий, уважний погляд на роботу веб-сторінки, щоб орієнтуватися напроблемні (продуктивні) області, які вирішуються за допомогою CSS.

Ось грубий потік операцій, виконаних браузером після створення дерева DOM:

Перерахувати стиль (і створити дерево). Браузер обчислює стилі, які будуть застосовані до елементів дерева DOM. Пізніше створюється дерево візуалізації, відкидаючи вузли (елементи) з дерева DOM, які не підлягають візуалізації (елементи з дисплей: немає) і ті, що є (псевдоелементи).
Макет (також Reflow). Використовуючи обчислений стиль від раніше, браузер обчислює позицію і геометрію кожного елемента на сторінці.
Перефарбувати. Після відображення макета пікселі звертаються до екрану.
Композитні шари. Під час перефарбування, малювання може бути зроблено в різних шарах автономно; потім ці шари, нарешті, об'єднані разом.

Тепер давайте продовжимо те, що ми можемо зробити на перших трьох етапах операції, щоб написати кращі коди CSS.

1. Скорочення розрахунків стилів

Як згадувалося раніше, на етапі "Перерахувати стиль" браузер обчислює стилі, які будуть застосовані до елементів. Для цього браузер спочатку знаходить всі селектори в CSS, які вказують на даний вузол елемента в дереві DOM. Потім вона проходить всі правила стилю в цих селекторах і вирішує, які саме повинні бути застосовані до елемента.

Щоб уникнути дорогих стильних розрахунків, зменшення складних і глибоко вкладених селекторів так що для браузера легше з'ясувати, до якого елемента відноситься селектор. Це скорочує час обчислень.

Інші способи використання включають зменшення кількості правил стилю (де це можливо), видалення невикористаного CSS і уникати надмірність і перевизначення, так що браузер не повинен переходити один і той же стиль знову і знову під час розрахунків стилів.

2. Зменште повернення

Перепланування або зміна макета в елементі є дуже "дорогими" процесами, і вони можуть бути ще більшою проблемою, коли елемент, який пройшов через зміни макета, має значну кількість дітей (оскільки Перемотки каскадують вниз по ієрархії).

Повернення викликаються змінами макета елемента, наприклад змінами геометричних властивостей, таких як висота або розмір шрифту, додавання або видалення класів до елементів, зміна розмірів вікна, активація : hover, DOM змінюється за допомогою JavaScript і т.д..

Так само, як у стилі розрахунок, щоб зменшити Reflows, уникнути складних селекторів і глибокі дерева DOM (знову ж таки, це запобігає надмірному каскадуванню відновлень).

Якщо потрібно змінити стилі макета компонента на вашій сторінці, цільових стилів елемента, який є найнижчим у ієрархії елементів що компонент зроблений. Це робиться так, що зміни макета не запускають (майже) будь-які інші поновлення.

Якщо ви анімацію елемента, який проходить через зміни макета, витягніть його з потоку сторінки від Абсолютно його позиціонування, оскільки перекомпонування в абсолютно позиціонованих елементах не вплине на інші елементи сторінки.

Підсумовувати:

Цільові елементи, які є нижчими у дереві DOM, коли змінюються макети
Виберіть абсолютно позиціоновані елементи для зміни анімації макета
Уникайте анімації властивостей макета, коли це можливо

3. Скорочення скорочень

Перемальовка відноситься до малювання пікселів на екрані і є дорогим процесом, подібно до Reflow. Перемальовки можуть бути запущені за допомогою Reflows, прокрутки сторінок, зміни властивостей, таких як колір, видимість і непрозорість.

Щоб уникнути частих і величезних перемальовок, використовуйте менше властивостей, які викликають дорогу перефарбування як тіні.

Якщо ви анімуєте властивості елемента, який може безпосередньо або непрямо ініціювати перемальовування, це буде великою перевагою якщо цей елемент знаходиться у власному шарі перешкоджаючи тому, щоб її малювання не впливало на решту сторінки і спрацьовувало апаратне прискорення. У процесі апаратного прискорення GPU займеться завданням виконання анімаційних змін у шарі, заощадивши додаткову роботу процесора, прискоривши процес.

У деяких браузерах, непрозорість (зі значенням, меншим ніж 1) і перетворення (значення, відмінне від ні) автоматично просуваються до нових шарів, а апаратне прискорення застосовується для анімацій і переходів. Віддаючи перевагу цим властивостям для анімації, це хороша.

Для силоміць просунути елемент до нового шару і перейти в апаратне прискорення для анімації, є дві технології:

add transform: translate3d (0, 0, 0); до елемента, обманюючи браузер для запуску апаратного прискорення для анімацій і переходів.
додайте зміниться властивість елементу, який інформує браузер про властивості, які можуть змінитися в елементі в майбутньому. Примітка: Сара Суейдан має докладну статтю про це на сайті Dev.Opera.

Підсумовувати:

Уникайте дорогих стилів, які викликають перемальовування
Шукайте просування шару і апаратне прискорення для великих анімацій і переходів.

Брати до відома

(1) Отже, до тих пір, ми не торкнулися скорочення розміру файлу CSS. Ми згадали, що зниження правил стилю (і елементів DOM) робить значне поліпшення продуктивності через скільки буде працювати браузер менше на процес обчислення стилів. Як наслідок цього коду скорочується, записуються кращі селектори і видаляються невикористані CSS, розмір файлу автоматично зменшиться.

(2) Також бажано не робити занадто багато послідовних змін стилів елемента в JavaScript. Замість цього додайте клас елементу (за допомогою JavaScript), який містить нові стилі, щоб внести ці зміни - це запобігає непотрібним Reflows.

(3) Ви захочете уникнути розгортання макета а також (примусові синхронні поновлення), що виникає внаслідок доступу та зміни властивостей макета елементів за допомогою JavaScript. Дізнайтеся більше про те, як це знищує продуктивність.