Ako zobrazíte webovú stránku?

Zobrazenie webovej stránky zahŕňa niekoľko vrstiev, od servera, ktorý hosťuje webovú stránku po prehliadač, ktorý interpretuje kód a vykresľuje ho na obrazovke. Tu je rozpis procesu:

1. Žiadanie webovej stránky (iniciujete proces):

* Písanie URL (alebo kliknutím na odkaz): Zadáte adresu webovej stránky (Uniform Resource Locator alebo URL), ako je `www.example.com`, do panela adries vášho prehliadača alebo kliknite na hypertextový odkaz.

* DNS Lookup: Váš prehliadač (alebo operačný systém) používa systém názvov doménových mien (DNS) na preklad URL čitateľnej človeka (napr. `Www.example.com`) do IP adresy servera, ktorý hosťuje webovú stránku (napr. 192.0.2.1`). Predstavte si DNS ako na telefónny zoznam pre internet. Váš počítač odošle žiadosť na server DNS (zvyčajne poskytovaný poskytovateľom internetových služieb), aby našla IP adresu spojenú s názvom domény.

2. Odpoveď servera:

* HTTP požiadavka: Váš prehliadač odošle na server na získanú IP adresu požiadavku HTTP (Hypertext Transfer Protocol). Táto požiadavka určuje, čo požadujete (zvyčajne hlavná webová stránka, často `index.html` alebo podobné). Metóda žiadosti je zvyčajne „get“ (na získanie prostriedku), ale môže byť tiež `post` (na odoslanie údajov),` put`, `delete` atď.

* spracovanie servera: Webový server prijíma požiadavku HTTP. Identifikuje požadovaný zdroj (napr. `). Server by mohol:

* Priamo podávajte statický súbor (napríklad `index.html`,` image.jpg`, `style.css`).

* Vykonajte kód na strane servera (PHP, Python, Java, Node.js atď.) Na generovanie dynamického obsahu. Tento kód môže získať prístup k databázam, používateľským účtom alebo inými zdrojmi údajov.

* Vykonajte kontroly autentifikácie a autorizácie, aby ste sa uistili, že máte povolenie na prístup k požadovanému prostriedku.

* http odpoveď: Server pripravuje odpoveď HTTP, ktorá obsahuje:

* Stavový kód: Kód označujúci úspech alebo zlyhanie žiadosti (napr. 200 OK, 404 Nenašli sa, 500 chyba interného servera).

* hlavičky: Metadáta o odpovedi (napr. Typ obsahu, kódovanie znakov, pokyny na ukladanie do vyrovnávacej pamäte). Hlavička „obsahu typu obsahu je obzvlášť dôležitá, pretože hovorí prehliadaču, aký druh údajov sa dá očakávať (napr.“ Text/HTML`, `Image/Jpeg`,` Application/JavaScript`).

* Body: Skutočný obsah webovej stránky (HTML, CSS, JavaScript, obrázky atď.).

3. Vykreslenie prehliadača:

* prijímanie odpovede: Váš prehliadač prijíma odozvu HTTP zo servera.

* analýza html: Prehliadač analyzuje kód HTML v tele odpovede. HTML (Hypertext Markup Language) Definuje štruktúru a obsah webovej stránky (nadpisy, odseky, obrázky, odkazy atď.). Prehliadač vytvára model objektu dokumentu (DOM), ktorý je stromovou reprezentáciou štruktúry HTML.

* analyzovanie css: Prehliadač analyzuje akýkoľvek kód CSS (kaskádové štýly) kód, buď vložený priamo do HTML (pomocou `<štýl>` značky) alebo prepojený zo súborov externých CSS. CSS definuje vizuálny štýl webovej stránky (farby, písma, rozloženie atď.). Prehliadač vytvorí model objektov CSS (CSSOM) a kombinuje ho s DOM, aby sa vytvoril strom vykresľovania.

* Vykonanie JavaScript: Prehliadač vykonáva akýkoľvek kód JavaScript, buď vložený do HTML (pomocou `` tags) alebo prepojený z externých súborov JavaScript. JavaScript je programovací jazyk, ktorý môže na webovú stránku pridať interaktivitu a dynamické správanie. JavaScript môže upraviť DOM, urobiť asynchrónne požiadavky na server (AJAX) a reagovať na udalosti používateľov.

* vykreslenie stránky: Prehliadač používa strom vykresľovania na maľovanie webovej stránky na obrazovke. Vypočíta rozloženie prvkov, aplikuje štýly a kreslí obsah. To zahŕňa:

* rozloženie (reflow): Výpočet polohy a veľkosti každého prvku na stránke.

* maľba (pretrak): Nakreslenie prvkov na obrazovke na základe ich štýlov.

* Kontinuálne aktualizácie: Prehliadač nepretržite monitoruje zmeny v DOM (napr. V dôsledku aktualizácií JavaScript) a podľa potreby opätovne vyzdvihuje stránku, aby odrážal tieto zmeny.

Zjednodušený analógia:

Pomysli na objednávanie pizze:

1. Vy (používateľ): Umiestnite objednávku (zadajte adresu URL).

2. operátor telefónu (DNS): Vyzerá telefónne číslo pizzerie (IP adresa).

3. Pizzeria (webový server): Prijme vašu objednávku (požiadavka HTTP), pripravuje pizzu (spracováva žiadosť) a pošle vám ju (odpoveď HTTP).

4. Vy (prehliadač): Prijmite pizzu, otvorte políčko (analyzujte HTML) a zjedzte ju (vykreslite stránku).

Zapojené kľúčové technológie:

* html (HyperText Markup Language): Definuje štruktúru a obsah.

* css (listy v štýle kaskádového štýlu): Definuje vizuálny štýl.

* JavaScript: Dodáva interaktivitu a dynamické správanie.

* http (protokol prenosu Hypertext): Komunikačný protokol medzi prehliadačom a serverom.

* dns (systém názvu domény): Prekladá názvy domén do adresy IP.

* Webový server (napr. Apache, nginx): Hosťuje webovú stránku a poskytuje obsah.

* Prehliadač (napr. Chrome, Firefox, Safari): Interpretuje kód a zobrazuje webovú stránku.

* operačný systém: Poskytuje sieťové pripojenie a ďalšie služby.

* sieťová infraštruktúra: Smerovače, spínače a ďalšie zariadenia, ktoré spájajú všetko dohromady.

Stručne povedané, zobrazenie webovej stránky je zložitý proces, ktorý zahŕňa koordinované úsilie medzi prehliadačom, webovými servermi a internetovou infraštruktúrou. Váš prehliadač pôsobí ako tlmočník, prijíma pokyny zo servera a prekladá ich do vizuálnej reprezentácie na obrazovke.

• Predchádzajúca strana: Ako odstraňujete sledovateľov na WordPress? 
• Ďalšia strana: Compresser sa zahrieva, ale Frig. práca?