doment ready事件和load事件的区别及实现

从2017年9月至今工作中大部分使用react，前端渲染的一些基础性知识记忆不是很深刻了。面试**公司的时候，碰到“document ready和load的区别，以及document ready事件的实现”的笔试题，区别倒是回答出来了，ready事件只回答了readystatechange事件。回答的不是很全面，特在此记录。

document ready: 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的加载完成。

load: window:load event,整个页面已经加载完毕，包括页面依赖的一些资源（样式表、图片等）。Element:load,资源元素例如image标签已经加载完毕。

load事件的实现不需要说，可以通过onload事件回调属性和addEventListener('load', 回调)监听load事件。

document ready事件在jquery里有很完整的实现，在谷歌浏览器中主要是通过document的DOMContentLoaded事件类型配合document.readyState === “complete”做前置检测（有可能添加事件监听的时候，document ready事件已经触发了）。在IE中iframe是通过onreadystatechange,而非iframe还要进一步通过document.documentElement.doscloll

参考来源：

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