JSON，異步加載JS

JSON，異步加載JS

JSON

前後端傳送數據，原使用XML格式。現以對象形式傳遞即JSON。

JSON是靜態類。有方法stringify、parse，對象轉爲字符串和字符串轉對象。

瀏覽器渲染

瀏覽器渲染頁面時，生成domTree（一邊解析，一邊下載），採用深度優先原則。

domTree解析完，等待cssTree生成，合併成 randerTree，開始繪製頁面。

domTree節點的刪除、增加，寬、高、位置等變化會觸發reflow重排。優化頁面儘量少更改domTree，

repaint重繪影響比較少。

異步加載JS

不影響頁面的js，採用異步加載js，或按需加載js。

defer 異步加載，

但要等到dom文檔全部解析完纔會被執行，只有IE能用，也可以將代碼寫到內部。

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>
ent.addEventListener('DOMContentLoaded',function(){
    console.log('DOMContentLoaded');
  })
</script>