How does browser page lifecycle sequence work?

Question

Would like to create a presentation on how the browser work, does anybody know the exact lifecycle sequence which happen whenever a browser URL is requested?

Wha

Answer 1

I'd like to suggest the following for anyone who would like to watch what happens, it's a cheap answer but it might be useful to explain how the browser retrieves it's cascade of files to construct the contents of a URL (in this case an html).

1. Browse to a page you want to use to demonstrate in Chrome (or use this page for a fairly complex example)
2. Open the console (Ctrl + Shift + i)
3. Select "Network" from the options
4. Hit F5

Play with the settings. You should also look at the timeline created in the Performance tab

5. Select "Performance" from the options
6. Hit F5

It may be useful here to throttle back the performance, so you can watch it in real time (slow) if that's something you want to demonstrate.

The important thing is (using an HTML page as an example), the order of rendering/applying css/running javascript, depends on where it appears in the DOM. It's possible to execute a script at any point after it's loaded, subject to the required resources being available. Css could be part of the HTML document (inline) or it might be coming from a very busy server and take 10-20 seconds before it can be applied. Hope this is of some help -R