Nehéz css tulajdonságok, amelyek miatt a böngésző lassul - Yuri Klyivsky
Figyelembe véve Andrey Sitnik Evil Martians jelentését a CSS vonalról, megtudtam, hogy vannak olyan nehéz CSS tulajdonságok, amelyek nagymértékben befolyásolják az oldal megjelenítésének sebességét a böngészőben. És tényleg ezt már régen észrevettem.
Web betűkészletek, egyéni görgetés, sima görgetés
Amit már tudtam:
- Számos csatlakoztatott webes betűtípus, még akkor is, ha 70% -ot nem használnak - erősen gátolja az oldal görgetését és megjelenítését.
- egyéni görgetés - az egyik legnagyobb gonosz. Rosszabb ez csak az egyéni görgetés plusz js / jQuery plug-in sima görgetés hatása.
Box-árnyék
Itt van, amit Andrew mondta:
- a doboz árnyéka nagymértékben lelassítja az oldal megjelenítését és görgetését.
Googling a téma box-árnyékában, megtudtam, minél inkább egy árnyék, annál erősebb lesz a renderelés és a görgetés. A 30-40 képpontos görgetés görgetési oldalával az új böngészőt 3-4 alkalommal újratervezi az árnyék! Most 10-szer kell gondolkodnod, mielőtt kockás árnyékot csinálsz. Merem azt feltételezni, hogy szöveges árnyékkal ugyanaz a történet.
Airbnb tanulmány
Az Airbnb egy egész tanulmányt végzett ezzel a témával kapcsolatban. A CSS box-shadow lassított lefelé mozog. Itt vannak azok eredményei, csak megdöbbentő:
10px box-shadow blur-radius = 3 minden 40px görgetéshez húzza át az elemet
határ sugara és mi a baj vele
A legdrágább / összetett CSS tulajdonságok megjelenítése
A legdrágább CSS-tulajdonságok azok a tulajdonságok, amelyeket a böngészőnek minden egyes elem megjelenésekor újraszámolnia kell. Ezek közé tartozik: box-shadow, border-radius, átláthatóság (mivel a böngészőnek kiszámolnia kell, hogy mit mutat egy félig átlátszó elem alatt), transzformációs transzformációkat és gyilkos teljesítményű CSS szűrőket. Ha a teljesítmény az Ön elsőbbsége, akkor a fentiek mindegyike a legrosszabb ellensége.
Használja a BEM-et
Kapcsolódó cikkek: