Hur fungerar en webbläsare? Visning av webbsidor utförs av program - webbläsare

Hur webben fungerar ger en förenklad bild av vad som händer när du visar en webbsida i en webbläsare på din dator eller telefon.

Denna teori är inte nödvändig för att skriva webbkod på kort sikt, men inom kort kommer du verkligen att börja dra nytta av att förstå vad som händer i bakgrunden.

Klienter och servrar

Datorer som är anslutna till webben kallas klienter och servrar. Ett förenklat diagram över hur de interagerar kan se ut så här:

Klienter är den typiska webbanvändarens internetanslutna enheter (till exempel din dator ansluten till ditt Wi-Fi, eller din telefon ansluten till ditt mobila nätverk) och webbåtkomstprogramvara som är tillgänglig på dessa enheter (vanligtvis en webbläsare som Firefox eller Chrome).
Servrar är datorer som lagrar webbsidor, webbplatser eller appar. När en klientenhet vill komma åt en webbsida laddas en kopia av webbsidan ner från servern till klientmaskinen för att visas i användarens webbläsare.

De andra delarna av verktygslådan

Klienten och servern vi har beskrivit ovan berättar inte hela historien. Det finns många andra delar inblandade, och vi kommer att beskriva dem nedan.

För nu, låt oss föreställa oss att webben är en väg I ena änden av vägen är klienten, som är som ditt hus I andra änden av vägen är servern, som är en butik du vill köpa något från.

Förutom klienten och servern måste vi också säga hej till:

Din internetanslutning: Låter dig skicka och ta emot data på webben. Det är i princip som gatan mellan ditt hus och butiken.
TCP/IP : Transmission Control Protocol och Internet Protocol är kommunikationsprotokoll som definierar hur data ska färdas över webben. Det här är som transportmekanismerna som låter dig göra en beställning, gå till butiken och köpa dina varor. I vårt exempel är detta som en bil eller en cykel (eller hur du än kan ta dig runt).
DNS: Domännamnsservrar är som en adressbok för webbplatser. När du skriver en webbadress i din webbläsare tittar webbläsaren på DNS för att hitta webbplatsens riktiga adress innan den kan hämta webbplatsen. Webbläsaren måste ta reda på vilken server webbplatsen bor på, så den kan skicka HTTP-meddelanden till rätt plats (se nedan) Detta är som att leta upp adressen till butiken så att du kan komma åt den.
HTTP: Hypertext Transfer Protocol är ett applikationsprotokoll som definierar ett språk för klienter och servrar att tala med varandra. Detta är som språket du använder för att beställa dina varor.
Komponentfiler : En webbplats består av många olika filer, som är som de olika delarna av varorna du köper från butiken. Dessa filer finns i två huvudtyper:
- Kodfiler : Webbplatser byggs huvudsakligen från HTML, CSS och JavaScript, även om du kommer att möta andra tekniker lite senare.
- Tillgångar : Detta är ett samlingsnamn för alla andra saker som utgör en webbplats, som bilder, musik, video, Word-dokument och PDF-filer.

Så vad händer, exakt?

När du skriver en webbadress i din webbläsare (för vår analogi är det som att gå till butiken):

Webbläsaren går till DNS-servern och hittar den riktiga adressen till servern som webbplatsen bor på (du hittar adressen till butiken).

Webbläsaren skickar ett HTTP-begäranmeddelande till servern och ber den att skicka en kopia av webbplatsen till klienten (du går till butiken och beställer dina varor). Detta meddelande, och all annan data som skickas mellan klienten och servern, skickas över din internetanslutning med TCP/IP.

Om servern godkänner klientens begäran skickar servern ett "200 OK" meddelande till klienten, vilket betyder "Självklart kan du titta på den webbplatsen! Här är den" och börjar sedan skicka webbplatsens filer till webbläsaren som en serie små bitar som kallas datapaket (butiken ger dig dina varor och du tar tillbaka dem till ditt hus).

Webbläsaren sätter ihop de små bitarna till en komplett webbplats och visar den för dig (varorna kommer till din dörr - nya glänsande grejer, fantastiskt!).

DNS förklaras

Riktiga webbadresser är inte de trevliga, minnesvärda strängarna du skriver in i adressfältet för att hitta dina favoritwebbplatser. De är speciella nummer som ser ut så här: 63.245.215.20.

Paketen förklaras

Tidigare använde vi termen "paket" för att beskriva det format i vilket data skickas från server till klient. Vad menar vi här? I grund och botten, när data skickas över webben, skickas det som tusentals små bitar, så att många olika webbanvändare kan ladda ner samma webbplats samtidigt. Om webbplatser skickades som enstaka stora bitar kunde bara en användare ladda ner en åt gången, vilket uppenbarligen skulle göra webben väldigt ineffektiv och inte särskilt rolig att använda.

Webbsidor skapas med hjälp av ett programmeringsspråk som kallas HTML (Hyper Text Markup Language). För att se sådana sidor används speciella program - webbläsare. De mest populära webbläsarna är Microsoft Internet Explorer, Fire Fox, Opera, Google Chrome. Webbläsare kan inte bara återge all information som publiceras på en webbsida på skärmen (text, bild, animation, video), utan också skicka ljud till högtalare eller hörlurar. När du har lärt dig hur du använder en webbläsare kommer du att kunna hitta den information du behöver på Internet. För att fungera effektivt på Internet är valet av webbläsare viktigt. De viktigaste egenskaperna som du bör vara uppmärksam på när du väljer en webbläsare: säkerhet, funktionalitet, hastighet.

Webbläsaren söker efter en webbsida på en specifik webbplats som du tidigare gjort en begäran om och visar den på skärmen. Vi kan säga att sidan är som en bok, där alla sidor är organiserade tematiskt och lagrade tillsammans. Varje webbplats har en huvudsida som kallas startsidan. Det kan jämföras med omslaget på en tidning eller förstasidan på en tidning. Vanligtvis har en sådan sida en original, specialdesignad design som förkroppsligar idén med webbplatsen. Det är här du kan bekanta dig med innehållet på webbplatsen med hjälp av den så kallade kartan eller navigeringspanelen. Syftet med dessa element är att hjälpa besökaren att komma till andra webbsidor på sajten. Det är väldigt enkelt att navigera från en webbsida till en annan i din webbläsare. Denna process kallas ofta för webbsurfning. När du startar webbläsaren för första gången visas en webbsida i dess fönster, som ställdes in som hem i datorinställningarna (mer exakt, i webbläsarens egenskaper). I det här fallet är termen "hem" en webbsida utformad för att öppnas automatiskt.

Webbläsarfunktioner. Låt oss titta på huvudfunktionerna i webbläsare som använder Internet Explorer som ett exempel:

Visar både textinformation och spelar upp video, animation och ljud.

Automatiskt skapande av en lista över noder som har besökts tidigare.

Gå till tidigare visade webbsidor (med knapparna "Tillbaka" och "Framåt").

Sök på webbplatser med nyckelfraser eller ord.

Arbeta med dina favoritwebbsidor genom att spara genvägar till mappen Favoriter i systemet.

Internet Explorer fungerar som en filhanterare (liknar Explorer i Windows).

Webbläsaren Internet Explorer fungerar i två huvudlägen: online och offline. I offlineläge (d.v.s. utan internetanslutning) kan du utföra operationer med mappar och filer, samt visa webbsidor sparade på din hårddisk.

Webbläsarfönster. Observera att fönstren i alla webbläsare innehåller liknande element, men de kan se ut och vara placerade något annorlunda.
Låt oss titta på webbläsaren Internet Explorer som ett exempel:

Internet Explorer-menyn består av följande poster: Arkiv, Redigera, Visa, Favoriter, Verktyg, Hjälp.

Panelen Gemensamma knappar innehåller följande verktyg:

Tillbaka - visa det tidigare visade webbdokumentet;

Framåt - visa nästa sida;

Stoppa - sluta ladda webbsidan;

Hem - gå tillbaka till startsidan;

Sök - aktivera sökfältet;

Favoriter - visar en lista över resurser som lagts till i "favoriter";

Logg - visar en lista över noder som har visats tidigare;

Mail - öppnar e-postprogrammets fönster;

