day17.json，异步加载，时间线-CSDN博客

本文链接：https://blog.csdn.net/qq_45801179/article/details/122893757

本文详细介绍了JSON的用途及其与JavaScript对象的区别，强调了JSON.parse()和JSON.stringify()方法的作用。同时，探讨了JavaScript异步加载JS的三种方式，包括defer、async属性以及动态创建script标签的方法，分析了它们的执行时机和效率。此外，还梳理了浏览器加载时间线，帮助理解DOM加载和脚本执行的流程。

摘要由CSDN通过智能技术生成

1.json（静态类）

定义：

JSON是一种传输数据的格式（本质上是对象，但与对象有区别，对象

是本地使用的，json是用来传输的。其属性名必须加双引号）
相关方法

方法名作用
JSON.parse() string->json
JSON.stringfy(); json->string

方法名	作用
JSON.parse()	string->json
JSON.stringfy();	json->string

在这里插入图片描述

注：浏览器解析代码生成DOM树和CSS树，在解析的时候时候只识别是那种标签，解析跟资源下载的过程是异步的，最后csstree和domtree会生成一棵randertree, 当randertree反复构建，这个过程叫reflow（重排，这种效率是最低的，例如DOM结点的增删改查、DOM结点的宽高变化，位置变化、display none变成block。凡是涉及randertree的重构都是低效的）；而repaint(重绘)，列如颜色变化，重绘的只是csstree的局部，浪费的效率比较小

domTree+ cssTree =randerTree

2.异步加载js

js加载的缺点：加载工具方法没必要阻塞文档，过多js加载会影响页面效率，一旦网速不好那么整个网站将等待Js架子啊儿不进行后续渲染等工作。

有些工具方法需要按需加载，不用不加载

JavaScript异步加载js有三种方法：

defer 异步加载，但要等到DOM文档全部解析完才会被执行。只有IE能用，也可以将代码写到内部。

<script src="tools.js" type="text/javascript" defer="defer">
    var a = '123';//这个也时异步加载的
</script>

async异步加载**，加载完就执行**，async只能加载外部脚本，不能把js写在script标签里。（asychronous javascript and xml----ajax）
```
<script src="tools.js" type="text/javascript" async='async'></script>
```
注：1、2执行时也不阻塞页面

创建script，插入到DOM中，加载完毕后callback //按需加载

//可以放到函数里面等到需要的时候在执行
<body>
<div>按钮</div>
<script type="text/javascript">
    var script = document.createElement('script');
    script.type ='text/javascript';
    script.src ="testjs.js";
    var div = document.getElementsByTagName("div")[0];
    div.onclick = function (){
        console.log("an");
        document.head.appendChild(script);
    }
</script>
</body>

使用时，注意时间！！！

//function test() { alert("this is a outer script!");}//外部代码
var script = document.createElement('script');
    script.type ='text/javascript';
    script.src ="testjs.js";
    test();//注意，外部脚本加载需要时间，当未加载完时调用，就会undefine

在这里插入图片描述

应该用在onload函数(Safari Chrome Firefox Opera兼容，IE用script.readyState = “loaded/Compelet”)之后，保证外部的脚本加载完成

 var script = document.createElement('script');
      script.type ='text/javascript';
      script.src ="testjs.js";
      // test();//注意，外部脚本加载需要时间，当未加载完时调用，就会undefine
      script.onload = function () {
          test();
      }
      document.head.appendChild(script);

  兼容写法：

 function loadScript(url,callback) {
          var script = document.createElement('script');
          script.type ='text/javascript';
  
          if (script.readyState){
              script.onreadystatechange = function () {
                  if (script.readyState == "complete"||script.readyState =="loaded"){
                      callback();
                  }
              }
          }else {
              script.onload = function () {
                  callback();
              }
          }

          script.src = url;//先绑定事件，然后再加载文件，以免资源加载太快监听不到状态码的改变，事件还没绑上都已经loaded了

document.head.appendChild(script);
  }
  loadScript("testjs.js",function () {
      test();
  })

3.浏览器加载的时间线

  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())

  //document.write()会消除之前已经加载好的全部清空

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

  6、当文档解析完成,document.readyState = 'interactive'。

  7、文档解析完成后，所有设置有defer的脚本会按照顺序执行。(注意与async的不同,但同样禁止使用document.write();

  8、document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。（因此。想要在DOM树刚生成，外部资源还没下载的完的时候触发可以用

document.addEventListener("DOMContentLoaded",function () {
      console.log('a');
  },false);
  ）

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


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

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