js时间线

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.从此以异步响应方式处理用户输入和网络事件等。

原文地址:https://www.cnblogs.com/wangzheng98/p/11162603.html