Skriv ut - skriv ut den aktuella webbsidan.

Under panelen "Vanliga knappar" finns panelen "Adress", som har ett fält för att ange en adress och en rullgardinslista med tidigare besökta Internetresurser. I adressfältet kan du ange en ny resurs som du ska besöka, eller namnet på en fil på disken som du vill visa med hjälp av en webbläsare.

Den stora (stora) delen av webbläsarfönstret upptas av dokumentzonen, som återspeglar den aktuella webbsidan eller dokumentet som öppnats med Internet Explorer.

Längst ner i Internet Explorer-fönstret finns en statusrad med information om aktuella operationer som utförs av programmet (till exempel upprätta en anslutning, ladda en sida, etc.).

Din webbläsare kanske inte stöder funktionen i den här artikeln.

ForEach.call(document.querySelectorAll("header .date a"), function(elem, i) ( elem.textContent += " (" + ["författare","editor"][i] + ")"; ) );

Förord

Den här detaljerade guiden till WebKits och Geckos inre funktioner är resultatet av omfattande forskning av den israeliska webbprogrammeraren Tali Garciel. Hon ägnade flera år åt att spåra all publicerad information om hur webbläsare fungerar (se avsnitt), och ägnade mycket tid åt att analysera deras källkod. Så här skriver Tali själv:

När 90 % av datorerna hade IE installerad var vi tvungna att acceptera att det var en mystisk svart låda, men nu när mer än hälften av användarna väljer webbläsare med öppen källkod är det dags att ta reda på vad som döljer sig inuti dem, i miljontals rader av mjukvarukod i C++... Tali publicerade resultaten av studien på sin hemsida, men vi anser att de förtjänar uppmärksamhet från en bredare publik, så vi lägger upp dem här med några förkortningar.

En webbutvecklare som är bekant med webbläsares interna funktion fattar bättre beslut och förstår varför vissa verktyg bör väljas. Det här är ett ganska långt dokument, men vi rekommenderar att du läser det så noggrant som möjligt och garanterar att du inte kommer att ångra dig. Paul Irish, Chrome Developer Relations

Introduktion

Webbläsare är kanske de vanligaste applikationerna. I den här handledningen förklarar jag hur de fungerar. Vi ska titta närmare på vad som händer från det att du skriver google.ru i adressfältet tills Google-sidan visas på din skärm.

Vilka webbläsare kommer vi att överväga?

Idag finns det fem huvudwebbläsare: Internet Explorer, Firefox, Safari, Chrome och Opera. Exemplen använder webbläsare med öppen källkod: Firefox, Chrome och Safari (delvis öppen källkod). Enligt webbläsaranvändningsstatistik på webbplatsen StatCounter, från och med augusti 2011, var webbläsare Firefox, Safari och Chrome installerade på totalt 60 % av enheterna. Därmed har webbläsare med öppen källkod en mycket stark position idag.

Grundläggande webbläsarfunktioner

Huvudsyftet med en webbläsare är att visa webbresurser. För att göra detta skickas en förfrågan till servern och resultatet visas i webbläsarfönstret. Resurser hänvisar i allmänhet till HTML-dokument, men de kan också vara en PDF-fil, en bild eller annat innehåll. Platsen för en resurs identifieras av en URI (Uniform Resource Identifier).

Hur en webbläsare bearbetar och visar HTML-filer bestäms av HTML- och CSS-specifikationerna. De utvecklas av konsortiet W3C, som implementerar standarder för Internet.
Under många år uppfyllde webbläsare bara en del av specifikationerna, och separata tillägg skapades för dem. För webbutvecklare innebar detta allvarliga kompatibilitetsproblem. Idag uppfyller de flesta webbläsare alla specifikationer i större eller mindre utsträckning.

Användargränssnitten för olika webbläsare har mycket gemensamt. Huvudelementen i webbläsargränssnittet listas nedan.

Adressfält för att ange URI
Navigeringsknappar Bakåt och Framåt
Bokmärken
Uppdatera och stoppa sidladdningsknappar
Hem-knapp för att gå till huvudsidan

Märkligt nog finns det ingen specifikation som definierar standarder för webbläsarens användargränssnitt. Moderna gränssnitt är resultatet av många års utveckling, liksom det faktum att utvecklare delvis kopierar varandra. HTML5-specifikationen anger inte vad webbläsargränssnittet ska innehålla, men den listar några grundläggande element. Dessa inkluderar adressfältet, statusfältet och verktygsfältet. Naturligtvis finns det också specifika funktioner, såsom nedladdningshanteraren i Firefox.

Struktur på högsta nivå

Huvudkomponenterna i webbläsaren () listas nedan.

Användargränssnitt - inkluderar adressfältet, bakåt- och framåtknappar, bokmärkesmeny, etc. Detta inkluderar allt utom fönstret där den begärda sidan visas.

Browser Engine – styr interaktionen mellan gränssnittet och displaymodulen.

Displaymodul – ansvarig för att visa det begärda innehållet på skärmen. Till exempel, om ett HTML-dokument efterfrågas, analyserar renderaren HTML- och CSS-koden och visar resultatet på skärmen.

Nätverkskomponenter - utformade för att göra nätverksanrop såsom HTTP-förfrågningar. Deras gränssnitt är oberoende av plattformstypen, som var och en har sina egna implementeringar.

Den främre delen av användargränssnittet används för att rendera grundläggande widgets som fönster och kombinationsrutor. Dess universella gränssnitt är också oberoende av plattformstypen. Exekveringsdelen tillämpar alltid användargränssnittsmetoderna för ett specifikt operativsystem.

JavaScript-tolk – Används för att analysera och köra JavaScript-kod.

Datalagring – nödvändigt för att processbeständighet ska fungera. Webbläsaren lagrar olika typer av data, såsom cookies, på din hårddisk. Den nya HTML-specifikationen (HTML5) definierar termen "webbdatabas" som en fullfjädrad (om än lätt) webbläsarbaserad databas.

Teckning . Grundläggande webbläsarkomponenter.

Det bör noteras att Chrome, till skillnad från de flesta webbläsare, använder flera instanser av visningsmodulen, en på varje flik, som är separata processer.

Displaymodul

Som du kan gissa från namnet är displaymodulen ansvarig för att visa det begärda innehållet på webbläsarskärmen.

Som standard kan den visa HTML- och XML-dokument, såväl som bilder. Särskilda plug-ins (webbläsartillägg) gör det möjligt att visa annat innehåll, till exempel PDF-filer. Det här kapitlet fokuserar dock på kärnfunktionaliteten: att visa HTML-dokument och bilder formaterade med CSS-stilar.

Displaymoduler

Webbläsarna vi är intresserade av (Firefox, Chrome och Safari) använder två displaymoduler. Firefox använder Mozillas egen Gecko, medan Safari och Chrome använder WebKit.

WebKit är en renderare med öppen källkod som ursprungligen utvecklades för Linux-plattformen och anpassades av Apple för Mac OS och Windows. För mer information, besök webkit.org.

Grundläggande arbetsschema

Displaymodulen tar emot innehållet i det begärda dokumentet via ett nätverkslagerprotokoll, vanligtvis i 8 KB-bitar.

Diagrammet för ytterligare drift av displaymodulen ser ut som följande.

Teckning . Funktionsschema för displaymodulen.

Renderaren analyserar HTML-dokumentet och översätter taggarna till noder i innehållsträdet. Stilinformation hämtas från både externa CSS-filer och stilelement. Denna information och visningsinstruktioner i HTML-filen används för att skapa ett annat träd - .

Den innehåller rektanglar med visuella attribut som färg och storlek. Rektanglarna är ordnade i den ordning som de ska visas på skärmen.

Efter att ha skapat visningsträdet börjar element, under vilka varje nod tilldelas koordinaterna för den punkt på skärmen där den ska visas. Sedan körs det, där noderna i visningsträdet ritas sekventiellt med användning av exekveringsdelen av användargränssnittet.

Det är viktigt att förstå att detta är en sekventiell process. För användarens bekvämlighet försöker renderaren få innehåll till skärmen så snabbt som möjligt, så att skapande av visningsträd och layout kan börja innan tolkningen av HTML-koden är klar. Vissa delar av dokumentet tolkas och visas på skärmen, medan andra bara överförs över nätverket.

