Від автора: властивості CSS і значення, що запускають перебудову, досить сильно впливають на продуктивність. Вони можуть сповільнити адаптивність інтерфейсів (рендеринг сторінок, плавність анімації і продуктивність під час прокручування сторінки). Спад особливо помітний на слабких пристрої типу смартфонів і смарт тв.
Що таке перебудова?
Перебудова – це операція зміни макета всієї сторінки або її частини. В якості прикладів можна навести зміна розмірів елемента або оновлення його лівого позиціонування. Перебудова відбувається тому, що такі елементи змушують браузер заново обчислювати висоту, ширину та положення інших елементів документа.
Оновлення схожа на перебудову, ця операція змушує браузер заново рендери частини документа. Один з прикладів перемальовування – зміна кольору кнопки станом :hover. З перемальовуванням виникає менше проблем, так як вона не впливає на розміри і положення вузлів. І все ж перемальовування потрібно зводити до мінімуму.
Перебудова і оновлення здебільшого викликаються під час операцій в DOM. Наприклад, при додаванні і видаленні елементів. Ці процеси також можуть бути викликані зміною властивостей, що відповідають за розміри, видимість і стан елемента. Обидва процесу спрацьовують як при використанні JS, так і при використанні CSS-анімації.
Примітка: завантаження сторінок
Завантаження сторінки завжди викликає перебудову і перемальовування, так як браузер парсити вихідний HTML, CSS і JS.
Повністю виключити перебудови і перемальовування з проекту складно. Однак ми можемо знаходити ці процеси і знижувати їх вплив за допомогою інструменту тимчасової шкали.
Інструменти тимчасової шкали
На перший погляд інструменти тимчасової шкали трохи заплутані. Вони вимірюють продуктивність front-end’а, показуючи час, необхідний на виконання різних завдань. Записуючи все під час взаємодії зі сторінками, ми можемо знайти рядки в CSS, викликають спад продуктивності.
Тимчасова шкала знаходиться у однойменній вкладці панелі розробника. У Chrome, Opera і Firefox вкладка називається Timeline. В Safari вкладка називається Timelines, в IE більш повна назва UI Responsiveness.
Для запису судового процесу в будь-якому браузері натисніть на кнопку Запис. Взаємодійте з проблемними частинами сторінки, після чого натисніть на відповідну кнопку для зупинки запису.
В залежності від браузера дані будуть видні відразу під час запису або після її закінчення. Safari і Firefox показують дані в реальному часі, а Chrome, Opera і Internet Explorer показують графік продуктивності тільки після закінчення запису.
Загрузка документа, виклики функцій, події DOM, перерахунок стилів і побудова, всі ці дані логируются в будь-якому браузері. З цієї інформації ми можемо знайти вузькі місця у продуктивності. Щодо продуктивності CSS ми шукаємо два пов’язаних аспекти:
велика кількість операцій по перерахунку та візуалізації стилів;
операції, що займають багато часу, які на часовій шкалі відображаються більш довгим блоком.
Для розбору на практиці ми порівняємо два стандартних документа: приклад А і В. В обох випадках будемо рухати кілька div ів з Х-положення (0) у Х-положення (1000). В обох прикладах будуть використовуватися CSS-переходи. У прикладі А ми будемо анімувати властивість left. У прикладі ми будемо анімувати transform властивість за допомогою трансформацій.
Розмітка в обох прикладах однакова (результат можна подивитися на Малюнку 3.16):
Performance example
/* CSS will go here. */
Move
↵
Рисунок 3.16 наша HTML-сторінка з div ами в Safari
JS-код для обох документів також один і той же. По натисненню на кнопку move до всіх div ав додається клас moved:
var move = document.getElementsById(‘move’);
move.addEventListener. (‘click’, function(e) {
var objs = document.body.querySelectorAll(‘div’);
Array.prototype.map.call(objs, function(o){
o.classList.toggle(‘moved’);
});
});
CSS-код, ось тут починаються розбіжності. CSS для прикладу А:
div {
background: #36f;
margin-bottom: 1em;
width: 30px;
height: 30px;
position: relative;
left: 0;
transition: left 2s ease-in;
}
.moved {
left: 1000px;
}
Під час виконання ця анімація генерує велику кількість обчислень стилів і перерисовок на часовій лінії. Зображення нижче показує тимчасову лінію для переходів в Safari (Рисунок 3.17), Chrome (Рисунок 3.18), Internet Explorer (Рисунок 3.19) і Firefox (Рисунок 3.20).
Малюнок 3.17 тимчасова лінія в Safari для переходу властивості left
Рисунок 3.18 те ж саме в Chrome
Малюнок 3.19 тимчасова лінія в IE11 для переходу властивості left
Малюнок 3.20-приклад у Firefox
Причина обчислень і перерисовок стилів пов’язана з використовуваним властивістю left. Властивість left викликає перебудову при будь-яких змінах, навіть якщо зміни викликані анімацією або переходом.
Тепер подивимося на приклад:
div {
background: #f3f;
margin-bottom: 1em;
width: 30px;
height: 30px;
position: relative;
left: 0;
transition: transform 2s ease-in;
transform: translateX(0);
}
.moved {
transform: translateX(1000px);
}
Тут ми використовуємо властивість transform між translateX(0) і translateX(1000px).
В більшості браузерів трансформації не викликають перебудови, на часовій лінії помітно лише кілька операцій за перемальовуванні. Результати в Safari (Рисунок 3.21), Chrome (Рисунок 3.22) і IE (Рисунок 3.23). Firefox є винятком. Порівняйте Малюнок 3.20 і 3.24. Тимчасова лінія для властивості left і трансформацій дуже схожа.
Малюнок 3.21 тимчасова лінія в Safari для переходу –webkit-transform
Рисунок 3.22 те ж саме в Chrome, на цей раз з властивістю transform
Рисунок 3.23 приклад в IE11
Рисунок 3.24 тимчасова лінія в Firefox для переходу властивості transform
Визначення рядків, які потрібно видалити
На жаль, немає чіткого списку властивостей, що викликають перебудову і перемальовування. Paul Lewis підійшов до цього ближче всіх на своєму сайті CSS Triggers, але список заточений під Chrome. Для багатьох властивостей браузери ведуть себе однаково, проте цей ресурс дає вам хоча б найменше уявлення про те, які властивості викликають проблеми.
Ви знайшли проблемні властивості, тепер потрібно перевірити свої припущення. Вимкніть властивість (або закоментуйте додайте тимчасовий префікс x-) і перезавантажте тест на часовій лінії.
Пам’ятайте, що продуктивність відносна, а не абсолютна або досконала. Мета – підвищити її, щоб сайт працював швидше, ніж раніше. Якщо властивість або ефект занадто повільно виконуються, видалите його.
