js的时间线

    1. 创建Document对象,开始解析web页面.解析html元素和他们的文本内容添加Element对象和Text节点到文档中.这个阶段document.readyState=’loading’
    2. 遇到link外部css,创建线程加载,并继续解析文档
    3. 遇到script外部的js,如果没有设置async,defer,浏览器加载,并阻塞,等待js加载完成并执行该脚本,然后继续解析
    4. 遇到script外部的js,并设置了async,defer属性,浏览器创建线程加载,并继续解析文档;对于async属性的脚本,脚本加载完成后立即执行;(异步禁止使用documen.write(),onload事件后会清空之前所有的文档流,就是会清空整个body内容);
    5. 遇到img等,先解析文档内结构,然后浏览器异步加载src,并继续解析文档.
    6. 当文档解析完成,document.readyState=’interactive’.
    7. 文档解析完成后,所有设置defer的脚本会按照顺序执行.(注意与async不同,但同样禁止使用document.write())
    8. document对象触达DOMContentLoaded(只在addEventLister中有效)事件,这也标志着程序执行从同步脚本执行阶段,转换为事件驱动阶段(浏览器可以监听事件了,dom没完成,无法监听事件).
    9. 当所有的async脚本加载并完成执行,img等加载完成以后,document.readyState=’comolete’ 或’loaded’,window对象触发’onLoad’事件,
    10. 从此,以异步相应方式处理用户的输入,网络事件等;
    11. document.onreadystatechange事件中可以查看各个状态(除了onloading)