Exempel på arbete Figur. Funktionsschema för WebKit-displaymodulen. Teckning . Driftschema för Mozilla Gecko displaymodul ().

Som du kan se från figurerna 3 och 4 använder WebKit och Gecko olika terminologi, men deras driftsmönster är nästan identiska.

I Gecko kallas ett träd med visuellt formaterade element ett ramträd, där varje element är en ram. WebKit använder ett renderingsträd som består av renderingsobjekt. Att placera element i WebKit kallas layout, eller layout, och i Gecko kallas det reflow. Att kombinera DOM-noder och visuella attribut för att skapa ett visningsträd kallas en bilaga i WebKit. En liten skillnad i Gecko som inte har med semantik att göra är att det finns ytterligare ett lager mellan HTML-filen och DOM-trädet. Det kallas en innehållssänka och används för att bilda DOM-element. Låt oss nu prata mer detaljerat om varje steg i arbetet.

Parsing: Allmän information

Eftersom parsning är ett viktigt steg i driften av displaymodulen, låt oss titta på det mer detaljerat. Låt oss börja med en kort introduktion.

Att analysera ett dokument innebär att konvertera det till en läsbar och körbar struktur. Resultatet av analys är vanligtvis ett träd av noder som representerar dokumentets struktur. Det kallas ett analysträd, eller helt enkelt ett syntaxträd.

Att till exempel analysera uttrycket 2 + 3 – 1 kan resultera i ett träd så här:

Teckning . Trädnod för ett matematiskt uttryck. Grammatik

Analysen fungerar utifrån vissa regler som bestäms av dokumentets språk (format). Varje format har grammatiska regler som består av ordförråd och syntax. De bildar den sk. . Naturliga språk följer inte reglerna för kontextfri grammatik, så standardanalystekniker är inte lämpliga för dem.

Parser och lexikalanalysatorer

Lexikal analys används tillsammans med syntaktisk analys.

Lexikal analys är uppdelningen av information i tokens eller lexem. Tokens utgör ordboken för ett visst språk och är konstruktiva element för att skapa dokument. I naturligt språk skulle tokens vara alla ord som kan hittas i ordböcker.

Poängen med att analysera är att tillämpa språkets syntaktiska regler.

Dokumentanalys utförs vanligtvis av två komponenter: en lexikalanalysator, som analyserar inmatningssekvensen av tecken till giltiga tokens, och en parser, som analyserar dokumentets struktur enligt de syntaktiska reglerna för ett givet språk och genererar ett syntaxträd. Analysatorn ignorerar oinformativa tecken som mellanslag och radbrytningar.

Teckning . Övergång från källdokumentet till syntaxträdet.

Parsing är en iterativ process. Parsern ber vanligtvis lexern om en ny token och kontrollerar den för att se om den matchar någon av syntaxreglerna. Om en matchning görs skapas en ny nod i syntaxträdet för token, och analyseraren begär nästa token.

Om en token inte matchar några regler, lägger parsern den åt sidan och frågar efter nästa token. Detta fortsätter tills en regel hittas som matchar alla uppskjutna tokens. Om en sådan regel inte kan hittas gör analysatorn ett undantag. Detta innebär att dokumentet innehåller syntaxfel och inte kan bearbetas helt.

Översättning

Syntaxträdet är inte alltid det slutliga resultatet. Parsing används ofta i processen att översätta ett indatadokument till önskat format. Ett exempel skulle vara sammanställning. Kompilatorn, som översätter källkod till maskinkod, analyserar den först och bildar ett syntaxträd och skapar först därefter ett dokument med maskinkod baserat på detta träd.

Teckning . Sammanställningsstadier. Parsing exempel

Figur 5 visar ett syntaxträd baserat på ett matematiskt uttryck. Låt oss definiera ett elementärt matematiskt språk och överväga analysprocessen.

Ordförråd: Vårt språk kan innehålla heltal, plus- och minustecken.

Syntax

Byggstenarna i ett språk är uttryck, operander och operatorer.

Ett språk kan innehålla hur många uttryck som helst.

Ett uttryck är en sekvens som består av en operand, en operator och en annan operand.

Operatören är ett plus- eller minustecken.

Operanden är ett heltalstoken eller ett uttryck.

