DOMContentLoaded vs jQuery.ready , How To Decide The Code Should Run

What is domContentLoaded?

  • domContentLoaded is the point when both the DOM is ready and there are no stylesheets that are blocking JavaScript execution .
  • This event typically marks when both the DOM and CSSOM are ready.
  • This means that the render tree can now be built.
  • If there is no parser blocking JavaScript then DOMContentLoaded will fire immediately after domInteractive.

domcontentloaded

Take a Brief:

  • Script tag have access to any element which appears before them in the HTML.
  • DOMContentLoaded / jQuery.ready occurs when all the HTML is ready to interact with, but often before its been rendered to the screen.
  • The load event occurs when all the HTML  is loaded, and any subresources like images are loaded.
  • Use setTimeout to allow the page to be rendered before the code runs.

For more details: https://varvy.com/performance/domcontentloaded.html

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s