js 代码块执行先后生命周期
js加载时间线
- 创建Document 对象,开解析web页面。解析HTML元素和他们的的文本内容添加Element对象和Text节点到文档中,这个阶段 document.readState = ‘loading’
- 遇到link外部css,创建新的线程,并继续解析文档。
- 遇到script 外部js,并且没有设置async,defer,(同步加载)浏览器加载,并阻塞,等待js加载完成并执行脚本,然后继续解析文档。
- 遇到script 外部js,并且设置async,defer(异步加载 ),浏览器创建线程加载,并继续解析文档。对于async属性的脚本,脚本加载完后立即执行。(异步禁止使用document.write())
- 遇到img等,先正常解析dom结构,然后浏览器异步加载src,并继续解析文档。
- 当文档解析完成时,document.readyState = ‘interactive’。
- 文档解析完成后,所有设置有defer的脚本会按照顺序执行。
- document对象触发DOMContentLoaded事件,这也标志着程序执行从同步脚本执行阶段转化为事件驱动阶段。
- 当所有的async的脚本加载完成并执行后,img 等加载完成后,document.readyState = ‘complete’, window 对象触发load事件。
- 从此,以异步相应的方式处理用户和网络事件。
页面加载生命周期
- l