De beginnershandleiding voor CSS Object Model (CSSOM)

Er gebeurt veel tussen de eerste HTTP-verzoek en de Uiterlijke levering van een webpagina. Datatransmissie en de pijplijn van de browser vereisen veel verschillende technologieën, een daarvan is de CSS-objectmodel, of de CSSOM.

Het CSS-objectmodel neemt de CSS-code en geeft elke selector weer in een boomstructuur voor eenvoudiger parseren. Misschien is het niet cruciaal voor ontwikkelaars om dit concept volledig te begrijpen, maar het is een waardevol onderwerp om te studeren als je er meer over wilt leren hoe browsers code weergeven in een werkende website.

In dit bericht ga ik de basisbeginselen van het CSS-objectmodel bespreken en laten zien hoe het werkt.

Wat is CSSOM?

De term CSS-objectmodel beschrijft a kaart van alle CSS-selectors en relevante eigenschappen voor elke selector. Deze stijlen kunnen rootelementen zijn of geneste kinderen hebben.

CSSOM lijkt veel op de DOM in HTML, wat staat voor Document Object Model. Beiden maken deel uit van de kritieke weergavepad wat een reeks stappen is die moet gebeuren een website correct weergeven. Al deze processen gebeuren automatisch, Achter de schermen.

Dus waarom is CSSOM belangrijk? Het is de kaart die door de browser wordt gebruikt correct CSS-stijlen weergeven op een webpagina. Er is geen gemakkelijke manier om een computer te vertellen dat alle alinea's in a .belangrijkste inhoud div moet extra lijnhoogte hebben.

De oplossing is het CSS-objectmodel dat brengt alle elementen en eigenschappen in kaart van je CSS-code.

CSSOM maakt het voor de browser gemakkelijker om te renderstijlen op de pagina. Het geheel is erg technisch, maar het is de moeite waard om een beetje over het proces te begrijpen, vooral als je websites bouwt.

Hoe het werkt

Zowel de DOM en CSSOM zijn veel gebruikt door alle webbrowsers om webpagina's te interpreteren en te renderen. Het onderstaande diagram is afkomstig uit de gids Web Fundamentals van Google Developers en legt uit hoe het DOM wordt weergegeven in een webbrowser.

In zowel de DOM & CSSOM is alle informatie omgezet van bytes in digitale kaarten die elk element in een webdocument weergeven. Het proces werkt als volgt:

De browser downloadt de HTML voor een webpagina.
Tijdens het verwerken van de HTML kan de parser een linkelement tegenkomen verwijzen naar een externe stylesheet.
Dit CSS-stylesheet is dan geparseerd in een kaart met behulp van de CSS Object Model-specificaties.
De resulterende code kan dan zijn toegepast op elementen in de DOM.

Dit alles gebeurt erg snel en gebeurt bij elke afzonderlijke paginavraag. Dit andere diagram hieronder toont een voorbeeld boomstructuur van de CSSOM.

Merk op hoe sommige eigenschappen in het diagram lichtere grijze lettertypekleuren hebben. Deze eigenschappen zijn geërfd van de ouder. Aangezien het hoofdgedeelte een specifieke lettergrootte heeft, krijgen alle elementen in het hoofdgedeelte ook die lettergrootte tenzij deze wordt overschreven.

HTML- en CSS-reeksen zijn omgezet in tokens wat dan kan zijn begrepen als knooppunten door de browser. Deze knooppunten zijn als objecten binnen de boomstructuur die definieert hoe de hele pagina moet worden geconstrueerd.

De CSSOM en DOM zijn volledig afzonderlijke datamodellen, daarom zijn ze apart van elkaar gepareerd. Maar ze hebben allebei soortgelijke boomstructuren, en beide hebben hetzelfde doel: de browser een structuur geven om verschillende elementen op de pagina weer te geven en te identificeren.

Waarom webontwikkelaars moeten zorgen

Sinds alle weergave gebeurt op de backend, u hoeft zich echt geen zorgen te maken over de CSSOM-structuur. Maar het kan handig zijn om te begrijpen hoe het werkt.

Een ding om te onthouden is dat de CSSOM moet volledig zijn geladen voordat de webpagina wordt weergegeven, omdat deze bepaalt hoe elk element op de pagina eruit moet zien. Als de pagina vóór de CSSOM werd geladen, zou deze eerst als gewone HTML worden weergegeven, een paar seconden later gevolgd door de stijlen.

Browsers vermijden dat specifiek omdat het verwarrend zou zijn voor eindgebruikers. En het is vermeldenswaard dat de CSSOM kan niet worden gecached; het moet zijn opnieuw gemaakt op elke pagina.

Werkelijke CSS-bestanden kunnen in de cache worden opgeslagen om de items sneller te laden, maar een pagina in de browser weer te geven vereist altijd het uitvoeren van de CSSOM-parser. Dit betekent ook dat JavaScript een negatieve invloed kan hebben op rendering en prestaties.

Ik zou het ten zeerste aanbevelen dit artikel te lezen voor meer informatie over externe CSS / JS-bronnen en hun laadtijden.

De beste manier om uw site te optimaliseren, is door een natuurlijke cascade van middelen die worden achter elkaar geladen.

Het is mogelijk om de CSSOM te manipuleren met behulp van JavaScript, omdat het technisch gezien een JS-API is. Maar het dient niet veel van een doel in vergelijking met JavaScript DOM-manipulatie.

De belangrijkste reden om meer te leren over de CSSOM is om jezelf verder te informeren over hoe websites daadwerkelijk werken.

Er zijn veel dingen die we als vanzelfsprekend beschouwen en die ervoor zorgen dat internet op rolletjes loopt. Als je iets meer over het hele proces begrijpt, kun je visualiseren hoe het geheel bij elkaar komt en hopelijk meer waardering krijgen voor het bestaan van het World Wide Web.

Verder lezen

Ik hoop dat deze intro je een goed idee kan geven van wat het CSS-objectmodel is en hoe het invloed heeft op webpagina's. Er is niet veel om te manipuleren in de CSSOM, dus het verschilt een beetje van de DOM.

Het is echter nog steeds een cruciale technologie in webontwikkeling en zou de belangrijkste aspecten van browserweergave moeten verduidelijken.

Er zijn veel andere bronnen die de CSSOM bespreken en hoe deze werkt. Als u meer informatie wilt, kunt u het volgende lezen:

CSS Object Model Overzicht
De CSSOM verkennen: een CSS-objectanalysator maken
Wat elke ontwikkelaar van het frontend moet weten over het weergeven van webpagina's