0
点赞
收藏
分享

微信扫一扫

浅谈js加载的时间线

90哦吼 2021-09-24 阅读 76

html文档的执行顺序

页面是从上到下的按顺序进行加载
1、创建Document对象,开始解析web页面,解析HTML标签元素和他们的文本内容后添加到Element对象和Text节点到文档中,在此阶段中

document.readyState="loading"

生成document对象,document状态位变为loading
2、遇到link外部css,创建线程加载,并且继续解析文档。
3、遇到script外部js,在没有设置async,defer,浏览器加载,并阻塞,等待js加载完成并执行该脚本,然后继续解析文档。
4、遇到script外部js,如果设置了async,defer,浏览器创建线程加载,并继续解析文档,对于async属性的脚本,脚本加载完毕之后立即执行。(异步禁止使用document.write())

例如:使用document.wirte('a'),整个页面只显示a,在这里有消除整个文档流的功能,连script都消除了。

 <script type="text/javascript">
     // console.log(document.readyState);
     //    document.onreadystatechange = function(){
     //        console.log(document.readyState);
     //    }
     $(document).ready(function(){
        document.write('a');
     })
</script>


5、当遇到img等,先正常解析dom结构,然后浏览器异步加载src,并继续解析文档。
6、当文档解析完成,document.radyState = 'interactive',先解析完,再加载完,然后状态位变为interactive。
7、文档解析完成后,所有设置有defer的脚本会按照顺序执行。
8、document对象触发DOMContentLoader事件,这也标志着程序执行从同步脚本执行阶段转换为事件驱动阶段
9、当所有async的脚本加载并且执行后,img等加载完成后document.readyState = 'complete',window对象触发load事件
10、之后,通过异步响应方式处理用户输入,网络事件等

通过network可查看文档加载的顺序

举报

相关推荐

0 条评论