微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

浏览器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加载完毕,如果不行也就是跑出错误

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