htmldomloaddomcontentloaded

Why Load event comes before DOMContentLoaded

simple document 👇

<html lang="en">
  <body>
    <div>xxx</div>
  </body>
</html>

I find Load event comes before DOMContentLoaded and I'm confused.

I know Load event will be triggered when document and static resource has been loaded, DOMContentLoaded will be triggered when document has loaded. Is that means Load always comes after DOMContentLoaded?

enter image description here

Solution

  • The DOMContentLoaded event triggers when the HTML document has been downloaded and the DOM tree has been parsed.

    The load event triggers, if all resources have been downloaded (HTML document, images, stylesheets, etc.).

    Usually, load event happens after DOMContentLoaded event, because parsing the DOM tree is much faster then downloading all the resources. But in your case, there is only the HTML resource. Thus load will be before splitseconds before DOMContentLoaded, as both load the HTML but DOMContentLoaded has to wait for parsing the tree in addition.

    enter image description here