渡一教育公开课web前端开发JavaScript精英课学习笔记（十八）JSON，异步加载JS

JSON

前后端传送数据，原使用XML格式。现以对象形式传递即JSON。

JSON是静态类。有方法stringify、parse，对象转为字符串和字符串转对象。

浏览器渲染

浏览器渲染页面时，生成domTree（一边解析，一边下载），采用深度优先原则。

domTree解析完，等待cssTree生成，合并成 randerTree，开始绘制页面。

domTree节点的删除、增加，宽、高、位置等变化会触发reflow重排。优化页面尽量少更改domTree，

repaint重绘影响比较少。

异步加载JS

不影响页面的js，采用异步加载js，或按需加载js。

defer 异步加载，<script src='a.js' defer='defer'>

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

async异步加载，<script src='a.js' async='async'>

加载完就执行，async只能外部脚步，不能把js写在script标签里。

创建script，插入到dom中，加载完毕后callBack。

defer、async执行时不阻塞页面。

<h1>异步加载js</h1>
<script>
  function loadScript(url,callback){
    var script = document.createElement('script');
    script.type = "text/javascript";
    if(script.readState){
      script.onreadstatechange = function(){
        if(script.readState == "complete" || script.readState == "loaded"){
          // callback();
          tools[callback];
        }
      }
    }else{
      script.onload = function(){
        // callback();
        tools[callback];
      }
    }
    script.src = url
    //src 灯塔模式 预加载。
    document.head.appendChild(script);
  }
  //调用异步加载js方法。
  //loadScript('demo.js',function(){test()});
  loadScript('demo.js',"test");
  //demo.js内容
  // var tools ={
  //   test:function(){
  //     console.log('a');
  //   }
  // }
</script>

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属性的脚本，脚本加载完成后立即执行（异步禁止使用docuemnt.write();会清除所有元素）。
5.遇到img标签等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。
6.当文档解析完成，document.readyState = "interactive"；
7.文档解析完成后，所有设置有defer的脚本会按照顺序执行。
8..当文档解析完成之后，document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
9.当所有saync的脚本加载完成并执行后，img等加载完成后，document.readyState = "complete" window对象触发load事件。
10.从此，页面以异步响应方式处理用户输入，网络事件等。

<h1>js加载时间线</h1>
<div></div>
<script>
  console.log('loading:',document.readyState);
  //文档全部加载渲染完成
  window.onload = function(){
    console.log('window.onload:',document.readyState);
  }
  document.onreadystatechange = function(){
    console.log('readystatechange:',document.readyState);
  }
  //DOM解析完触发事件
  document.addEventListener('DOMContentLoaded',function(){
    console.log('DOMContentLoaded');
  })
</script>