JSON，异步加载（学习笔记）

JSON是一种传输数据的格式（以对象为样板，本质上就是对象，但用途有区别，对象就是本地用的，json是用来数据传输的，前端与后端的数据通信）

JSON是静态类（不需要构造），类似于Math，内部有各种函数

     1）.JSON.parse();string->json (解析成对象属性和属性值，可以进行调用)

    2）.JSON.stringify(); json->string

例：

以前的书写格式

    <name></name>

    <age></age>

现在的书写格式（正常的格式是属性名：属性值。属性名的双引号可加可不加。）

json

var obj={

   "name": “json”,   // ""必须加

    "age": 12;

}

json.stringify(obj);

-->变成字符串的json格式：{"name":"json","age":"12"}

json.parse(obj);

-->后台传回来的数据解析成对象object {name:"json",age:13}，供我们使用和调用属性

下面百度从后台传回来的数据（例）：

jQuery11020012640901382223513_1524493123691({"q":"","p":false,"bs":"蒋奥","csor":"0","status":770,"s":[]});

   浏览器先识别html代码，形成DOM树（），绘制domtree的时候遵循深度优先原则（先看左侧head,然后继续看head内部有什么东西，知道head没有别的东西，返回去继续看body，body下面的div，继续div内部的东西，然后再是和div同级别的span等....）。

 domTree

                 html

head                           body

title  meta                         div span string

                                                            em

解析代码的时候，比如遇到<img src="https://my.oschina.net//korabear/blog/1800039/>，是先加载src内部的东西，然后继续解析呢？还是先解析完img之后继续解析下一个呢？

      一边下载，并且继续解析后面的，最后是解析要比页面加载要快。DOM树解析完，表示DOM所有节点的解析完毕，不代表所有节点的加载完毕。所以，属于异步加载的过程。

     domTree树形成完之后，继续等cssTree的形成（系统根据Css生成类似于DOMtree的节点树），最后，形成randertree。

     domTee+cssTree = randerTree(渲染，绘制)->渲染引擎按照randerTree的规则进行绘制画面

    对DOM树的增删改（DOM节点的删除，添加，宽高变化，位置变化  ***例：1).display:none; =>display:block;2):offsetWidth,offsetLeft （特殊语法）注意：这个是查DOM节点的位置，但是randerTree是重新构建，重新渲染，然后取出宽，左距离的最新，实时的数据 3):repaint:重绘 重绘局部DOM节点的比如背景颜色，字体颜色之类 ***）的时候，就会影响画面的结构，randerTree就会重新构建（reflow：重排，重构->导致效率低下），就会重新绘画面。

________________________________________________________________________________________________________

异步加载js

js加载的特点：

   加载工具方法没必要阻塞文档，过得js加载会影响页面效率，一旦网速不好，那么整个网站将等待js加载而不进行后续渲染等工作。

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

  网页留白加载的是js，后续不会加载，导致整个页面容易瘫痪。

  js是会动态修改页面，所以不能够与html，css同时执行，加载。所以有的时候（），需要js的异步加载。

js异步加载的三种方案

  **1.defer异步加载，但需要等到DOM文档全部解析完才会被执行。**只有IE能用（IE9以下可以用），也可以将代码写到内部。// 要等到真整个文档解析完（DOMTREE构建完，发生在整个页面加载完之前）才会执行

例：