Vitajte na [www.pocitac.win] Pripojiť k domovskej stránke Obľúbené stránky
1. Žiadosť:
* Zadáte adresu URL: Do panela adries zadáte webovú adresu (napríklad `www.example.com`) alebo kliknite na odkaz.
* Prehliadač odošle požiadavku: Prehliadač používa adresu URL na určenie adresy servera (v prípade potreby prostredníctvom vyhľadávaní DNS) a odošle požiadavku HTTP na tento server. Táto požiadavka žiada o konkrétne zdroje, najčastejšie súbor HTML, ktorý predstavuje webovú stránku. Zahŕňa tiež informácie, ako je typ prehliadača, jazykové preferencie a cookies.
2. Odpoveď servera:
* spracovanie servera: Server prijíma žiadosť. Spracuje ho, čo môže zahŕňať načítanie údajov z databázy, spustenie skriptov na strane servera (ako PHP, Python, Node.js) alebo jednoducho lokalizovať požadovaný súbor v jeho úložisku.
* Server odošle odpoveď: Server odošle späť odpoveď HTTP. Táto odpoveď obsahuje:
* HTTP HLAVY: Metadáta o odpovedi (napr. Typ obsahu, pokyny na ukladanie do vyrovnávacej pamäte, stavový kód, ako je 200 OK alebo 404, sa nenašiel).
* Telo odpovede: Skutočný obsah odpovede, ktorý je najpravdepodobnejší:
* html (HyperText Markup Language): Štruktúra a obsah webovej stránky. Toto definuje nadpisy, odseky, odkazy, obrázky atď.
* css (listy v štýle kaskádového štýlu): Pravidlá štýlu, ako by sa mali zobrazovať prvky HTML (farby, písma, rozloženie atď.). CSS môže byť zabudovaný do HTML, zahrnutý v samostatných súboroch CSS alebo je prepojený s externými súbormi CSS.
* JavaScript: Kód, ktorý do webovej stránky pridáva interaktivitu a dynamické správanie (animácie, validácia formulára, požiadavky AJAX atď.). Rovnako ako CSS, aj JavaScript môže byť vložený, zahrnutý do samostatných súborov alebo externe prepojený.
* Ostatné zdroje: Obrázky (JPEG, PNG, GIF, SVG), videá, zvukové súbory, písma atď., Na ktoré sa odkazujú na HTML, CSS alebo JavaScript.
3. Vykreslenie prehliadača (čo skutočne vidíte):
* analýza: Prehliadač * analyzuje * HTML. Číta kód HTML a vytvára model objektu dokumentu (DOM) *. DOM je stromovou reprezentáciou štruktúry HTML v pamäti.
* CSSOM Construction: Prehliadač analyzuje CSS a vytvára model objektov CSS (CSSOM) *. To predstavuje pravidlá štýlu uplatňované na prvky HTML.
* vykresľujúci motor: Toto je srdce procesu zobrazenia prehliadača:
* Kombinácia DOM a CSSOM: Prehliadač kombinuje DOM a CSSOM, aby vytvoril strom render * *. Tento strom obsahuje iba viditeľné prvky a ich štýly.
* rozloženie (reflow): Prehliadač vypočíta veľkosť a polohu každého prvku v strome. Toto je známe ako *rozloženie *alebo *Reflow *.
* maľba (pretrak): Prehliadač * maľuje * každý prvok na obrazovke podľa jeho vypočítaného rozloženia a štýlov. Zahŕňa to kreslenie textu, farieb, obrázkov, hraníc atď.
* JavaScript Realition: Engine JavaScript v prehliadači (napr. V8 pre Chrome, Spidermonkey for Firefox) vykonáva kód JavaScript. Tento kód môže:
* Upravte DOM:Pridajte, odstráňte alebo zmeňte prvky HTML.
* Zmena CSS:Upravte štýly prvkov.
* Vytvorte požiadavky AJAX:Načítajte ďalšie údaje zo servera bez toho, aby ste načítali celú stránku.
* Zvládajte udalosti používateľov:Odpovedzte na kliknutia, vstup na klávesnicu atď.
Takže to, čo nakoniec * vidíte *, je výsledkom tohto komplexného procesu:
* Formátovaný text: Nadpisy, odseky, zoznamy atď., Štvorce podľa pravidiel CSS.
* obrázky: Zobrazené na ich určených miestach.
* odkazy: Text alebo obrázky, ktoré môžete kliknúť na prejsť na ďalšie stránky.
* Interaktívne prvky: Tlačidlá, formuláre, animácie a ďalšie prvky, ktoré reagujú na vaše akcie.
* Celkový rozloženie a vizuálny dizajn: Organizácia prvkov na stránke, určená HTML, CSS a JavaScript.
v súhrne:
Vidíte vizuálne príťažlivé a interaktívne zastúpenie obsahu dodaného webovým serverom vďaka schopnosti prehliadača analyzovať a vykresliť HTML, CSS a JavaScript. Je to ako čítať recept (HTML), porozumieť tomu, ako upraviť ingrediencie (CSS) a potom pridať nejaký ďalší vkus so špeciálnou technikou (JavaScript) na vytvorenie chutného jedla (webová stránka).