什么是domReady

html告诉我们页面中有什么内容，而行为交互是需要dom节点来参与，html标签需要通过浏览器解析成为dom节点，当html标签全部解析为dom节点之后dom树构建完毕，即domReady。
下图中在div元素节点构建之前就对该节点产生行为交互，document.getElementById()无法找到该dom节点，所以会报错。

浏览器的渲染流程

1.将html标签解析为dom节点
2.解析各部分的CSS信息（外部CSS文件、style标签内的样式）
3.决定dom节点在页面中的具体坐标
4.为dom节点添加样式信息

domReady的实现策略

放在body标签的最后

把脚本放在body标签最后就可以等dom节点构建完成之后再进行交互，但是对于代码量较大的程序来说需要把脚本放到外部引用，所以这个方法并不方便。

window.onload事件

window.onload是当dom节点绘制完毕并且浏览器资源加载完毕之后会触发的事件。

该方法可以达到我们的目标，但是需要等待所有资源加载完毕之后才触发，对于资源较大的网页来说就会等待很久才触发，严重影响用户体验。

JQ中的ready方法

JQ的目标是在页面的dom树构建完成后不等待其他资源的加载就触发，通过以下方法完成：
1.如果支持DOMContentLoaded就使用这个事件
2.不支持的（IE）通过document.documentElement.doScroll('left')判断dom树是否构建完毕

模仿JQ的判断方法，在IE中使用document.onreadystatechange监听加载状态，如果加载完成就可以直接执行回调函数；如果未完成，通过document.documentElement.doScroll('left')反复判断是否构建完毕；在现代浏览器中通过添加事件监听来监听DOMContentLoaded事件，事件触发后执行回调。





这是一名小白的学习笔记，如果有错误请指正，感谢大家！！