js加载时间线

js加载时间线

• 创建Document对象，开始解析web页面，解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中，此时的document.readyState = 'loading'
• 遇到link外部引入的css，会开启一个新的线程进行异步加载，继续解析文档
• 遇到script外部js，并没有设置defer或者async，会同步加载js文件并且阻塞页面解析，等js加载完并执行完才继续解析页面
• 遇到script外部js，有async或者defer的script，浏览器创建线程加载js文件，继续解析文档，其中设置了async的脚本会在加载完成后执行（异步禁止使用document.write()），而设置了defer的脚本会在dom树构建完成，文档解析完成后执行
• 遇到img（带src的）等，会异步加载，并继续解析文档
• 当文档解析完成，document.readyState = 'interactive'
• 文档解析完成后（dom树构建完成），设置了defer的脚本会按照顺序执行；
• 文档解析完成后，document触发DOMContentLoaded事件（该事件只能通过addEventListener来绑定），document.readyState = 'interactive';由此从同步脚本执行阶段进入到事件驱动阶段
• 当所有的async脚本执行完毕，img加载完，所有的资源都加载完后；document.readyState = 'complete';window触发onload事件
• 从此，以异步响应的方式处理用户输入，网络事件等