1,什么是DOMReady?
一个被封装的方法,用以当浏览器生成DOM树结构后就开始解析某些js代码
2,为什么需要DomReady
在初学js时,我们都知道使用window.onload用以保证页面的所有资源都加载完毕后才执行当中的js代码,否则当js在title中定义或则引用时会报错:不能为空节点添加某某属性云云。是的,onload的确是一个简单易用的方法,但随着我们学习的深入,当我们构建的页面存在大量图片或其他需要较长时间加载的资源时,显然让js等待这些费事的资源加载完毕再执行是非常不合理且形成糟糕的用户体验。这时我们有了新的需求,需要在DOM树生成后&其他资源加载以及渲染前就执行js代码,所以DOMReady出现了
3,实现DOMReady的原理
在构建了DOM树之后就开始解析js,而不是等待页面渲染完毕。
1.解析HTML,构建DOM树(构建DOM节点);
2.构建渲染树(解析样式信息,包括外部的css文件、style标签中的样式,按优先级解析)。渲染树由一些包含有各种属性的矩形组成,他们将会按照正确的顺序显示到屏幕上;
3.布局渲染树(布局DOM节点),执行布局的过程,将确定每个节点在屏幕上的确切坐标;
4.绘制渲染树(绘制DOM节点,即遍历渲染树),使用UI后端层来绘制每个节点。
4,实现方法
IE8(包括)之前版本由于不支持符合W3C规范的DOMContentLoaded事件,所以需要用hack实现兼容。
在页面的Dom树创建完成之后,即触发,无需等待其他资源的加载
1,支持DomContentLoaded事件的,就用DomContentLoaded事件
2,不支持的 就用Hack兼容 原理 :通过IE中的document.documentElement.doScroll('left')来判断Dom树是否创建完毕。