浏览器DOM文档的加载步骤，以及readyState值的变化

面试的时候经常会被问到：ready和load哪个先执行

1.要了解ready和load哪个先执行，就要了解浏览器DOM的加载顺序：

（1）解析html结构
（2）加载外部脚本和样式表文件
（3）解析并执行脚本代码
（4）构建DOM，和html结构          ／／ready
（5）加载图片等外部文件
（6）加载完毕                 ／／load

2.在文档加载的过程中，document.readyState（主流浏览器都支持）会返回以下一些状态

uninitialized - 还未开始载入
loading - 载入中
interactive - 已加载，文档与用户可以开始交互
complete - 载入完成

浏览器存在onreadystatechange事件，当该事件触发，并且document.readyState === 'complete'的时候，则视为DOM树已经加载完毕。但是该事件不太可靠，比如当页面中存在图片等时候，反而等到load事件触发后才能触发换言之，它只能正确地执行于页面不包含二进制资源或非常少或者被缓存时作为一个备选吧。
3.判断旧IE浏览器DOM加载完毕等方法
原理：IE在非iframe的时候（window.frameElement === null），只有当DOM加载完毕才能执行doScroll，所有可以间隔50毫秒的对文档进行try catch，如果可以执行doScroll则DOM加载完毕，如果不行也就是跑出错误。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!