10 способів мінімізувати перекомпонування сторінки та підвищити продуктивність
Незважаючи на час, дискусія про двомегабайтні сторінки залишається актуальною. Чим швидше ваша програма, тим краще враження користувачів і вище показник конверсії.
Тим не менш, я сам досі додаю CSS-анімації для зовнішніх ефектів та множинні маніпуляції DOM-елементами без наслідків. При застосуванні візуальних ефектів у світі браузерів важливі два поняття.
Перемальовка
Перемальовка відбувається, коли зміни впливають зовнішній вигляд елементів, але з розкладку. Наприклад, це відбувається при зміні таких властивостей як opacity, background-color, visibility та outline. Перемальовки затратні тому, що браузер повинен перевірити видимість всіх вузлів DOM — один або кілька можуть стати видимими при зміні цих властивостей у елемента.
Перекомпонування
Перекомпонування має більше значення. Вона полягає у перерахунку позицій та розмірів усіх елементів, що тягне за собою рендеринг документа або його частини. Зміна одного елемента може впливати на всіх його нащадків, предків та сусідів.
І те, й інше блокує браузер - ні користувач, ні програма не можуть виконувати інші завдання при перемальовуванні або перекомпонуванні. Це одна з причин таких проблем як дискретне прокручування або нечуйні інтерфейси.
Корисно розуміти, коли запускається перекомпонування:
Додавання, видалення або зміна видимих елементів DOM
Додавання, видалення або зміна стилів CSS
Подібним чином, застосування стилів CSS або зміна класу може вплинути на всі елементи гілки DOM та її сусідів.
Анімації та переходи CSS3
Кожен кадр анімації тягне за собою перекомпонування.
Використання offsetWidth і offsetHeight
Кумедно, але читання властивостей offsetWidth andoffsetHeight у елементів може викликати перекомпонування.
Дії користувача
І нарешті, користувач може запустити перекомпоновку, активувавши :hover , ввівши текст у полі, змінивши розмір вікна чи шрифту, переключивши таблиці стилів чи шрифти.
Процеси перекомпонування різняться. Деякі браузери кращі за інші в окремих операціях. Деякі елементи є більш витратними при рендерингу, ніж інші. На щастя, є кілька загальних порад, що дозволяють покращити продуктивність.
1.Використовуйте найкращі практики для розкладки
Не можу повірити, що я змушений повторювати у 2015 році: не використовуйте інлайнові стилі або таблиці для розкладки.
Інлайнові стилі впливають на розкладку після завантаження HTML і викликають перекомпонування. Таблиці затратні, оскільки браузеру потрібно більше проходу до розрахунку розмірів осередків. Використання table-layout: fixed може допомогти при поданні табличних даних, оскільки ширина колонок ґрунтується на розмірі заголовка.
Використання flexbox для розкладки сторінки також може спричинити проблеми з продуктивністю, оскільки позиції та розміри окремих флекс-елементів можуть змінитися після завантаження HTML.
2.Мінімізуйте кількість правил CSS
Чим менше правил ви використовуєте, тим швидше перекомпонування. Також постарайтеся уникати комплексних CSS-селекторів.
Це може бути особливо проблематичним, якщо ви використовуєте фреймворк типу Bootstrap — деякі сайти використовують лише частину стилів, що завантажуються. Інструменти типу Unused CSS, uCSS, grunt-uncss та gulp-uncss можуть значно зменшити визначення стилів та розміри файлів.
3.Мінімізуйте вкладеність DOM
Трохи складніше наступний спосіб – зменшення розміру дерева DOM та кількостіелементів у окремих гілках. Чим менший ваш документ, тим швидше він перекомпонується. Можливо, має сенс видалити не важливі обгортки, якщо ви не підтримуєте старі браузери.
4. Поновлюйте класи внизу дерева DOM
Змінюйте класи у елементів, які знаходяться максимально низько в дереві DOM (тобто у елементів із мінімальною кількістю нащадків). Це може обмежити простір перекомпонування кількома вузлами. По суті, зміна класу батьківського класу типу обгортки можна проводити лише за мінімальної дії на дочірні елементи.
5. Видаляйте складні анімації з потоку
Анімації будуть застосовуватись до окремого елемента, якщо його видалити з потоку за допомогою position: absolute; або position: fixed; . У такому разі анімація не вплине на інші елементи документа.
6. Модифікуйте заховані елементи
Елементи, заховані за допомогою display: none; не спричинять перекомпонування при зміні. Намагайтеся вносити зміни до елементів, перш ніж вони стануть видимими.
7. Обновляйте елементи пакетами
Продуктивність можна покращити, оновлюючи усі елементи DOM за одну операцію. Ось простий приклад, що тягне за собою три перекомпонування:
Ми можемо тут обмежитися одним перекомпонуванням, що також покращить підтримуваність коду:
Ви також можете мінімізувати кількість змін до DOM. Наприклад, ви хочете створити наступний список:
Додавання кожного елемента окремо спричинить 7 перекомпонувань — одну для
-
, три для та три для тексту. Однак це можна обійтися одним перекомпонуванням, використовуючи фрагменти DOM і створення вузлів у пам'яті:
8. Обмежуйте кількість елементів, що зачіпаються
Уникайте ситуацій, коли змін може бути піддановелика кількість елементів. Уявіть керування вкладками, коли натискання на вкладку відкриває новий блок контенту. Навколишні елементи будуть порушені цим, якщо висота блоків із контентом різниться. Ви можете покращити продуктивність, задавши фіксовану висоту для контейнера або видаливши вкладку з потоку.
9. Ідіть на компроміс у плавності заради продуктивності.
Зсув елемента на піксел виглядає плавно, але може викликати проблеми на повільних пристроях. Зсув на 4 пікселя за кадр вимагає вчетверо менше витрат при трохи різкішому русі.
10. Аналізуйте проблеми перемальовки з інструментами браузера
Всі основні браузери надають засоби розробки, що дозволяють виявляти, як перекомпонування впливає на продуктивність. У браузерах на движках Blink/Webkit (Chrome, Safari та Opera) є панель Timeline:
І аналогічна панель у Firefox:
У IE аналог називається UI Responsiveness:
Всі браузери відображають перекомпонування та перемальовування зеленим кольором. Наведені вище тести були з найпростішими прикладами без складних анімацій, де вплив можуть надавати й інші фактори, наприклад, скрипти. Зменшуйте перекомпонування і ви отримаєте виграш у продуктивності.