När du bläddrar till eller öppnar en sida i en webbläsare ser du i huvudsak det tolkade resultatet av flera processer som arbetar tillsammans. Här är en uppdelning av vad som händer och vad du slutar se:
1. Begäran:
* Du anger en URL: Du skriver en webbadress (som `www.example.com ') i adressfältet eller klickar på en länk.
* webbläsaren skickar en begäran: Webbläsaren använder URL:n för att bestämma serverns adress (via DNS -uppslagning om det behövs) och skickar en HTTP -begäran till den servern. Denna begäran ber om specifika resurser, oftast HTML -filen som representerar webbsidan. Det innehåller också information som din webbläsartyp, språkinställningar och kakor.
2. Serverns svar:
* Serverbehandling: Servern tar emot begäran. Den bearbetar det, som kan innebära att du hämtar data från en databas, körning av serversidan (som PHP, Python, Node.js) eller helt enkelt lokalisera den begärda filen vid lagring.
* Server skickar ett svar: Servern skickar tillbaka ett HTTP -svar. Detta svar innehåller:
* http -rubriker: Metadata om svaret (t.ex. innehållstyp, cache -instruktioner, statuskod som 200 OK eller 404 hittades inte).
* Svarskroppen: Det faktiska innehållet i svaret, vilket är troligt:
* html (Hypertext Markup Language): Strukturen och innehållet på webbsidan. Detta definierar rubriker, stycken, länkar, bilder etc.
* css (kaskadstilark): Stilreglerna för hur HTML -elementen ska visas (färger, teckensnitt, layout, etc.). CSS kan inbäddas i HTML, ingår i separata CSS -filer eller länkas till externa CSS -filer.
* javascript: Kod som lägger till interaktivitet och dynamiskt beteende på webbsidan (animationer, formulärvalidering, AJAX -förfrågningar etc.). Liksom CSS kan JavaScript inbäddas, ingå i separata filer eller länkas externt.
* andra resurser: Bilder (JPEG, PNG, GIF, SVG), videor, ljudfiler, teckensnitt, etc., refererade av HTML, CSS eller JavaScript.
3. Webbläsarens rendering (vad du faktiskt ser):
* parsing: Webbläsaren * parses * HTML. Den läser HTML -koden och bygger en *dokumentobjektmodell (DOM) *. DOM är en trädliknande representation av HTML-strukturen i minnet.
* cssom -konstruktion: Webbläsaren analyserar CSS och bygger en *CSS -objektmodell (CSSOM) *. Detta representerar de stilregler som tillämpas på HTML -elementen.
* renderingmotor: Detta är hjärtat i webbläsarens visningsprocess:
* kombinerar DOM och CSSOM: Webbläsaren kombinerar DOM och CSSOM för att skapa ett *renderträd *. Detta träd innehåller endast de synliga elementen och deras stilar.
* layout (refow): Webbläsaren beräknar storleken och positionen för varje element i renderträdet. Detta kallas *layout *eller *refow *.
* målning (ommålning): Webbläsaren * målar * varje element på skärmen, enligt dess beräknade layout och stilar. Detta handlar om att rita texten, färger, bilder, gränser etc.
* javascript -exekvering: Webbläsarens JavaScript -motor (t.ex. V8 för Chrome, SpiderMonkey för Firefox) kör JavaScript -koden. Den här koden kan:
* Ändra DOM:Lägg till, ta bort eller ändra HTML -element.
* Ändra CSS:Ändra elementens stilar.
* Gör AJAX -förfrågningar:Hämta ytterligare data från servern utan att ladda om hela sidan.
* Hantera användarhändelser:Svara på klick, tangentbordsinmatning etc.
Så vad du slutligen * ser * är resultatet av denna komplexa process:
* Formaterad text: Rubriker, stycken, listor etc., utformade enligt CSS -reglerna.
* Bilder: Visas på deras angivna platser.
* länkar: Text eller bilder som du kan klicka för att navigera till andra sidor.
* interaktiva element: Knappar, formulär, animationer och andra element som svarar på dina handlingar.
* Den övergripande layouten och den visuella designen: Organisationen av elementen på sidan, bestämd av HTML, CSS och JavaScript.
Sammanfattningsvis:
Du ser en visuellt tilltalande och interaktiv representation av innehållet som levereras av en webbserver, tack vare webbläsarens förmåga att analysera och göra HTML, CSS och JavaScript. Det är som att läsa ett recept (HTML), förstå hur man stilar ingredienserna (CSS) och sedan lägga till lite extra känsla med en speciell teknik (JavaScript) för att skapa en läcker maträtt (webbsidan).
