Ascultând raportul lui Andrey Sitnik de la Marii răi despre linia CSS, am aflat că există proprietăți CSS grele care afectează puternic viteza de afișare a paginii în browser. Și într-adevăr, am observat acest lucru înainte și de mai multe ori.
Fonturi web, parcurgere personalizată, defilare ușoară
Ceea ce știam deja:
- Un număr mare de fonturi web conectate, chiar dacă 70% dintre ele nu sunt utilizate - împiedică puternic derularea și redarea paginii.
- scroll personalizat - unul dintre cele mai mari rele. Mai rău este doar parcurgerea personalizată plus efectul de derulare netedă a plug-in-ului js / jQuery.
Box-umbră
Iată ce a spus Andrew:
- umbra cutiei în cantități mari încetinește redarea și derularea paginii.
Googling pe tema box-shadow, am aflat că cu cât mai mult o umbră, cu atât mai puternică împiedică redarea și defilarea. Cu o pagină derulantă pentru fiecare parcurgere de 30-40 de pixeli, umbra este redesenată de browser ori de câte 3-4 ori! Acum trebuie sa te gandesti de 10 ori inainte sa faci un efect de box-umbra. Îndrăznesc să presupun că cu umbră de text aceeași poveste.
Studiu Airbnb
Airbnb a efectuat un studiu de ansamblu asupra acestui subiect CSS box-shadow poate încetini scrollingul. Iată rezultatele lor, e doar uimitor:
10px box-shadow blur-radius = 3 redraw elementul pentru fiecare parcurgere de 40px
raza de graniță și ce e în neregulă cu ea
Cele mai scumpe / complexe proprietăți CSS de afișat
Cele mai scumpe proprietăți CSS sunt acele proprietăți pe care browserul trebuie să le recalculeze de fiecare dată când elementul este redat. Acestea includ: shadow box, raza graniței, transparență (deoarece browserul ar trebui să calculeze ceea ce arată sub un element semi-transparent), transformă transformările și filtrele CSS de performanță a criminalilor. Dacă performanța este prioritatea dvs., atunci toate cele de mai sus sunt cel mai rău dușman.
Utilizați BEM
Articole corelate și despre: