前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >json与js时间线

json与js时间线

作者头像
用户10094878
发布2022-11-21 15:24:48
4.5K0
发布2022-11-21 15:24:48
举报

json

异步加载js

代码语言:javascript
复制
js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一
旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作。
有些工具方法需要按需加载,用到再加载,不用不加载。
复制代码

javascript 异步加载的三种方案:

代码语言:javascript
复制
1.defer 异步加载,但要等到dom文档全部解析完才会被执行。只有IE能用,也可以将代码写到内部。
2.async 异步加载,加载完就执行,async只能加载外部脚本,不能把js写在script 标签里。
1.2 执行时也不阻塞页面
3.创建script,插入到DOM中,加载完毕后callBack,js时间线
复制代码

js时间线

代码语言:javascript
复制
1、创建Document对象,开始解析web页面。解析HTML元素和他们的文本内容后添加
Element对象和Text节点到文档中。这个阶段document.readyState = 'loading'。
2、遇到link外部css,创建线程加载,并继续解析文档。
3、遇到script外部js,并且没有设置async、defer,浏览器加载,并阻塞,等待js
加载完成并执行该脚本,然后继续解析文档。
4、遇到script外部js,并且设置有async、defer,浏览器创建线程加载,并继续解析文档。
对于async属性的脚本,脚本加载完成后立即执行。(异步禁止使用document.write())
5、遇到img等,先正常解析dom结构,然后浏览器异步加载src,并继续解析文档。
6、当文档解析完成,document.readyState = 'interactive'。
7、文档解析完成后,所有设置有defer的脚本会按照顺序执行。
(注意与async的不同,但同样禁止使用document.write());
8、document对象触发DOMContentLoaded事件,这也标志着程序执行从同步脚本执行阶段,
转化为事件驱动阶段。
9、当所有async的脚本加载完成并执行后、img等加载完成后,
document.readyState = 'complete',window对象触发load事件。
10、从此,以异步响应方式处理用户输入、网络事件等。
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-11-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • json
  • 异步加载js
    • javascript 异步加载的三种方案:
    • js时间线
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档