2011-09-22 8 views
31

Prima di tutto, io non sono interessato a tutto il processo di richiesta-risposta come affrontato da questa domandaDescrivi il processo di rendering della pagina in un browser?

What is the complete process from entering a url to the browser's address bar to get the rendered page in browser?

Voglio sapere ciò che accade all'interno di un browser, una volta che si riceve la risposta HTML dal server. L'intento di porre questa domanda è capire i dettagli interni dello scripting lato client. Inoltre sarebbe utile se si potesse spiegare in concetti astratti ciò che un browser web comprende. Puoi chiamarli come motore CSS, motore javascript, ecc. L'obiettivo è visualizzare con precisione lo sviluppo web che sto facendo.

Purtroppo, non ho trovato alcuna risorsa web che risolva questo problema. Per favore perdonami se ci sono risorse là fuori che spiegano questi concetti. Puoi indicare le risorse (libri, ecc.) Se questa domanda è troppo esaustiva per rispondere.

+0

[codice sorgente webkit] (http://www.webkit.org/building/checkout.html)/[mozilla codice sorgente] (https://developer.mozilla.org/en/Download_Mozilla_Source_Code) – Quentin

+0

Sto cercando una descrizione astratta che aiuti un web developer medio a visualizzare il processo di scripting lato client. Sono sicuro che anche se uno mozilla viene scritto da zero, potrebbe anche visualizzarlo in un modo astratto. – pphanireddy

+0

@pphanireddy, ho letto "Come funzionano i browser", e mi chiedo quando parsing html e incontro

15

prega di passare attraverso i passaggi qui sotto e si dovrebbe essere chiari con richiesta di ciclo di vita e come viene resa la risposta.

  1. Digitare un URL nella barra degli indirizzi nel browser preferito.

  2. Il browser analizza l'URL per trovare il protocollo, l'host, la porta e il percorso.

  3. Forma una richiesta HTTP (che era molto probabilmente il protocollo)

  4. per raggiungere l'host, in primo luogo ha bisogno di tradurre l'ospite leggibile in un numero IP, e lo fa facendo un DNS Lookup sull'host

  5. Poi una presa deve essere aperto da computer dell'utente a quel numero IP, sulla porta specificata (più spesso porta 80)

  6. Quando una connessione è aperta, la richiesta HTTP è inviato all'host L'host inoltra la richiesta ai server oftware (più spesso Apache) configurato per l'ascolto sulla porta specificata

  7. Il server controlla la richiesta (molto spesso solo il percorso) e avvia il plug-in del server necessario per gestire la richiesta (corrispondente alla lingua del server utilizzata, PHP, Java, .NET, Python?)

  8. Il plug-in accede alla richiesta completa e inizia a preparare una risposta HTTP.

  9. Per costruire la risposta, è possibile accedere (molto probabilmente) a un database.Viene effettuata una ricerca nel database, in base ai parametri nel percorso (o dati) della richiesta

  10. I dati del database, insieme ad altre informazioni che il plug-in decide di aggiungere, vengono combinati in una lunga stringa di testo (probabilmente HTML).

  11. Il plug-in combina i dati con alcuni metadati (sotto forma di intestazioni HTTP) e invia la risposta HTTP al browser.

  12. il browser riceve la risposta, e analizza il codice HTML (che con il 95% è rotto probabilità) nella risposta

  13. Un albero DOM è costruito fuori del HTML rotto

  14. nuove richieste sono fatto al server per ogni nuova risorsa che si trova nel sorgente HTML (tipicamente immagini, fogli di stile e file JavaScript).

  15. Torna al passaggio 3 e ripeti per ciascuna risorsa.

  16. fogli di stile vengono analizzati, e le informazioni di rendering in ogni si attacca al nodo corrispondente nella struttura DOM

  17. JavaScript viene analizzato ed eseguito, e nodi DOM vengono spostati e le informazioni di stile viene aggiornato di conseguenza

  18. il browser visualizza la pagina sullo schermo in base alla struttura DOM e le informazioni di stile per ogni nodo

  19. viene visualizzata la pagina sullo schermo

  20. Ti infastidisce l'intero processo era troppo lento.

+1

Il browser avvia il rendering della pagina subito dopo aver analizzato il primo elemento HTML. Certamente non aspetta che l'albero DOM sia completato, molto meno per tutte le risorse esterne da caricare. Forse puoi modificare la tua risposta per chiarire che almeno alcuni dei passaggi tra 13-18 avvengono come una pipeline (un elemento alla volta?), Piuttosto che sequenzialmente. – max