kaxigt.com

Optimering CSS-parsing HTML-hierarkin CSSOM. Handen på hjärtat. Hur ofta tänker du på hur du skriver din CSS? Vi puttar in några selektorer i stilmallen, ger dem en egenskap och ett värde, och för det mesta så fungerar det.

Det är också det som är tjusningen med CSS. Dock kan de uppstå problem i kaskaden. En universal märkning * eller en ID-märkning kan påverka hela kaskaden. Genom lägga till egenskapen !important sist i värdet löser en del sina problem.

CSS-lint, ett sorts valideringsverktyg, varnar dock för just detta. Den vill att vi ska tänka om hur vi kan lösa det på annat och mer optimerat vis, det vill säga best practice.

Huruvida man väljer att göra det är självklart upp till var och en.

Grundläggande CSS-parsing

Selektorerna kan delas upp i olika grupper där var och en har ett eget värde. Här under listas de som grovt räknat menas vara de mest förekommande, från de med högst värde till de med lägst värde.

Det kan vara intressant att veta att även om ett ID är tekniskt snabbast och har en högre prestanda, så är det faktiskt bara nätt och jämt. Återflödet och hastigheten mellan en class och ID är inte så stor.

Hur tolkar webbläsarna selektorerna?

Blir ni förvånade om jag säger att de läser in all css från höger till vänster. Den selektorn som ligger allra längst till höger, om det finns fler, kallas för nyckel-selektor – key selector.

#id .class > ul a

I ovanstående exempel är det alltså a som är nyckeln. Det innebär att webbläsaren börjar med att först matcha alla selektorer. Därefter söker den efter alla element på sidan som matchar med a.

Sedan alla ul-element på sidan och filtrerar fram de ättlingar som också har nyckeln a. Webbläsaren fortsätter tills den har sökt av och filtrerat sig till den selektorn som finns längst till vänster, vilket i vårt fall är #id.

Det innebär att ju kortare selektor man anger desto snabbare läses stilmallen in av webbläsaren. För bästa prestanda så är det bäst att nyckel-selektorn är ett ID eller class.

Överkvalificerade selektorer

Nu när vi vet vad en nyckel-selektor är för något, och hur webbläsarna parsar vår css, kan det också vara en idé att titta på något som ytterligare kan skapa problem, nämligen att lägga till för många selektorer. Det leder till längre laddtid eftersom webbläsarna får söka och filtrera selektorer som man faktiskt inte nödvändigtvis behöver.

Till det är det naturligtvis följande som gäller; ju renare css desto bättre utförande. Låt oss kika på följande överkvalificerade kod.

html body .wrapper #content a {}

Här måste webbläsaren söka och filtrera om denna lilla kodsnutt sex gånger på sidan. Mycket onödig tid eftersom vi kan skriva den betydligt kortare men få samma utfall. Se under.

#content a {}

Vi ska kika på ett till förenklat exempel där det nedre är att föredra.

#nav li a {}

#nav a {}

Tag-(över)kvalificera

ID:s är unika som de är och behöver inte tag-namnas, de förlorar bara effekt av det.

ul#main-navigation {  }
#main-navigation li a { font-family: Verdana, Sans-Serif; }

Detta är ett bättre alternativ.

#main-navigation { font-family: Verdana, Sans-Serif; }

DOM – Document Object Model, HTML-hierarki och CSS-kaskad

En dokumentmodell är ett dokuments struktur med sina olika element. Vi har navigering, länkar, stycken, paragrafer, rubriker, bilder och så vidare.

Man kan se HTML som ett släktträd med olika grenar. Högst uppe i kronan har vi alla barnen/children. Stammen är föräldrarna/parent.

De barn som har samma förälder/parent är syskon/siblings, och så vidare. Ättlingar/descendants är de element som kommer från samma anfader/ancestor och ärver dess egenskaper om de i sin tur inte givits några egna.

Senaste specen av WHATWG DOM Living Standard.

källor: https://www.sitepoint.com/optimizing-css-id-selectors-and-other-myths/, https://csswizardry.com/2011/09/writing-efficient-css-selectors/

CSS Object Model (CSSOM)

CSS Object Model (CSSOM) är en karta över alla CSS selektorer och relevanta egenskaper för varje selektor i form av ett träd med en rot, nod, syskon, ättling, barn, och andra relationer. CSSOM påminner om Document Object Model (DOM).

Båda är en del av tolkningsvägen vilken är en serie av steg som måste ske på ordentligt vis för att tolka en webbsajt. CSSOM, tillsammans med DOM, bygger detta tolkningsträd, vilket i sin tur används av webbläsaren för att utforma webbsajten på det vis det är tänkt.
källa: https://developer.mozilla.org/en-US/docs/Glossary/CSSOM

Mer om CSSOM:
https://varvy.com/performance/cssom.html
https://css-tricks.com/an-introduction-and-guide-to-the-css-object-model-cssom/
https://www.hongkiat.com/blog/css-object-model-cssom/