js加载时间线
1.document.readystate == "loaded" 阶段
创建document对象,开始解析web界面。解析HTML页面和他们的文本内容后添加Element对象和Text节点到文档中。
2.如果遇到link外部css加载,创建线程加载然后继续解析文档。
3.遇到script标签外部的js,而且没哟适async,defer,浏览器加载,并阻塞,就要等待js加载完成并且执行该脚本,然后继续解析执行文档。
4.遇到script外部js,设置有async ,defer,浏览器创建线程加载,并继续解析文档。对于async属性的脚本,脚本加载完成后立即执行。
5.遇到img,先正常解析dom结构,然后浏览器异步加载src,并继续解析文档。
6.档文档解析完成,document.readyState = ‘Interactive’ 状态。
7.当文档解析完成后,所有设置defer的脚本都会按照顺序执行。
8.document对象处罚DOMContentLoaded时间,这也标志着程序执行从同步脚本执行阶段转换为事件驱动阶段。
9.当所有的async的脚本加载完成并执行后。img等加载完成后 ,document.readyState = “complete”,window对象触发load时间
10.从此以异步响应方式处理用户输入和网络事件等。