10 начина за минимизиране на преформатирането на страницата и подобряване на производителността

Въпреки изминалото време дискусията за страниците от два мегабайта остава актуална. Колкото по-бързо е вашето приложение, толкова по-добро е потребителското изживяване и толкова по-висок е процентът на реализация.

Самият аз обаче все още добавям CSS анимации за външни ефекти и множество DOM манипулации, без да изчислявам последствията. Когато прилагате визуални ефекти в света на браузърите, следните две концепции са важни.

Преначертаване

Преначертаване възниква, когато промените засягат външния вид на елементите, но не и оформлението. Например, това се случва при промяна на свойства като opacity, background-color, visibility и outline. Пречертаването е скъпо, защото браузърът трябва да проверява видимостта на всички DOM възли - един или повече от тях може да станат видими, когато тези свойства се променят на елемента.

преформатиране

Преформатирането е по-важно. Състои се в преизчисляване на позициите и размерите на всички елементи, което води до изобразяване на документа или част от него. Промяната на един елемент може да засегне всички негови потомци, предци и съседи.

И двете блокират браузъра - нито потребителят, нито приложението могат да изпълняват други задачи при преначертаване или преформатиране. Това е една от причините за проблеми като дискретно превъртане или неотзивчиви интерфейси.

Полезно е да разберете кога се задейства повторно свързване:

Добавяне, премахване или промяна на видими DOM елементи

Добавяне, премахване или промяна на CSS стилове

По подобен начин прилагането на CSS стилове или промяната на клас може да засегне всички елементи на DOM клон и неговите съседи.

CSS3 анимации и преходи

Всеки кадър от анимацията включва рекомпозиция.

Използване на offsetWidth и offsetHeight

Смешно е, но четенето на offsetWidth иoffsetHeight на елементи може да причини преформатиране.

Действие на потребителя

И накрая, потребителят може сам да задейства преформатирането чрез активиране на :hover, въвеждане на текст в поле, промяна на прозореца или размера на шрифта, превключване на таблици със стилове или шрифтове.

Процесите на повторно свързване варират. Някои браузъри са по-добри от други в определени операции. Някои елементи са по-скъпи за изобразяване от други. За щастие има някои общи съвети за подобряване на производителността.

1. Използвайте най-добрите практики за оформление

Не мога да повярвам, че трябва да се повторя през 2015 г.: не използвайте вградени стилове или таблици с оформление.

Вградените стилове засягат оформлението след зареждане на HTML и предизвикват преформатиране. Таблиците са скъпи, защото браузърът се нуждае от повече от едно преминаване, за да изчисли размерите на клетките. Използването на таблично оформление: фиксирано може да помогне при представяне на таблични данни, тъй като ширините на колоните се основават на размера на заглавието.

Използването на flexbox за оформление на страница може също да доведе до проблеми с производителността, тъй като позициите и размерите на отделните flex елементи могат да се променят след зареждането на HTML.

2. Минимизирайте броя на CSS правилата

Колкото по-малко правила използвате, толкова по-бързо е преформатирането. Също така се опитайте да избягвате сложни CSS селектори, когато е възможно.

Това може да бъде особено проблематично, ако използвате рамка като Bootstrap - някои сайтове използват само подмножество от стиловете, които зареждат. Инструменти като Unused CSS, uCSS, grunt-uncss и gulp-uncss могат значително да намалят стиловите дефиниции и размерите на файловете.

3. Минимизирайте влагането на DOM

Малко по-сложен е следният метод - намаляване на размера на DOM дървото и броя наелементи в отделни клонове. Колкото по-малък е вашият документ, толкова по-бързо ще се преформатира. Може да има смисъл да премахнете маловажните елементи на обвивката, ако не поддържате по-стари браузъри.

4. Актуализирайте класове в долната част на DOM дървото

Променете класовете на елементи, които са възможно най-ниски в DOM дървото (тоест елементи с минимален брой деца). Това може да ограничи пространството за преформатиране до няколко възела. По същество промяната на класа на родителския клас на обвивката може да се извърши само с минимално въздействие върху дъщерните елементи.

5. Премахнете сложните анимации от потока

Анимациите ще бъдат приложени към отделен елемент, ако той бъде премахнат от потока с позиция: absolute; или позиция: фиксирана; . В този случай анимацията няма да засегне останалите елементи на документа.

6. Променете скрити елементи

Елементи, скрити с дисплей: няма; няма да доведе до повторно свързване при промяна. Опитайте се да направите промени в елементите, преди да станат видими.

7. Актуализирайте елементите на партиди

Производителността може да бъде подобрена чрез актуализиране на всички DOM елементи с една операция. Ето прост пример, включващ три преформатирания:

Можем да се ограничим до една повторна връзка тук, което също ще подобри поддържаемостта на кода:

Можете също да минимизирате броя на промените в DOM. Например искате да създадете следния списък:

Добавянето на всеки елемент поотделно ще доведе до 7 преформатиране - едно за

, три за и три за текст. Това обаче може да се направи с едно преформатиране, като се използват DOM фрагменти и създаване на възел в паметта:

8. Ограничете броя на засегнатите елементи

Избягвайте ситуации, в които може да има промениголям брой елементи. Представете си управление на раздели, когато щракването върху раздел отваря нов блок от съдържание. Околните елементи ще бъдат засегнати от това, ако височината на блоковете със съдържание е различна. Можете да подобрите производителността, като зададете фиксирана височина за контейнера или като премахнете раздела от потока.

9. Компромис с гладкостта за производителност.

Преместването на елемент с пиксел изглежда гладко, но може да причини проблеми на бавни устройства. Преместване от 4 пиксела на кадър изисква четири пъти по-малко усилия с малко по-рязко движение.

10. Анализирайте проблемите с преначертаването с инструменти на браузъра

Всички основни браузъри предоставят инструменти за разработка, които да ви помогнат да разберете как преформатирането влияе върху производителността. Базираните на Blink/Webkit браузъри (Chrome, Safari и Opera) имат панел Timeline:

И подобен панел във Firefox:

В IE аналогът се нарича UI Responsiveness:

Всички браузъри показват преформатиране и преначертаване в зелено. Горните тестове бяха с най-простите примери без сложни анимации, където други фактори, като например скриптове, могат да окажат влияние. Намалете повторното свързване и ще получите предимство в производителността.

---