Tänk på inmatningssekvensen för symbolerna 2 + 3 – 1.
Det första elementet som matchar regeln är 2 (enligt regel #5 är detta operanden). Det andra sådana elementet är 2 + 3 (sekvensen som består av en operand, en operator och en annan operand definieras av regel nr 3). Vi hittar nästa matchning i slutet: sekvensen 2 + 3 – 1 är ett uttryck. Eftersom 2+3 är en operand får vi en sekvens bestående av en operand, en operator och en annan operand, vilket motsvarar definitionen av uttrycket. Rad 2 + + matchar inte reglerna och skulle därför anses ogiltig.

Formell definition av ordförråd och syntax

Språket från exemplet ovan kan definieras så här:

HELTAL:0|* PLUS: + MINUS: - Som du kan se definieras heltal av ett reguljärt uttryck.

Syntaxen beskrivs vanligtvis i BNF-format. Språket från exemplet ovan kan beskrivas på följande sätt:

Uttryck:= term operation term operation:= PLUS | MINUS term:= HELTAL | uttryck

Som redan nämnts kan ett språk bearbetas med hjälp av standardtolkare om dess grammatik sammanhangslöst, det vill säga kan uttryckas fullt ut i BNF-format. En formell definition av sammanhangsfri grammatik finns i denna Wikipedia-artikel.

Typer av parsers

Det finns två typer av parsers: uppifrån och ner och nerifrån och upp. De förra utför analyser från topp till botten, och de senare från botten till toppen. Top-down-tolkare analyserar strukturen på översta nivån och letar efter syntaktiska regler. Bottom-up-parsers bearbetar först inmatningssekvensen av tecken och identifierar gradvis syntaktiska regler i den, som börjar med lågnivåregler och slutar med högnivåregler.

Låt oss nu se hur dessa två typer av analysatorer skulle hantera vårt exempel.

En top-down parser skulle börja med toppnivåregeln och fastställa att 2 + 3 är ett uttryck. Det skulle då bestämma att 2 + 3 – 1 också är ett uttryck (eftersom uttryck bestäms identifieras även matchningar till andra regler, men regeln på översta nivån betraktas alltid först).

Bottom-up-parsern skulle bearbeta sekvensen av tecken tills den hittade en lämplig regel som kunde ersätta det detekterade fragmentet, och så vidare till slutet av sekvensen. Uttryck med en partiell matchning placeras sedan på analysatorstapeln.

När en sådan analysator fungerar skiftas inmatningssekvensen av tecken åt höger (föreställ dig en markör placerad i början av sekvensen och flyttad till höger under analysen) och reduceras gradvis till syntaktiska regler. Automatiskt skapande av parsers

Det finns speciella applikationer för att skapa parsers som kallas generatorer. Det räcker med att ladda språkgrammatiken (ordförråd och syntaxregler) i generatorn, och den skapar automatiskt en analysator. Att skapa en parser kräver en djup förståelse för hur det fungerar, och att göra det manuellt är inte så lätt, så generatorer kan vara mycket användbara.

DOM

Det resulterande syntaxträdet består av DOM-element och attributnoder. DOM - Document Object Model - tjänar till att representera ett HTML-dokument och gränssnittet för HTML-element till externa objekt som JavaScript-kod.
I roten av trädet finns ett dokumentobjekt.

DOM är nästan identisk med uppmärkning. Låt oss titta på ett exempel på uppmärkning:

Hej världen

DOM-trädet för denna markering ser ut så här: Figur. DOM-trädet för markeringen från exemplet.

Med "ett träd innehåller DOM-noder" menar vi att trädet består av element som implementerar ett av DOM-gränssnitten. Webbläsare använder specifika implementeringar som har ytterligare attribut för internt bruk.

Parsningsalgoritm

Som diskuterats i tidigare avsnitt kan HTML-kod inte tolkas med vanliga uppifrån-och-ned-parsers.

Orsakerna till detta listas nedan.

Språket har en "mild" karaktär.

Webbläsare har inbyggda mekanismer för att hantera några vanliga fel i HTML-kod.

Parsningscykeln kännetecknas av möjligheten till återinträde. Källdokumentet ändras vanligtvis inte under tolkningsprocessen, men i fallet med HTML kan skripttaggar som innehåller document.write lägga till nya tokens, så källkoden kan ändras.

Eftersom standardtolkare inte är lämpliga för HTML skapar webbläsare sina egna tolkar.

Analysalgoritmen beskrivs i detalj i HTML5-specifikationen. Den består av två steg: lexikal analys och trädkonstruktion.

Under lexikal analys delas inmatningssekvensen av tecken in i tokens. HTML-tokens inkluderar öppnings- och stängningstaggar, såväl som attributnamn och värden.

Den lexikaliska analysatorn upptäcker token, skickar den till trädkonstruktorn och går vidare till nästa tecken och letar efter ytterligare tokens, till slutet av inmatningssekvensen.

Teckning . Steg för att analysera HTML-kod (källa: HTML5-specifikation). Algoritm för lexikal analys

Resultatet av algoritmen är en HTML-token. Algoritmen uttrycks som en automat med ett ändligt antal tillstånd. I varje tillstånd bearbetas en eller flera symboler i inmatningssekvensen, baserat på vilket nästa tillstånd bestäms. Det beror på lexikalanalysstadiet och trädbildningsstadiet, det vill säga att bearbetning av samma karaktär kan leda till olika resultat (olika tillstånd) beroende på det aktuella tillståndet. Algoritmen är tillräckligt komplex för att beskriva i detalj här, så låt oss titta på ett förenklat exempel för att hjälpa oss att bättre förstå hur det fungerar.

Låt oss utföra en lexikal analys av enkel HTML-kod:

Hej världen

Det initiala tillståndet är "data". När parsern upptäcker ett tecken< , состояние меняется на "открытый тег" . Если далее обнаруживается буква (a–z), создается токен открывающего тега, а состояние меняется на "название тега" . Оно сохраняется, пока не будет обнаружен символ >. Symbolerna läggs till en efter en till namnet på den nya token. I vårt fall är resultatet en html-token.

När tecknet > påträffas anses token vara klar och analysatorn återgår till "data"-tillståndet. Taggen bearbetas exakt likadant. Således har parsern redan genererat html- och body-taggarna och återgått till "data"-tillståndet. Upptäckt av bokstaven H i frasen Hello world resulterar i genereringen av en teckentoken. Samma sak händer med de återstående bokstäverna tills analysatorn når symbolen< в теге . Для каждого символа фразы Hello world создается свой токен.

Parsern återgår sedan till tillståndet "öppen tagg". Detektering av tecknet / resulterar i skapandet av en avslutande tagg-token och en övergång till tillståndet "taggnamn". Det kvarstår tills tecknet > påträffas. Vid denna tidpunkt genereras en ny tagg-token och analysatorn återgår till "data"-tillståndet. Teckensekvensen bearbetas enligt beskrivningen ovan.

Teckning . Lexikalisk analys av inmatningssekvensen av tecken. Algoritm för trädkonstruktion

När en parser skapas genereras ett dokumentobjekt. Under konstruktionsfasen modifieras DOM-trädet vid roten av detta objekt och nya element läggs till i det. Varje nod som genereras av den lexikaliska analysatorn bearbetas av trädkonstruktorn. Varje token har sitt eget DOM-element som definieras av specifikationen. Element läggs inte bara till i DOM-trädet, utan också till den publika elementstacken, som tjänar till att korrigera felaktigt kapslade eller ostängda taggar. Algoritmen uttrycks också som en automat med ett ändligt antal tillstånd, så kallade insättningslägen.

Låt oss titta på stegen för att skapa ett träd för följande kodavsnitt:

Hej världen

I början av trädkonstruktionsstadiet har vi en sekvens av tokens som erhållits som ett resultat av lexikal analys. Det första tillståndet kallas initial. När html-token tas emot ändras tillståndet till "före html", varefter token omarbetas i detta tillstånd. Detta skapar ett HTMLHtmlElement och lägger till det i rotdokumentobjektet.

Staten ändras till "före huvudet" . Analysatorn upptäcker kroppsbeviset. Även om vår kod inte har en head-tagg kommer ett HTMLHeadElement att skapas automatiskt och läggas till i trädet.

Tillståndet ändras till "inuti huvudet" , sedan till "efter huvudet" . Kroppstoken bearbetas igen, ett HTMLBodyElement skapas, läggs till i trädet och tillståndet ändras till "inom kroppen" .

Nu är det Hello world-strängtokens tur. Att hitta den första av dessa leder till skapandet och infogningen av en textnod, till vilken de återstående tecknen sedan läggs till.

När den avslutande kroppssymbolen tas emot ändras tillståndet till "efter kropp" . När parsern når den avslutande HTML-taggen, ändras tillståndet till "after after body" . När filslut-token tas emot avslutas analysen.

Teckning . Bygga ett träd för HTML-koden från exemplet. Åtgärder efter analys

Vid denna tidpunkt markerar webbläsaren dokumentet som interaktivt och börjar tolka uppskjutna skript som måste köras efter att tolkningen av dokumentet är klar. Dokumentets tillstånd ändras sedan till "ready" och load-händelsen höjs.

Låt oss titta på några exempel.
Den lexikaliska grammatiken (ordboken) definieras av reguljära uttryck för varje token:

Kommentar \/\*[^*]*\*+([^/*][^*]*\*+)*\/ num +|*"."+ nonascii [\200-\377] nmstart [_a -z]|(nonascii)|(escape) nmchar [_a-z0-9-]|(nonascii)|(escape) namn (nmchar)+ ident (nmstart)(nmchar)*

Ident är en identifierare som används som namn på klassen. Namn är id-elementet och refereras med hash-symbolen (#).

Syntaxregler beskrivs i BNF-format.

Regeluppsättning: väljare [ "," S* väljare ]* "(" S* deklaration [ ";" S* deklaration ]* ")" S* ; väljare: enkel_väljare [kombinatorväljare | S+ [kombinator? väljare ]? ]? ; simple_selector: element_name [HASH | klass | attrib | pseudo ]* | [HASH | klass | attrib | pseudo]+; klass: "." IDENT ; element_name: IDENT | "*" ; attribut: "[" S* IDENT S* [ [ "=" | INKLUDERAR | DASHMATCH ] S* [ IDENT | STRING ] S* ] "]" ; pseudo: ":" [ IDENT | FUNKTION S* ")" ] ; En regeluppsättning har den struktur som beskrivs nedan. div.error , a.error ( color:red; font-weight:bold; ) Elementen div.error och a.error är väljare. De giltiga reglerna för en given uppsättning är inneslutna i hängslen. Formellt definieras denna struktur enligt följande: regeluppsättning: väljare [ "," S* väljare ]* "(" S* deklaration [ ";" S* deklaration ]* ")" S* ; Det betyder att regeluppsättningen fungerar som en väljare, eller som flera väljare, åtskilda med kommatecken och mellanslag (S står för mellanslag). En regeluppsättning innehåller en eller flera deklarationer separerade med semikolon. De är inneslutna i lockiga hängslen. Begreppen "deklaration" och "väljare" definieras nedan.

WebKit CSS Parser

WebKit använder generatorer för att automatiskt generera CSS-parsers. Som redan nämnts används Bison för att skapa nedifrån och upp-parsers som flyttar inmatningssekvensen av tecken åt höger. Firefox använder en top-down parser utvecklad av Mozilla-organisationen. I båda fallen tolkas CSS-filen till StyleSheet-objekt som innehåller CSS-regler. Ett CSS-regelobjekt innehåller en väljare och deklaration, såväl som andra objekt som är specifika för en CSS-grammatik.

Teckning . Parsar CSS. Bearbetningsordning för skript och stilmallar Skript

Webbdokument följer en synkron modell. Det antas att skript kommer att analyseras och exekveras så snart analysatorn upptäcker taggen. Parsning av dokumentet fördröjs tills skriptet har slutfört exekveringen. Om vi pratar om ett externt skript måste vi först begära nätverksresurser. Detta görs också synkront, med analys uppskjuten tills resurser finns tillgängliga. Denna modell har använts i många år och ingår till och med i HTML 4- och 5-specifikationerna. En utvecklare kan markera ett skript med en defer-tagg så att dokumentet kan analyseras innan skriptet slutförs. HTML5 introducerade möjligheten att markera ett skript som asynkront så att det tolkas och exekveras i en annan tråd.

Preliminär analys

Denna optimeringsmekanism används i både WebKit och Firefox. När skript körs tolkas de återstående delarna av dokumentet i en annan tråd för att utvärdera nödvändiga resurser och ladda ner dem från nätverket. På så sätt laddas resurser i parallella trådar, vilket förbättrar den totala bearbetningshastigheten. Observera: den indikativa parsern ändrar inte DOM-trädet (detta är huvudparserns uppgift), utan behandlar endast referenser till externa resurser, såsom externa skript, stilmallar och bilder.

Stilark

Stilmallar är baserade på en annan modell. Eftersom de inte gör ändringar i DOM-trädet är det teoretiskt meningslöst att sluta analysera dokument för att vänta på att de ska behandlas. Däremot kan skript begära stilinformation under dokumentanalys. Om stilen ännu inte har laddats och tolkats kan skriptet få felaktig information. Naturligtvis skulle detta medföra en rad problem. Om Firefox stöter på en stilmall som ännu inte har laddats och tolkats, stoppas alla skript. I WebKit slutar de bara om de försöker hämta stilegenskaper som kan vara definierade i avlästa tabeller.

Bygga ett visningsträd

När du bygger DOM-trädet skapar webbläsaren en annan struktur - visningsträdet. Den placerar visuella element i den ordning som de behöver visas på skärmen. Detta är en visuell representation av ett dokument. Visningsträdet används för att säkerställa att innehållet renderas i rätt ordning.

I Firefox kallas ett visningsträdelement en "ram". WebKit använder termen renderobjekt.
Varje visningsobjekt har återgivningsinformation om sig själv och dess underordnade.
Klassen RenderObject, den huvudsakliga renderingsobjektklassen i WebKit, definieras enligt följande:

Klass RenderObject( virtual void layout(); virtuell void paint(PaintInfo); virtual void rect repaintRect(); Node* nod; //DOM-noden RenderStyle* stil; // den beräknade stilen RenderLayer* containgLayer; //den som innehåller z -indexlager)

Varje visningsobjekt är ett rektangulärt område som motsvarar ett CSS-nodfönster, som beskrivs i CSS2-specifikationen. Den innehåller geometriska data som bredd, höjd och position.
Typen av fönster beror på visningsattributet för stilobjektet som tilldelats denna nod (se avsnitt). Nedan finns koden som WebKit använder för att bestämma vilken typ av visningsobjekt som ska skapas för en DOM-nod, baserat på attributet display property.

RenderObject* RenderObject::createObject(Node* nod, RenderStyle* style) ( Document* doc = node->document(); RenderArena* arena = doc->renderArena(); ... RenderObject* o = 0; switch (stil ->display()) ( case NONE: break; case INLINE: o = new (arena) RenderInline(nod); break; case BLOCK: o = new (arena) RenderBlock(nod); break; case INLINE_BLOCK: o = new (arena) RenderBlock(nod) case LIST_ITEM: o = new (arena) RenderListItem(node) tas också med i beräkningen: till exempel används speciella ramar.
I WebKit, om ett element försöker skapa en anpassad renderare, kommer createRenderer-metoden att åsidosättas. Visningsobjekt pekar på stilobjekt som innehåller icke-geometrisk information.

Hur visningsträdet förhåller sig till DOM-trädet Bearbetningsobjekt motsvarar DOM-element, men är inte identiska med dem. Icke-visuella DOM-element ingår inte i visningsträdet (ett exempel är huvudelementet). Dessutom ingår inte element som har visningsattributet inställt på ingen i trädet (element med det dolda attributet ingår).

Det finns också DOM-element som motsvarar flera visuella objekt samtidigt. Vanligtvis är dessa element med en komplex struktur som inte kan beskrivas med en enda rektangel. Till exempel har markeringselementet tre visuella objekt: ett för visningsområdet, ett för rullgardinsmenyn och ett för knappen. Dessutom, om texten inte får plats på en rad och är uppdelad i fragment, läggs nya rader till som oberoende visningsobjekt.
Ett annat exempel där flera visningsobjekt används är dåligt skriven HTML-kod. Enligt CSS-specifikationen kan ett inline-element innehålla antingen block-only eller inline-only element. Om innehållet är blandat skapas anonyma blockobjekt som ett omslag för inline-objekt.

Vissa visningsobjekt har en motsvarande DOM-nod, men deras positioner i trädet matchar inte. Flytande element och element med absoluta koordinater exkluderas från den övergripande processen, placeras i en separat del av trädet och visas sedan i en standardram när de egentligen ska visas i en platshållarram.

Teckning . Visningsträdet och dess motsvarande DOM-träd(). Viewport är huvudbehållaren. I WebKit representeras det av ett RenderView-objekt. Trädbyggandeprocess

I Firefox är den visuella vyn registrerad som en DOM-uppdateringslyssnare. Skapandet av ramar delegeras till FrameConstructor, som definierar stilar (se ) och skapar ramen.

I WebKit kallas processen att definiera en stil och skapa ett visningsobjekt för bilaga. Varje DOM-nod har en attach-metod. Inriktningen utförs synkront; När en ny nod läggs till i DOM-trädet anropas attach-metoden på den.

Som ett resultat av bearbetningen av html- och body-taggarna skapas visningsträdets rotobjekt. I CSS-specifikationen kallas det en container - ett block på toppnivå som innehåller alla andra block. Dess dimensioner utgör visningsområdet, det vill säga den del av webbläsarfönstret där innehållet kommer att visas. I Firefox heter det ViewPortFrame, och i WebKit heter det RenderView. Detta är visningsobjektet som dokumentet pekar på. Resten av trädet byggs genom att lägga till DOM-noder till det.

Detaljer om bearbetningsmodellen finns i CSS2-specifikationen.

Beräknar stilar

För att bygga ett visningsträd är det nödvändigt att beräkna de visuella egenskaperna för varje objekt. För att göra detta beräknas stilegenskaperna för varje element.

Stil bestäms av olika stilmallar, inline stilelement och visuella egenskaper i HTML-dokumentet (som bgcolor). De senare översätts till CSS-egenskaper.

Stilmallar kan tillhandahållas av webbläsaren, webbsidesutvecklaren eller användaren, som kan välja sin föredragna stil i webbläsaren (till exempel i Firefox kan detta göras genom att placera stilmallen i Firefox-profilmappen).

Det finns ett antal svårigheter förknippade med beräkningsstilar.

Stildata innehåller många egenskaper och kan vara mycket voluminösa, vilket kan leda till minnesproblem.

Låt oss titta på ett exempel med följande stilregler:

P.error (färg:röd) #messageDiv (höjd:50px) div (marginal:5px) Den första regeln kommer att placeras i klasskartan, den andra i id-kartan och den tredje i taggkartan.
Tänk på följande HTML-kod:

ett fel uppstod

detta är ett meddelande

Låt oss först hitta reglerna för elementet p. Klasskartan innehåller nyckelfelet, genom vilket vi hittar regeln p.error. Reglerna som motsvarar div-elementet finns i identifieringskartan (med id-nyckeln) och i taggkartan. Allt som återstår är att avgöra vilka av reglerna som hittas från nycklarna som är lämpliga.
Låt oss säga att regeln för ett div-element är:

Tabell div (marginal:5px) Vi skulle ha hämtat den från taggkartan ändå eftersom väljaren längst till höger är nyckeln, men det skulle inte fungera för denna div eftersom det inte finns någon överordnad tabell för den.

Denna optimering används i både WebKit och Firefox.

Tillämpa regler i prioritetsordning

Egenskaperna för stilobjektet motsvarar alla visuella attribut (alla CSS-attribut, men på en mer universell nivå). Om en egenskap inte definieras av någon av matchningsreglerna kan den i vissa fall ärvas från det överordnade stilobjektet. I andra fall används standardvärdet.

Svårigheten börjar när det finns mer än en definition, och då måste en prioritetsordning fastställas för att lösa konflikten.

Prioritetsordning för stilmallar En egenskapsdeklaration för ett stilobjekt kan finnas i flera stilmallar samtidigt, ibland flera gånger i en tabell. I det här fallet är det mycket viktigt att fastställa den korrekta tillämpningsordningen för reglerna. Denna ordning kallas cascading. CSS2-specifikationen anger följande prioritetsordning (stigande).

Webbläsarannonser

Regelbundna användarmeddelanden

Regelbundna författarmeddelanden

Viktiga författarmeddelanden

Viktiga användarmeddelanden

Webbläsarannonser har lägst prioritet, och användarannonser är bara viktigare än författarannonser om de är märkta som!viktiga. Annonser med samma prioritet sorteras efter , och sedan efter den ordning som de definierades. Visuella HTML-attribut översätts till motsvarande CSS-deklarationer och behandlas som författarregler med låg prioritet.

Specificitet

Väljarspecificitet definieras i CSS2-specifikationen enligt följande.

Om deklarationen finns i stilattributet och inte i en regel med en väljare är värdet 1, annars 0 (= a).
Antal ID-attribut inuti väljaren (= b).
Antal andra attribut och pseudoklasser inuti väljaren (= c).
Antalet elementnamn och pseudoelement inuti väljaren (= d).

Att kombinera dessa värden i sekvensen a-b-c-d (i ett större radixtalsystem) bestämmer specificiteten.

Talsystemets bas bestäms av det största antalet i någon av kategorierna.
Till exempel, om a=14 kan hexadecimal användas. Om a=17 (vilket är osannolikt), behöver du ett bas 17-talsystem. Denna situation kan uppstå om du har en väljare av denna typ: html body div p... Men det är osannolikt att det kommer att finnas 17 taggar. inuti väljaren.

Nedan följer några exempel.

* () /* a=0 b=0 c=0 d=0 -> specificitet = 0,0,0,0 */ li () /* a=0 b=0 c=0 d=1 -> specificitet = 0,0,0,1 */ li:första raden () /* a=0 b=0 c=0 d=2 -> specificitet = 0,0,0,2 */ ul li () /* a=0 b=0 c=0 d=2 -> specificitet = 0,0,0,2 */ ul ol+li () /* a=0 b=0 c=0 d=3 -> specificitet = 0 ,0,0,3 */ h1 + *() /* a=0 b=0 c=1 d=1 -> specificitet = 0,0,1,1 */ ul ol li.red () /* a =0 b=0 c=1 d=3 -> specificitet = 0,0,1,3 */ li.red.level () /* a=0 b=0 c=2 d=1 -> specificitet = 0 ,0,2,1 */ #x34y () /* a=0 b=1 c=0 d=0 -> specificitet = 0,1,0,0 */ style="" /* a=1 b= 0 c=0 d=0 -> specificitet = 1,0,0,0 */

Sorteringsregler

När reglerna har matchats sorteras de efter prioritet. WebKit använder swap-sort för korta listor, och merge-sort för långa listor. Vid sortering åsidosätter WebKit operatorn > för regler:

Statisk booloperator >(CSSRuleData& r1, CSSRuleData& r2) ( int spec1 = r1.selector()->specificity(); int spec2 = r2.selector()->specificity(); return (spec1 == spec2) : r1. position() > r2.position() : spec1 > spec2 )

Flerstegsregelapplikation

WebKit använder en speciell flagga som indikerar om alla stilmallar på toppnivå (inklusive @import) är inlästa. Om sammanslagning redan har börjat och hela formatmallen ännu inte har laddats används platshållare och lämpliga markeringar visas i dokumentet. När tabellen har laddats färdigt räknas platshållarna om.

Layout

När ett nyskapat visningsobjekt ingår i trädet har det varken storlek eller position. Att beräkna dessa värden kallas layout (layout eller reflow).

HTML använder en flödesbaserad layoutmodell, vilket innebär att geometriska data i de flesta fall kan beräknas i en omgång. Element som påträffas senare i flödet påverkar inte geometrin hos element som redan bearbetats, så layouten kan göras från vänster till höger och uppifrån och ned. Det finns undantag: till exempel kan layout av HTML-tabeller kräva mer än en loop().

Koordinatsystemet beräknas utifrån rotramen. Översta och vänstra koordinater används.

Layouten utförs i flera cykler. Det börjar med rotvisningsobjektet som motsvarar elementet i HTML-dokumentet. Ramhierarkin (eller delar av den) bearbetas sedan och geometrisk information beräknas för de visningsobjekt som behöver den.

Rotvisningsobjektet har koordinater (0; 0), och dess dimensioner motsvarar visningsporten (den synliga delen av webbläsarfönstret).

Alla visningsobjekt kan valfritt anropa en layout- eller omflödesmetod på dess underordnade.

Dirty Bits System

För att undvika att behöva återflöde varje gång en ändring görs använder webbläsare det som kallas ett dirty bits-system. Det modifierade visningsobjektet och dess underordnade är markerade som "smutsiga", det vill säga i behov av återflöde.

Två flaggor används: smutsiga och barn är smutsiga. Barnen är smutsiga flaggan betyder att det inte är själva visningsobjektet som behöver återflöde, utan ett eller flera av dess barn.

Global och inkrementell layout

Om layouten utförs på hela visningsträdet kallas det globalt. Det kan orsakas av följande händelser.

En global ändring av stilen som används för alla visningsobjekt, till exempel att byta teckensnitt.

Ändra skärmstorlekar.

Inkrementell layout ändrar endast de smutsiga visningsobjekten (och kan kräva att vissa andra objekt omarrangeras).
Inkrementell layout sker asynkront och börjar när smutsiga visningsobjekt påträffas. Exempel: Efter att ha hämtat innehåll från webben och lagt till det i DOM-trädet, visas ett nytt objekt i visningsträdet.

Teckning . Inkrementell layout, som endast behandlar smutsiga visningsobjekt och deras barn (). Synkron och asynkron länkning Inkrementell länkning sker asynkront. I Firefox ställs inkrementella layoutkommandon i kö och sedan anropar schemaläggaren dem alla tillsammans. I WebKit skjuts även inkrementell layout upp för att bearbeta hela trädet i en enda slinga och återflöda alla smutsiga visningsobjekt.
Skript som begär stilinformation som offsetHeight kan göra att inkrementell layout sker synkront.
Global länkning sker vanligtvis synkront.
Ibland görs layouten i en återuppringning efter den ursprungliga layouten eftersom värdena för vissa attribut, såsom rullningsposition, ändras. Optimering Om layouten utlöses av en resize-händelse eller en förändring av positionen (men inte storleken) för ett visningsobjekt, hämtas objektets dimensioner från cachen och beräknas inte om.
Om bara en del av trädet förändras, strömmar inte hela trädet om. Detta inträffar om ändringen är lokal till sin natur och inte påverkar omgivande objekt, till exempel när text skrivs in i textfält (i andra fall gör inmatning av varje tecken att hela trädet ordnas om). Layoutprocess

Layouten utförs vanligtvis enligt schemat som beskrivs nedan.

Det överordnade visningsobjektet definierar sin egen bredd.

Det överordnade visningsobjektet bearbetar de underordnade elementen:

bestämmer positionen för det underordnade visningsobjektet (ställer in dess x- och y-koordinater);

Gör att det underordnade elementet läggs ut (om det är markerat smutsigt, om ett globalt återflöde utförs, etc.), vilket resulterar i att dess höjd beräknas.

Baserat på den totala höjden på de underordnade elementen, såväl som höjden på marginalerna och utfyllnaden, beräknas höjden på det överordnade visningsobjektet: det krävs av sitt eget överordnade objekt.

Bits markeras inte längre som smutsiga.

Firefox använder objektet nsHTMLReflowState som en layoutparameter. Den bestämmer bland annat bredden på det överordnade elementet.
Layouten i Firefox skapar ett nsHTMLReflowMetrics-objekt som innehåller höjdvärdet för visningsobjektet.

Breddberäkning

Visningsobjektets bredd beräknas baserat på behållarens bredd, width-egenskapen för visningsobjektet och storlekarna på marginalerna och kanterna.
Låt oss titta på hur bredden på följande div-element beräknas:

I WebKit kommer det att beräknas så här (calcWidth-metoden för RenderBox-klassen).

Behållarens bredd är den största av availableWidth och 0. I det här fallet är egenskapsvärdet availableWidth lika med contentWidth-värdet, vilket beräknas enligt följande: clientWidth() - paddingLeft() - paddingRight() Egenskapen clientWidth and clientHeight värden motsvarar objektets inre dimensioner, exklusive gränsen och rullningslisten.
Elementens bredd bestäms av stilobjektets width-attribut. Dess absoluta värde beräknas baserat på en procentandel av behållarens bredd.
Horisontella ramar och stoppning tillkommer.

Fram till denna punkt har vi beräknat den föredragna bredden. Låt oss nu beräkna dess lägsta och högsta värden.
Om den föredragna bredden överstiger maximivärdet används maximivärdet, och om det är mindre än det minsta (det minsta odelbara objektet) används det minsta breddvärdet.

Denna data lagras i en cache om återflöde krävs utan att ändra bredden.

Linjelindning

Under layoutprocessen, om visningsobjektet upptäcker att en radbrytning behövs, stoppas layouten och en radbrytningsbegäran skickas till det överordnade elementet. Det överordnade elementet skapar ytterligare visningsobjekt och utför deras layout.

Tolkning

Under renderingsstadiet anropas färgmetoden för varje visningsobjekt i tur och ordning och deras innehåll visas på skärmen. Komponenten för UI-ramverket används för rendering.

Global och inkrementell rendering Med global rendering ritas hela trädet som en helhet, och med inkrementell rendering ritas endast enskilda visningsobjekt som inte påverkar resten av trädet. Det modifierade visningsobjektet markerar sin rektangel som ogiltig. Operativsystemet betraktar det som ett "smutsigt" område och höjer färghändelsen. Ytorna kombineras så att rendering kan göras för alla samtidigt. I webbläsaren Chrome är renderingen lite mer komplex eftersom renderaren ligger utanför huvudprocessen: Chrome härmar operativsystemets beteende till viss del. Återgivningskomponenten lyssnar efter dessa händelser och delegerar meddelandet till rotvisningsobjektet. Alla objekt i trädet kontrolleras i tur och ordning tills det önskade hittas. Sedan ritas den själv och som regel dess barn. Draw Order Draw Order definieras i CSS2-specifikationen. Faktum är att det motsvarar den ordning som elementen är placerade i. Dragordningen är viktig eftersom stackarna dras bakåt. Ordningen för att lägga till blockobjekt till stacken är som följer:

Bakgrundsfärg

Bakgrundsbild

Ram

Barnobjekt

Yttre gränser

Firefox visningslista Firefox skapar en visningslista för rektangeln som ritas baserat på analys av visningsträdet. Den innehåller visningsobjekten för denna rektangel, arrangerade i önskad ordning (först bakgrunden, sedan ramarna, etc.). Tack vare detta behöver du bara gå igenom trädet en gång för att återrendera bakgrunden, bakgrundsbilderna, ramarna etc..

I Firefox optimeras processen genom att inte lägga till element som skulle vara dolda (till exempel under ogenomskinliga element).

Rektangellagring i WebKit Innan återrendering lagras den gamla rektangeln i WebKit som en bitmapp, och då ritas bara skillnaderna mellan den gamla och nya rektangeln. Dynamiska ändringar När ändringar sker försöker webbläsare att inte utföra onödiga operationer. Till exempel, om färgen på ett element ändras, renderas inte de andra om. När ett elements position ändras, komponeras och renderas själva elementet, dess underordnade och eventuellt andra objekt på samma nivå. När en DOM-nod läggs till läggs den om och renderas. Stora ändringar, som att öka teckenstorleken på ett html-element, resulterar i att cacheminnet rensas och att hela trädet återläggs och renderas. Mapper-trådar Mapparen körs på en enda tråd: den hanterar nästan allt utom nätverksoperationer. I Firefox och Safari är detta huvudtråden i webbläsaren, i Chrome är det huvudflikprocessen.
Nätverksoperationer kan utföras i flera parallella trådar. Antalet parallella anslutningar är begränsat och sträcker sig vanligtvis från 2 till 6 (till exempel Firefox 3 använder 6). Event Loop Webbläsarens huvudtråd är en event loop, en ändlös loop som stöder arbetsprocesser. Den väntar på att händelser (som layout och färg) ska skickas för att kunna bearbeta dem. Detta är Firefox-koden för huvudhändelsslingan: while (!mExiting) NS_ProcessNextEvent(tråd); Visual Model CSS2 Canvas Andra språk

Denna sida har översatts till japanska. Dubbelt!

Hej kära läsare av Start-Luck-bloggen. Att söka efter svar på de enklaste frågorna kan ibland avslöja otroliga saker som en person aldrig hade tänkt på. Vi är vana vid att bara använda en glödlampa, en mikrovågsugn och en dammsugare.

Så fort någon öppnar en artikel om hur dessa maskiner fungerar når han en ny nivå. Om en person är mycket intresserad av honom, blir han senare en ganska bra elektriker eller en jack of all trades, för vilken det inte är ett problem att fixa någonting.

Idag ska vi prata om lite olika saker. Vi kommer att prata om vad webbläsare är och hur de fungerar. Det är osannolikt att du någonsin kommer behöva fixa din webbläsare, men efter den här artikeln kommer du inte ha några frågor om hur webbplatser är designade. Jag tvivlar inte ens på detta.

Hur sajten fungerar

Varje elektronisk resurs är en uppsättning filer. Vissa ansvarar för designen, andra för testkomponenten. De är skrivna med speciella programmeringsspråk. Inte alla webbplatsskapare förstår kod en del använder enkla program som själva konverterar åtgärder till kod och filer.

Om du tittar på sajten som webbläsare ser den, ser du bara en mapp med ett oklart namn där andra filer kommer att finnas. Om du öppnar någon av dem kommer du att förstå absolut ingenting.

Medan den här uppsättningen dokument finns på utvecklarens dator har läsarna ingen tillgång till dem. De finns inte på Internet. De hjälper till att öppna en webbplats för allmänheten. Grovt sett har de ungefär stora flashenheter där mappar med hemsidor lagras.

Varje mapp är associerad med en URL, eller, enkelt uttryckt, en adress. Ange det i adressfältet i din webbläsare så tar det dig till mappen. Det är inte alla webbläsare som gör, men vi kommer att prata om det i nästa kapitel.

Webbläsaruppdrag

Det finns som sagt vissa program som hjälper användare. Och det finns webbläsare som behövs så att du, utan kunskap om samma kod, kan se webbplatsen inte i form av en mapp, utan på ett helt bekant sätt.

Till exempel säger en programmerare: "Här är en artikel, och genom att klicka på den här frasen ska en person flytta till en annan sida på min webbplats." Vi anger en viss kod. Du ser det inte, webbläsaren förstår detta och ger omedelbart läsaren en enkel och bekant länk med en understrykning.

Att lära sig programmeringsspråk är inte så svårt som det kan verka vid första anblicken. Nu finns det många enkla som gör livet och arbetet på Internet enklare. Det finns inga mindre kurser som hjälper tekannor att förstå hantverkets krångligheter. T.ex, " WordPress 4: Webbplatsskapande» Mikhail Rusakov. Lektionerna är mycket enkla. I slutet av utbildningen kommer alla att kunna bli en riktig webbplatsbyggare.

Så vi kom på vad webbläsare är till för. Låt oss nu se vad de är.

Klassificering

För att vara ärlig är det omöjligt att dela in webbläsare i typer. Jag ska inte ljuga för dig - de är alla ungefär likadana. Skillnaden ligger bara i gränssnittet, ibland laddningshastighet och föga imponerande nyanser.

Idag har jag stött på denna division mer än en gång: Google Chrome, Yandex Browser, Opera, Mozilla. Jag kan inte förmå mig att skilja dem åt på det här sättet.

Låt mig ge dig ett enkelt alternativ. När det gäller korv kan den klassificeras efter dess sammansättning, pris och beredningsmetod (rökning, kokning). Det finns inte många webbläsare och de är alla ungefär likadana, så de kan bara delas in efter tillverkare, men enligt mig är det här någon sorts usel klassificering.

Deras verksamhetsprincip och uppdrag är i alla fall desamma. Så hur väljer folk webbläsare? I grund och botten är det gränssnittet. Alla har små skillnader och folk vänjer sig snabbt vid dem. När du till exempel går till Yandex Browser erbjuds du att läsa nyheter som du kan tycka är intressanta. Detta hakar användare.

Vissa människor tycker att webbläsaren Google Chrome öppnar webbplatser snabbare. Jag kan inte säga hur sant detta är. Personligen använder jag flera webbläsare, och hastigheten på var och en beror på Internet som helhet. Låt Yandex hävda turbolägen, men om nätverket är överbelastat på kvällen och till och med torrenten fungerar väldigt långsamt, kommer det inte att vara möjligt att ladda sidan på en sekund.

Hur man väljer en webbläsare, installerar flera och ser bara vilken som verkar bekvämast för dig. OK det är över nu. Prenumerera även på nyhetsbrevet för att få kvalitetsinformation.

Vi ses igen och lycka till.

Hej kära nybörjare webmasters.

Det är ingen hemlighet att arbetet med webbplatsen utförs i en webbläsare.

Detta är så vanligt att webbansvariga vanligtvis, när det kommer till webbläsaren, bara fokuserar på programmeringsspråkens egenskaper över webbläsare.

Men webbläsaren är det huvudsakliga datorverktyget, som har sina egna inställningar, ytterligare moduler och olika funktioner som avsevärt underlättar webbmasterns arbete.

Det är bara vid första anblicken som webbläsaren är så enkel som två.

Faktum är att det, som alla välrenommerade program, har många alternativ och nyanser i sin konfiguration, som kommer att diskuteras i den här kursen.

Av min egen erfarenhet: utan att veta om egenskaperna för Chrome-webbläsarens cache, kunde jag länge inte förstå varför mina bilder i WordPress inte uppdaterades när de byttes ut - som ett resultat avtog arbetet.

Men frågan var inte värd ett dugg, om jag bara hade vetat det direkt.

Varför Chrome. För ärligt talat är detta den mest avancerade webbläsaren hittills.

Den är skapad av Google och uppfyller absolut alla krav i både stationära och mobila versioner, och har många moduler som kan kopplas in eller stängas av, vilket gör arbetet enklare och snabbare.

Dessutom är Chrome tätt integrerad i alla Googles tjänster, vilket är ett stort plus när man arbetar med en sajt, nämligen dess analys och marknadsföring.

Installation och grundläggande webbläsarinställningar

Skriv Ladda ner Chrome i sökfältet, välj önskat alternativ, för mobil eller dator, önskat operativsystem och klicka på Ladda ner.

Ett fönster kommer att visas med villkor och två kryssrutor med standardkryssrutor.

Kryssrutorna kan tas bort eller lämnas. Jag skulle lämna den första och ta bort den andra, redan i detta skede gör webbläsaren enklare.

Installationen kommer att ske som standard, precis som alla program, varefter ett fönster öppnas där du blir ombedd att logga in i Chrome.

Faktum är att webbläsaren redan är redo att fungera och du behöver inte logga in någonstans, utan bara börja använda den för sitt avsedda syfte, men det är inte vårt sätt, eftersom vi behöver få full tillgång till den.

Och inte bara för detta. Ett Google-konto är både Google Analytics - analys av webbplatsanvändarindikatorer och Search Console - teknisk analys. webbplatsegenskaper och PageSpeed Insights - analys av mobilversioner.

Att skapa ett konto har beskrivits hundratals gånger på Internet, så vi kommer inte att överväga det heller.

Under processen för att skapa ett konto kommer du att ha en inloggning och e-postadress @gmail.com, som du måste använda för att logga in i webbläsaren.

Du kanske redan har Chrome installerat och har fungerat framgångsrikt under lång tid.

I det här fallet måste du för att logga in klicka på de tre prickarna i slutet av sökfältet, välja Inställningar i menyn som öppnas och högst upp välj Logga in på Chrome.

Inloggningen är genomförd, varför detta var nödvändigt kommer att diskuteras under kursen och eftersom vi fortfarande är i inställningarna kommer vi att gå igenom vad som finns tillgängligt utan att logga in.

Detta kan vara användbart för någon.

1. Öppna vid start.

Här kan du välja vad som ska öppna webbläsaren vid uppstart.

Det kan vara

a) Ny flik - tom sökmotorsida.

b) Tidigare öppnade flikar är de sidor som var öppna när du stängde webbläsaren.

c) Definierade sidor - du kan lägga till adressen till sidan som öppnas när webbläsaren startar.

