Как да пишем по-добре CSS с производителност в ума

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

Ето грубия поток от операции, извършвани от браузъра след създаването на DOM дърво:

1. Преизчисли стила (и създаде дърво). Браузърът изчислява стиловете, които ще се прилагат към елементите в дървото DOM. По-късно се създава рендър дърво, като се изхвърлят възлите (елементите) от дървото DOM, които не трябва да се визуализират (елементи с дисплей: няма) и тези, които са (псевдоелементи).
2. Оформление (още известен като Reflow). Използвайки изчисления стил от преди, браузърът изчислява позицията и геометрията на всеки елемент на страницата.
3. пребоядисвам. След като оформлението е нанесено, пикселите се изтеглят към екрана.
4. Композитни слоеве. По време на пребоядисването, рисуването може да се извършва самостоятелно в различни слоеве; след това тези слоеве се събират най-накрая.

Нека продължим с това, което можем да направим в първите три етапа на операцията, за да пишем по-добре работещи CSS кодове.

1. Намалете изчисленията на стила

Както беше споменато по-горе, в етапа "Преизчисли стил" браузърът изчислява стиловете, които ще се прилагат към елементите. За да направите това, браузърът първо открива всички селектори в CSS, които сочат към даден елементен възел в DOM дървото. След това преминава през всички правила на стила в тези селектори и решава кои от тях трябва да бъдат действително приложени към елемента.

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

Други начини за използване включват намаляване на броя на стилните правила (когато е възможно), премахване на неизползвания CSS и избягване съкращения и замествания, така че браузърът не трябва да минава през един и същи стил отново и отново по време на стилови изчисления.

2. Намалете възстановяването

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

Възстановяванията се задействат от промени в оформлението на елемент, като промени в геометричните свойства като височина или размер на шрифта, добавяне или премахване на класове към елементи, промяна на размера на прозореца, активиране : навъртам, DOM се променя от JavaScript и др.

Точно както при изчисляване на стил, за да се намали Reflows, избягвайте сложни селектори и дълбоки дървета DOM (отново, това е, за да се предотврати прекомерното каскадиране на Reflows).

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

Ако анимирате елемент, който преминава през промени в оформлението, извадете го от потока на страницата от абсурдно го позиционира, тъй като Reflow в абсолютно позиционирани елементи няма да засегне останалите елементи на страницата.

Да обобщим:

• Целеви елементи, които са по-ниски в дървото DOM, когато се правят промени в оформлението
• Изберете абсолютно позиционирани елементи за анимации с промяна на оформлението
• Избягвайте да анимирате свойствата на оформлението, когато е възможно

3. Намалете пребоядиса

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

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

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

В някои браузъри, непрозрачност (със стойност по - малка от. \ t 1) и трансформиране (стойност различна от. \ t нито един) автоматично се популяризират в нови слоеве и хардуерното ускорение се прилага за анимации и преходи. Предпочитането на тези свойства за анимации по този начин е добро.

За насилствено популяризирайте елемент в нов слой и преминете към хардуерно ускорение за анимация се предлагат две техники:

1. добави transform: translate3d (0, 0, 0); към елемента, подвеждайки браузъра да задейства хардуерното ускорение за анимации и преходи.
2. добавете ще има промяна на елемента, който информира браузъра за свойствата, които е вероятно да се променят в елемента в бъдеще. Забележка: Сара Суейдан има задълбочена и полезна статия за това в сайта на Dev.Opera.

Да обобщим:

• Избягвайте скъпите стилове, които водят до пребоядисване
• Търсете промотиране на слоя и хардуерно ускорение за големи анимации и преходи.

Да вземат под внимание

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

(2) Също така е препоръчително не правете твърде много промени в стиловете на елемента в JavaScript. Вместо това добавете клас към елемента (използвайки JavaScript), който държи новите стилове, за да направите тези промени - това предотвратява ненужните възстановявания.

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