json，异步加载，时间线

1.json

• JSON.stringify()将对象转换为JSON字符串
• JSON.parse()将JSON字符串转换为对象

2.页面渲染过程

• domTree + cssTree = randerTree
• reflow 重排 dom节点的删除，添加；dom节点的宽高变化，位置变化，display none --> block；ffseetWidth offsetLeft

• repaint 重绘

3.异步加载js

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

（2）async异步加载，加载完就执行，async只能加载外部脚本，不能把js写在scipt标签里

（3）创建script，插入到DOM中，加载完毕后callBack

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();//下载完毕后执行tools.js中的test方法，onload兼容性好，但是在IE上不好使
        }
      }
      script.src = url;
      document.head.appendChild(script);
    }
loadScript('demo.js',function(){
	test()
})
//1.传入一个匿名函数，在函数内调用方法
//2.传入一个方法的字符串，用eval()执行
//3.js代码为一个对象里的方法用object[callback]的方式调用

（4）1，2执行是不会阻塞页面

4.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属性的脚本，脚本加载完成后立即执行。（异步禁止使用document.write()）

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

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

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

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

<script type="text/javascript">
  document.addEventListener(
  "DOMContentLoaded",
  function () {
    var div = document.getElementsByTagName("div")[0];
    console.log(div);
  },
  false
);
</script>

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

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