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

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

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

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

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

例：

之前的书写格式

<student>

    <name></name>

    <age></age>

</student>

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

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=""/>，是先加载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构建完，发生在整个页面加载完以前）才会执行

例：

<script type="text/javascript" src="tool.js"/>

-->属于同步加载

<script type="text/javascript" src="tool.js" defer="defer"/> // 异步加载（凡是属性名，值同样，直接写属性名便可，系统自动会识别）

上述方法属于异步加载，能够与html，css并行加载，不会阻塞页面加载，互不影响。

  2.async(asychronous)异步加载，加载完脚本当即就执行，async只能加载外部脚本，不能把js写在script标签里。（W3C标准方法，非IE使用）

      例：<script type="text/javascript" src="tool.js" async="async"/>

       上述的1,2执行时也不阻塞页面

       asychronous javascript and xml-->ajax的缩写

     注意：

          defer：js代码能够写在其内部，也能够引用外部js文件

           async：只能加载外部js文件 

         那么，如何解决两者的缺点呢？参照方案3

  3.建立script，插入到DOM中，加载完毕后callBack.-->按需加载（异步加载）

        var script = document.createElement("script"); // 建立
        script.type="text/javascript"; // 设置
        script.src="tools.js"; // 下载js （预加载机制）下载的时候会发送一个请求，回归资源，须要一个过程，须要时间（在这个过程当中，就会将后面的代码执行了），因此，若是直接调用js内部的函数，就有可能不会执行test()函数，须要用setTimeOut方法来控制,可是不能解决根本问题，由于资源下载时间根本没法预知。

        // document.head.appendChild(script); // 执行js

       // setTimeOut(function(){

        //      test();  // js内部函数

   //   },1000);

上述解决方案，可使用onload事件

        // IE浏览器
        if (script.readyState) {
            script.onreadystatechange=function (){
                if (script.readyState == "complete" || script.readyState == "onload") {
                    test();
                }
            }
        // safari chrome firefox opera  (IE除外)
        } else {
            script.onload=function() {
                test();
            }
        }

     document.head.appendChild(script); // 执行js

  写一个共通的异步加载函数方法，能够直接调用，参照个人另一篇博客：

https://my.oschina.net/korabear/blog/1803135