{"id":745911,"date":"2023-10-14T22:09:27","date_gmt":"2023-10-15T04:09:27","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/nyborjarguiden-till-css-object-model-cssom\/"},"modified":"2023-10-14T22:09:27","modified_gmt":"2023-10-15T04:09:27","slug":"nyborjarguiden-till-css-object-model-cssom","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/nyborjarguiden-till-css-object-model-cssom\/","title":{"rendered":"Nyb\u00f6rjarguiden till CSS Object Model (CSSOM)"},"content":{"rendered":"

M\u00e5nga saker h\u00e4nder emellan f\u00f6rsta HTTP-f\u00f6rfr\u00e5gan<\/strong> och den slutgiltig leverans<\/strong> av en webbsida. Data\u00f6verf\u00f6ringen och renderingsprocessen f\u00f6r webbl\u00e4saren kr\u00e4ver m\u00e5nga olika tekniker, en av dem \u00e4r CSS-objektmodell<\/a><\/strong>eller den CSSOM<\/strong>.<\/p>\n

CSS-objektmodellen tar CSS-koden och representerar varje v\u00e4ljare i en tr\u00e4dstruktur<\/strong> f\u00f6r att underl\u00e4tta analysen. Det kanske inte \u00e4r avg\u00f6rande f\u00f6r utvecklare att helt f\u00f6rst\u00e5 detta koncept, men det \u00e4r ett v\u00e4rdefullt \u00e4mne att studera om du vill l\u00e4ra dig mer om det. hur webbl\u00e4sare renderar kod till en fungerande webbplats<\/strong>.<\/p>\n

I det h\u00e4r inl\u00e4gget kommer jag att t\u00e4cka grunderna i CSS-objektmodellen och visa dig hur det fungerar.<\/p>\n

<\/span>Vad \u00e4r CSSOM?<\/span><\/h5>\n

Termen CSS-objektmodell beskriver en mappa alla CSS-v\u00e4ljare och relevanta egenskaper f\u00f6r varje v\u00e4ljare<\/strong>. Dessa stilar kan vara rotelement eller ha kapslade underordnade.<\/p>\n

CSSOM \u00e4r v\u00e4ldigt lik DOM i HTML<\/strong>, som st\u00e5r f\u00f6r Document Object Model. B\u00e5da \u00e4r en del av kritisk renderingsv\u00e4g<\/a><\/strong> vilket \u00e4r en rad steg som m\u00e5ste h\u00e4nda rendera en webbplats korrekt<\/strong>. Alla dessa processer sker automatiskt<\/strong>bakom kulisserna.<\/p>\n

S\u00e5 varf\u00f6r \u00e4r CSSOM viktigt? Det \u00e4r den karta som navigatorn anv\u00e4nder f\u00f6r att rendera CSS-stilar korrekt<\/strong> P\u00e5 en hemsida. Det finns inget enkelt s\u00e4tt att tala om f\u00f6r en dator att alla stycken i en .main-content div ska ha extra radh\u00f6jd.<\/p>\n

L\u00f6sningen \u00e4r CSS-objektmodellen som kartl\u00e4gger alla element och egenskaper<\/strong> av din CSS-kod.<\/p>\n

CSSOM g\u00f6r det enklare f\u00f6r webbl\u00e4saren rendera stilar p\u00e5 sidan<\/strong>. Det hela \u00e4r v\u00e4ldigt tekniskt, men det \u00e4r v\u00e4rt att f\u00f6rst\u00e5 processen lite, speciellt om du bygger webbplatser.<\/p>\n

<\/span>Hur fungerar det<\/span><\/h5>\n

B\u00e5de DOM och CSSOM \u00e4r det anv\u00e4nds ofta av alla webbl\u00e4sare<\/strong> att tolka och rendera webbsidor. F\u00f6ljande diagram \u00e4r Google Developer’s Guide to Web Fundamentals<\/a>och f\u00f6rklara hur DOM renderas i en webbl\u00e4sare<\/strong>.<\/p>\n

<\/figure>\n

I b\u00e5de DOM och CSSOM finns all information konverteras fr\u00e5n byte till digitala kartor<\/strong> som representerar varje element i ett webbdokument. Processen fungerar enligt f\u00f6ljande:<\/p>\n

    \n
  1. Navigatorn ladda ner HTML<\/strong> f\u00f6r en webbsida.<\/li>\n
  2. Under bearbetning av HTML kan parsern st\u00f6ta p\u00e5 ett l\u00e4nkelement h\u00e4nvisar till en extern stilmall<\/strong>.<\/li>\n
  3. Denna CSS-stilmall \u00e4r d\u00e5 analyseras p\u00e5 en karta<\/strong> anv\u00e4nda CSS-objektmodellspecifikationer<\/a>.<\/li>\n
  4. Den resulterande koden kan d\u00e5 vara till\u00e4mpas p\u00e5 element i DOM<\/strong>.<\/li>\n<\/ol>\n

    Allt detta sker v\u00e4ldigt snabbt och intr\u00e4ffar med varje sidf\u00f6rfr\u00e5gan<\/strong>. Detta andra diagram nedan visar en Exempel p\u00e5 CSSOM-tr\u00e4dstruktur<\/strong>.<\/p>\n

    <\/figure>\n

    L\u00e4gg m\u00e4rke till hur vissa egenskaper i diagrammet har ljusare gr\u00e5 f\u00e4rger. Dessa egenskaper \u00e4r \u00e4rvt<\/a> av fadern<\/strong>. Eftersom br\u00f6dtexten har en specifik teckenstorlek f\u00e5r alla element i kroppen ocks\u00e5 den teckenstorleken om de inte \u00e5sidos\u00e4tts.<\/p>\n

    HTML- och CSS-str\u00e4ngar \u00e4r omvandlas till tokens<\/strong> vilket d\u00e5 kan vara f\u00f6rst\u00e5s som noder<\/strong> av webbl\u00e4saren. Dessa noder \u00e4r som objekt inom tr\u00e4dstrukturen<\/strong> som definierar hur hela sidan ska byggas.<\/p>\n

    CSSOM och DOM \u00e4r helt separata datamodeller<\/strong>d\u00e4rf\u00f6r \u00e4r de det analyseras separat fr\u00e5n varandra<\/strong>. Men det har de b\u00e5da liknande tr\u00e4dstrukturer<\/strong>och b\u00e5da har samma syfte: att ge webbl\u00e4saren en struktur f\u00f6r att representera och identifiera olika element p\u00e5 sidan.<\/p>\n

    <\/span>Varf\u00f6r webbutvecklare b\u00f6r bry sig<\/span><\/h5>\n

    Sedan all rendering h\u00e4nder i backend<\/strong>, du beh\u00f6ver egentligen inte oroa dig mycket f\u00f6r CSSOM-tr\u00e4det. Men det kan vara bra att f\u00f6rst\u00e5 hur det fungerar.<\/p>\n

    En sak att komma ih\u00e5g \u00e4r att CSSOM m\u00e5ste vara fulladdat<\/strong> innan webbsidan visas, eftersom den kommer att definiera hur varje element p\u00e5 sidan ska se ut. Om sidan laddades f\u00f6re CSSOM kommer den att visas som vanlig HTML f\u00f6rst, f\u00f6ljt av stilarna n\u00e5gra sekunder senare.<\/p>\n

    Webbl\u00e4sare undviker specifikt detta eftersom det skulle vara f\u00f6rvirrande f\u00f6r slutanv\u00e4ndare. Och det \u00e4r v\u00e4rt att notera att CSSOM kan inte cachelagras<\/strong>; m\u00e5ste vara \u00e5terskapas p\u00e5 varje sida<\/strong>.<\/p>\n

    Faktiska CSS-filer kan cachelagras f\u00f6r att ladda resurser snabbare men rendera en sida i webbl\u00e4saren. kr\u00e4ver alltid att CSSOM-parsern k\u00f6rs<\/strong>. Detta inneb\u00e4r ocks\u00e5 att JavaScript kan ha en negativ inverkan p\u00e5 rendering och prestanda.<\/p>\n

    Jag skulle starkt rekommendera det l\u00e4ser den h\u00e4r artikeln<\/a> f\u00f6r mer information om externa CSS\/JS-resurser och deras laddningstider.<\/p>\n

    Det b\u00e4sta s\u00e4ttet att optimera din webbplats \u00e4r att skapa en naturligt vattenfall<\/strong> av resurser som debiteras samtidigt<\/strong>.<\/p>\n

    Det \u00e4r m\u00f6jligt att manipulera CSSOM med JavaScript eftersom det \u00e4r det tekniskt sett ett JS API<\/a>. Men det \u00e4r inte till stor nytta j\u00e4mf\u00f6rt med JavaScript DOM-manipulation<\/a>.<\/p>\n

    Det viktigaste sk\u00e4let att l\u00e4ra sig om CSSOM \u00e4r att bli b\u00e4ttre informerad om hur webbplatser verkligen fungerar.<\/p>\n

    Det finns m\u00e5nga saker vi tar f\u00f6r givet som g\u00f6r att internet fungerar smidigt. N\u00e4r du f\u00f6rst\u00e5r lite mer om hela processen kommer du att kunna visualisera hur det hela utspelar sig, och f\u00f6rhoppningsvis kommer du att f\u00e5 lite uppskattning f\u00f6r existensen av World Wide Web.<\/p>\n

    <\/span>Andra l\u00e4sningar<\/span><\/h5>\n

    Jag hoppas att den h\u00e4r introduktionen kan ge dig en solid uppfattning om vad CSS-objektmodellen \u00e4r och hur den p\u00e5verkar webbsidor. d\u00e4r Det finns inte mycket att manipulera i CSSOM.<\/strong>s\u00e5 det skiljer sig lite fr\u00e5n DOM.<\/p>\n

    Det \u00e4r dock fortfarande en kritisk teknik inom webbutveckling och b\u00f6r klarg\u00f6ra viktiga aspekter av webbl\u00e4sarrendering.<\/p>\n

    Det finns m\u00e5nga andra resurser som diskuterar CSSOM och hur det fungerar. Om du vill l\u00e4ra dig mer, h\u00e4r \u00e4r n\u00e5gra inl\u00e4gg jag rekommenderar:<\/p>\n

    \n
    \n

    Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n