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