Sobes.tech
Middle

Come avviene il rendering del sito per l'utente?

sobes.tech AI

Risposta dell'AI

  1. L'utente inserisce l'URL nel browser. Il browser invia una richiesta DNS per ottenere l'indirizzo IP del server.
  2. Il browser stabilisce una connessione TCP con il server. Di solito si utilizza il protocollo HTTP/S.
  3. Il browser invia una richiesta HTTP al server. Vengono richiesti il documento HTML e altre risorse (CSS, JavaScript, immagini).
  4. Il server elabora la richiesta e invia una risposta HTTP. La risposta contiene le risorse richieste e le informazioni sullo stato.
  5. Il browser riceve il documento HTML. Inizia il parsing dell'HTML.
  6. Viene creato il DOM (Document Object Model). Albero di oggetti che rappresenta la struttura dell'HTML.
  7. Il browser rileva nei link HTML risorse esterne (CSS, JavaScript, immagini). Vengono effettuate richieste aggiuntive per ottenerle.
  8. Il browser riceve gli stili CSS. Inizia il parsing del CSS.
  9. Viene creato il CSSOM (CSS Object Model). Albero di oggetti che rappresenta gli stili.
  10. Viene creato l'albero di rendering. Unione del DOM e del CSSOM. Contiene solo gli elementi visibili e i loro stili.
  11. Layout (o Reflow). Vengono calcolate le dimensioni geometriche e la posizione di ogni elemento sulla pagina.
  12. Paint (o Repaint). Gli elementi vengono disegnati sullo schermo secondo i loro stili e la loro posizione.
  13. Composizione. La pagina viene composta strato per strato per la visualizzazione all'utente.
  14. Il browser riceve i file JavaScript. Inizia il parsing e l'esecuzione del codice. JavaScript può modificare DOM e CSSOM, portando a un ricalcolo di Layout e Paint.
  15. Visualizzazione della pagina all'utente. Man mano che le risorse vengono ricevute e i passaggi completati, l'utente vede il contenuto della pagina.