Resnica o zmogljivosti izbirnika CSS

Resnica o zmogljivosti izbirnika CSS

Joj, pusti to Patrick Brosset bo govoril o učinkovitosti CSS na čim bolj dostopen in praktičen način. Ne da je CSS vedno kaj dviguje hitrost, ali celo najnižji plod, ko gre za izboljšanje učinkovitosti.

Ampak if če iščete pridobitve na strani CSS, ima Patrick dober način, kako poiskati vaše najdražje izbirnike z orodji Edge DevTools:

  • Odprite DevTools.
  • Pojdite na zavihek Performance.
  • Prepričajte se, da imate omogočeno možnost »Omogoči napredne instrumente upodabljanja«. To me je v procesu spotaknilo.
  • Posnemite nalaganje strani.
  • V poročilu odprite zavihek »Od ​​spodaj navzgor«.
  • Preverite svojo velikost preračunanih stilov.

DevTools z odprtim zavihkom Performance in povzetkom dogodkov.
Resnica o zmogljivosti izbirnika CSS

Od tu kliknite enega od dogodkov preračunanega sloga v glavnem pogledu slapa in dobili boste nov zavihek »Statistični podatki izbirnika«. Poglej vso to gnjecavo dobroto!

The truth about CSS selector performance PlatoBlockchain Data Intelligence. Vertical Search. Ai.
Resnica o zmogljivosti izbirnika CSS

Zdaj vidite vse izbirnike, ki so bili obdelani, in jih je mogoče razvrstiti glede na to, kako dolgo so trajali, kolikokrat so se ujemali, število poskusov ujemanja in nekaj, kar se imenuje »hitro zavrnjeno štetje«, ki naučil sem se je število elementov, ki jih je bilo enostavno in hitro odstraniti iz ujemanja.

Tukaj je veliko vpogledov, če je CSS res ozko grlo, ki ga je treba raziskati. Toda preberite Patrickovo celotno objavo na spletnem dnevniku Microsoft Edge, ker gre veliko globlje v zakaj in kako ter se sprehodi skozi celotno študijo primera.

Neposredna povezava →

Časovni žig:

Več od Triki CSS