2013-04-12 21 views
8

Sto cercando di capire il ciclo di vita di una pagina HTML. Non riesco a trovare alcuna buona risorsa online. Così ho aperto lo strumento f12 in ie e ho fatto alcuni esperimenti per conto mio. Sulla base di ciò ho tratto alcune conclusioni, qualcuno può dirmi se ho ragione?Life Cycle pagina HTML

La mia osservazione

1> Quando una pagina viene richiesta su HTTP prima lo scheletro HTML viene ricevuto dal browser. In questo momento non viene visualizzato nulla all'utente.

2> In base a ciò che è nello scheletro HTML alcune richieste più ulteriori vengono inviati per le risorse (esterno JavaScript, CSS, immagini, ecc)

3> Il browser attende finché non riceve un codice di stato HTTP per le risorse di script e css.

4> Una volta ricevuto il codice di stato HTTP per css e JavaScript, solo allora il browser inizia a caricare il documento dall'alto in basso, eseguendo qualsiasi codice JavaScript incorporato che incontra lungo la strada.

5> Se il codice JavaScript incorporato nella parte superiore si riferisce a un elemento HTML nella parte inferiore, JavaScript non funzionerà.

6> Una volta terminato il caricamento dell'intero documento, viene generato l'evento jquery $ (document) .ready. (Ovvero se sto usando JQuery)

7> Il browser non attende risorse diverse da script e css, quindi risorse come immagini potrebbero essere caricate più tardi dopo che la pagina viene visualizzata all'utente.

+3

jQuery! = JavaScript! = HTML. Questo doveva essere detto una volta. –

+0

risolto con l'aggiunta del testo "(Cioè se sto usando JQuery)" alla domanda. – Foo

+2

Una nota/correzione importante: sono solo i tag Javascript che bloccano la pagina dal rendering. Ecco perché gli sviluppatori di front-end ti diranno di inserire i tuoi riferimenti Javascript nella parte inferiore della pagina, subito prima della chiusura del tag * body *. – McGarnagle

risposta

2

Hai praticamente capito bene. Ma dipende dal codice (in particolare i punti 5, 6 e 7). Ad esempio, se il JS nella parte superiore è compreso tra $(document).ready, non avrà esito negativo.

In secondo luogo, preferirei Firefox F12 o Chrome F12 su IE. Sono molto dettagliati e facili da usare per gli sviluppatori. Vedere la scheda NET in loro per capire ulteriormente. Ti mostrerà l'ordine esatto in cui le risorse vengono chiamate e caricate, che è ciò che stavi cercando principalmente.

Problemi correlati