13

I found this nice post at kirupa.com, but I'd like to understand in deep the order of load, rendering and execution of elements like DOM, Scripts, CSS, Images, IFrames, etc.

Until now I have understood the next order:

  1. DOM
  2. JS (I am guessing does not matter JS is inline or external, if it is external I guess DOM load is interrupted until the JS is loaded, rendered and executed)
  3. internal CSS? (Or is it rendered together DOM load.)
  4. external CSS
  5. external Images

According the article 'While external style sheets won't get loaded, both inline and external scripts will though.' but according MDM 'Stylesheet loads block script execution'. So scripts are loaded first but they are executed only after all css are available?

I could think that order depends on the browser implementation or is there any standard to make this?

Does some expert would tell us the right order?

Thanks in advance!

Marco Medrano
  • 2,530
  • 1
  • 21
  • 35
  • 2
    You can use Chrome DevTools to see the order in which elements on your page get loaded(Network Tab) and rendered(Timeline Tab). – Valentin Feb 27 '14 at 23:54
  • 1
    Stylesheets only block ` – Pointy Feb 27 '14 at 23:54
  • 1
    It would certainly depend on the browser itself, each `brand` would implement their browser in such a way that they beleive would optimize or make your browsing experience better than another. That said, I would image that they are all largely the same with little variation. See http://stackoverflow.com/a/1795502/148998 – shenku Feb 28 '14 at 00:02
  • Yes @shenku I also think there is an standard with minimum variations on each implementation otherwise we developers would experiment more bugs on browsers that we already have. Must be an order. – Marco Medrano Feb 28 '14 at 00:09
  • have a look on this post http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ – Nur Rony Mar 03 '14 at 13:04

1 Answers1

12

I believe the order is something like this:

  1. Download HTML document
  2. Start HTML Parsing
  3. Start downloading external files (JavaScript, CSS, images) as they're encountered in the HTML
  4. Parse external files once they are downloaded (or if they are inline and don't require downloading)
    • if the files are scripts, then run them in the order they appear in the HTML
      • if they try to access the DOM right now, they will throw an error
      • while they run, they will prevent any other rendering, which is why some scripts are put at the bottom of the body
    • for CSS files, save the style rules in order they appear in the HTML
    • if they're images then display them
    • if the loading fails, then proceed without this file
  5. End HTML Parsing
  6. Create the DOM - including all the styles we have so far
  7. Execute the DOMContentLoaded event when the DOM is fully constructed and scripts are loaded and run
    • happens even if all other external files (images, css) are not done downloading (from step 4)
    • in the Chrome F12 developer tools this is represented by a blue line on the Network view
    • will start running anything you've added to this event, e.g. window.addEventListener("DOMContentLoaded", doStuff, true);
  8. Start painting the document to the display window (with any styles that have already loaded)
  9. Execute the window.onload event when all external files have loaded
    • in the Chrome F12 developer tools this is represented by a red line on the Network view
    • this will start running the jQuery ready function $(document).ready(function(){ ... });
    • will start running any code you've added to this event, e.g. window.addEventListener("load", doStuff, true);
  10. Re-paint the document, including any new images and styles

Note that the execution order of scripts that are dynamically added to your page (by other scripts) is complicated and basically indeterminate. (See the answers here load and execute order of scripts)

Community
  • 1
  • 1
Luke
  • 18,811
  • 16
  • 99
  • 115
  • Thx for explicitly explain the order. I have a question. In step 9, does the window.onload will never triggered when css and img files have loaded ? and if the downloading return error, could triggered window.onload ? – pingfengafei Aug 17 '17 at 01:34