js加载时间线 （重点掌握）

2019独角兽企业重金招聘Python工程师标准>>>

1.创建document对象，开始解析web页面。解析html元素和他们支持的文本内容后，添加element对象和text节点到文档中，这个节点document.readyState=“loading”。

2.遇到link外部css，创建线程加载，并继续解析文档。

3.遇到script外部js，并且没有设置async，defer.（同步加载）浏览器加载并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。

4.遇到script外部js，并且设置有async,defer（异步加载），浏览器创建线程加载，并继续解析文档。对于async属性的脚本，脚本加载完成后立即执行。（异步禁止使用document.write() 

      原因是： 相当于html文档输出到页面，当整个文档解析差不多的时候，再调用document.write()方法的时候，它将之前的所有文档流清空，将当前的文档流输出

     例：window.οnlοad=function(){}   该方法是页面所有加载并且所有文档解析完毕后，然后加载调用该方法，就会将之前的文档流全部清空）

5.遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。

6.当文档解析完成（domtree刚建立完），document.readyState="interactive";

7.文档解析完成后，所有设置defer的脚本会按照顺序执行。（注意与ansyc的不同，但同样机制使用document.write()）

8.document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。

9.当所有的async的脚本加载完成并执行后，img等加载完成后，document.readyState="complete",window对象触发load事件。

10.从此，以异步响应方式处理用户输入，网络事件等。

 

总结三句话：

  1.创建document文档对象

  2.文档解析完

  3.加载完，再执行完

例：

        console.log(document.readyState);  // loading

        document.onreadystatechange = function(){
            console.log(document.readyState); // interactive,complete
        }

        document.addEventListener('DOMContentLoaded',function(){ // DOMContentLoaded事件只能绑定在addEvenListener上，模拟jquery方法，等DOM解析完之后再执行
            console.log("a");
        },false);

==>

   loading

   interactive

   a

   complete

 

html代码中，为了将DOM文档解析完之后执行js代码，便将js写在DOM文档结构之后，但是这样写不够美观，所以为了解决这个问题，可以用下面两种方法解决。

1.window.onload();   // 运行效率慢，土鳖式写法，就是页面所有的东西加载并且执行完之后才执行的方法，假如页面其中任何一个src的资源没被加载，该onload事件便无法执行

2.document.addEventListener('DOMContentLoaded',function(){.....},false); //解析完之后，执行该方法， 效率较高

转载于:https://my.oschina.net/korabear/blog/1801306