2. Utseende.

Här kan du lägga till en bakgrundsbild och Visa alltid bokmärkesfältet. Bokmärken visas under sökfältet.

Här väljer du den sökmotor som du föredrar.

I nästa stycke, Standardwebbläsare, finns det inget behov av att tillåta eller välja någonting, eftersom vi redan arbetar med Chrome, vilket betyder att det är standard.

Om du ständigt vill använda en annan webbläsare och behålla Chrome i reserv, ange den som ska öppnas vid start.

4. Användare. Här kan du vara intresserad av objektet Importera bokmärken.

Om du tidigare haft en annan webbläsare så har den förmodligen ett visst antal bokmärken som du behöver spara.

För att göra detta klickar du på Importera bokmärken och inställningar och väljer den webbläsare som du vill överföra bokmärken från.

Bokmärkesfältet, som också har många intressanta punkter, kommer att diskuteras i nästa artikel, när vi pratar om Ghrome-gränssnittet/

Vi lämnar kryssrutorna tomma för tillfället.

I den här artikeln kommer vi att titta på några inställningar från den som kan göras direkt, och vi kommer tillbaka för resten i framtida artiklar när vi får ytterligare kunskap.

1. Personlig information. Här, för tillfället, kommer vi bara att inkludera tips för att påskynda inmatning av adresser och laddning av sidor.

