Differences and achieve doment ready event and load events

From September 2017 to now most of the work using react, front-end rendering some basic knowledge of memory is not very strong. Interview ** company, encounter "the difference between document ready and load, and achieve document ready event," the pen questions, answer them the distinction touches, ready events only answered readystatechange event. The answer is not very comprehensive, especially in this record.

READY the Document : After the initial HTML document is fully loaded and parsed, DOMContentLoaded event is triggered, without waiting to load style sheets, images and sub-frame is completed.
the Load : window:load event, the entire page has loaded, including some resources (stylesheets, images, etc.) depend on the page. Element:load, Such as resource elements image标签已经加载完毕.

to achieve load events do not need to say, you can onloadcallback properties and event addEventListener('load', 回调)listeners load event.
document ready event has a very complete implementation in jquery, in the Google browser, mainly through the document of DOMContentLoadedthe type of event with document.readyState === “complete”do preamble detection (is possible to add an event when listening, document ready event has been triggered). In IE iframe through onreadystatechange, not even further by iframedocument.documentElement.doscloll

Reference Source:

1. https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
2. https://github.com/jquery/jquery/blob/1.5b1/src/core.js