PROGRAMMIAMO
JS - Rendering di una pagina web
Come una pagina web viene scaricata e visualizzata dal browser

Esamineremo adesso in dettaglio le operazioni che il browser compie per ottenere una pagina web e per visualizzarla. Per sommi capi queste operazioni possono essere suddivise in 4 fasi:

  1. viene effettuata una richiesta per la pagina al web server che la ospita, per esempio quando l'utente fa clic su un link (fase di request)
  2. la pagina e le risorse ad essa collegate (file css, file javascript, immagini, etc) vengono scaricate (fase di response)
  3. il browser analizza la pagina e le relative risorse (fase di build)
  4. la pagina e il suo contenuto vengono visualizzati (fase di render)

Analizziamo ora in maggior dettaglio ciascuna delle fasi precedenti.

Fase di request

La fase di request viene avviata quando l'utente fa clic su un link oppure scrive un indirizzo (URL) nella barra degli indirizzi del browser.

Fase di request

Fase di response

La richiesta viene inviata al web server remoto che ospita la pagina e questi risponde inviando al computer dell'utente un file di testo (normalmente un documento con estensione .html, ma questo non è essenziale):

Response

Se la pagina è composta da un unico file html, la fase di response si conclude rapidamente. Tuttavia la maggior parte delle pagine moderne è costituita da molti file (file css, file javascript, immagini etc.) che devono essere scaricati per ricostruire la pagina stessa.

Dunque per prima cosa il browser analizza il documento html ricevuto (questa analisi in termine tecnico viene detta parsing) al fine di determinare quali altre risorse (ovvero file) devono essere scaricate.

Per ognuno di questi file si procede a una nuova richiesta al server remoto e quindi le fasi di request e di response vengono ripetute più volte (una per ciascuna risorsa da scaricare).

Fase di build

Una volta che il browser ha ottenuto tutte le risorse (file) necessari, esso può passare a ricostruire la pagina, combinando le informazioni contenuto nel file html con gli altri file.

La fase di build è piuttosto complessa e si compone a sua volta di due fasi:

  1. costruzione del DOM
  2. costruzione del CSSOM

Come abbiamo già detto il DOM è una mappa ad albero che descrive la struttura del documento. La fase di costruzione del DOM implica il parsing (analisi) del codice html al fine di costruire una mappa ad albero del documento stesso (il DOM, appunto):

DOM

Una volta costruito il DOM, il browser passa ad analizzare i fogli stile CSS associati alla pagina e ad aggiungere al DOM le informazioni di stile. Il DOM arricchito degli stili prende il nome di CSSOM (CSS Object Map):

CSSOM

Fase di render: layout e paint

In informatica col termine rendering si indica il processo attraverso il quale un programma genera un'informazione visiva a partire dai dati ricevuti. Nel caso dei browser, il rendering è il processo che porta dal DOM e CSSOM alla visualizzazione della pagina.

Nella fase di render il browser deve calcolare la dimensione dei singoli elementi che compongono la pagina e la loro posizione sulla pagina stessa (layout). Infine la pagina può essere visualizzata nella finestra del browser (paint).

Reflow e repaint

Se la pagina comprende codice javascript, il browser lo esegue durante la fase di build (nel caso di codice incorporato direttamente) oppure in risposta ad eventi o azioni dell'utente (es. clic su un elemento).

E' importante osservare che l'esecuzione del codice JS può comportare a seconda dei casi:

Nel caso che vengano modificate solo le proprietà di visualizzazione di un elemento, il browser procede a un repaint, cioè a ridisegnare l'elemento (si parla in questo caso di repaint) che è stato modificato. Maggiori problemi causa lo spostamento o l'aggiunta di un elemento, poiché in questo caso il browser deve aggiornare dinamicamente il DOM e quindi procedere nuovamente al rendering della porzione di pagina modificata (reflow).

Reflow e repaint possono essere scatenati, oltreché da javascript, anche dall'uso di effetti dinamici con i fogli stile o da azioni dell'utente sulla finestra del browser (per esempio ridimensionamento della finestra stessa). Si tratta in generale di operazioni che rallentano la visualizzazione della pagina e che dunque possono essere critiche nel caso in cui il caricamento veloce di una pagina sia particolarmente importante.

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it