2. Lösenord och formulär. Lämna båda kryssrutorna. Den första gör att du permanent kan skriva din adress, namn etc. i formulär, och med hjälp av den andra har du alltid ett val om du vill spara lösenordet för webbplatsen i webbläsaren eller inte.

Till exempel sparar jag aldrig lösenord för webbplatser som innehåller min konfidentiella information i min webbläsare.

3. Sidvy. Teckenstorlek och typ kan justeras.

Vi väljer det som är mer tilltalande för våra ögon och klickar på Slutför.

Vi hoppar över nätverket för tillfället.

4. Språk. Markera rutan Erbjud översättning och se Ändra språkinställningar.

Om du klickar på Lägg till kan du välja ett språk från den enorma listan som erbjuds och surfa på Internet på det språk som passar dig.

5. Nedladdade filer. Detta visar var den nedladdade filen kommer att placeras. Detta är nödvändigt för att inte söka efter filen över hela datorn efter nedladdning.

Som standard är Chrome inställt på mappen Nedladdningar, men du kan välja vilken annan mapp som helst på din dator om du klickar på Ändra.

Det är här vi avslutar med de initiala inställningarna.

I nästa artikel kommer vi att börja arbeta med webbläsargränssnittet. Det finns många nyanser och överraskningar från utvecklarna.

Och här tror jag att en lista med snabbtangenter skulle vara användbar.

Ctrl + N - nytt fönster.

Ctrl + T - ny flik.

Ctrl + Shift + N - nytt fönster i inkognitoläge.

Ctrl + klicka på vänster musknapp.

Ctrl + Shift + T - återställ den senast stängda fliken (upp till 10 flikar).

Ctrl + W - stäng den aktiva fliken eller popup-fönstret.

Ctrl + Tab - växla mellan flikar.

F5 eller Ctrl + R - uppdatera sidan.

Esc - avbryt sidladdning.

Ctrl + F - sök efter text på en öppen sida.

Ctrl + D - sparar ett bokmärke för den aktuella sidan.

F11 - Knapp för att gå in i och avsluta helskärmsläge.

Ctrl + plus och Ctrl + minus - ändra sidskala.

Ctrl + 0 - standardsidazoom.

Hem - går till toppen av sidan.

Slut - går till slutet av sidan.

Det kan vara bra att läsa: