1. JSON

• json是一種傳輸資料的格式（以物件為樣板，本質上就是物件，但用途有區別，物件是本地的，JSON是用於傳輸的。
• JSON.parse();//string --> json
• JSON.stringify();//json --> string

2. 頁面渲染

• randerTree = domTree + cssTree；深度優先
• reflow重排：對效率影響很大，效率很低
  • dom節點增刪；
  • dom節點的寬高變化，位置變化，display:none --> block；
  • offsetWidth,offsetLeft
• repaint 重繪：效率低，但影響較小。

3. js載入

• js載入的缺點：
  • 載入工具文件沒必要阻塞文件，使得js載入會影響頁面效率，一旦網速不好，那麼整個網頁將等待js載入可不進行後續渲染等工作。
  • 有些工具方法需要按需載入，用到再載入，不用不載入
• js非同步載入的三種方案：
  • defer非同步載入，但要等到dom文件全部解析完才會執行。只有IE能用。
  • async非同步載入，載入完就執行，只能載入外部指令碼，不能將JS寫在script標籤裡。執行時也不阻塞頁面。
  • 建立script,插入到DOM中，載入完畢後callback。

  function loadScript(url,callback){
          var script = document.createElement('script');
          script.type = "text/javascript";
          if(script.readyState){
              //IE有狀態碼
              script.onreadystatechange = function(){
                  if(script.readyState == 'complete' || script.readyState == 'loaded'){
                      // callback();
                      eval(callback);
                  }
              }
          }else{
              script.onload = function(){
                  // callback();
                  eval(callback);
              }//IE不適用
          }
          script.src = url;//先在上面繫結事件，再載入檔案。-- onreadystatechange事件
          document.head.appendChild(script);
      }
  
      // loadScript('tools.js',function(){
      //  test();
      // });//loadScript函式還沒執行完，沒辦法識別tools.js裡面的test函式，所以採用回撥函式。
      loadScript('tools.js','test()');
   
  

4. js時間線

• 1）建立Document物件，開始解析web頁面。解析HTML元素和它們的文字內容後新增Element物件和文字節點到文件中。這個時候document.readystate = 'loading'.
• 2)遇到link 外部css,建立執行緒載入，並繼續解析文件。
• 3）遇到script外部js,並沒有defer或async等非同步屬性，瀏覽器載入，並阻塞，在js載入並執行完後繼續解析文件。
• 4）遇到外部js，並設定了defer或者async，瀏覽器建立新執行緒非同步載入，並繼續解析文件。對於async檔案載入完之後立即執行。（非同步載入禁用document.write，因為非同步載入的情況下會抹掉原來的文字節點和內容。onload事件之後的document.write也是一樣的）
• 5）遇到img等，先正常解析dom結構，然後非同步載入圖片資源，並繼續解析文件。
• 6）當文件解析完成後，documen.readystate = 'interative';
• 7)文件解析完後，所有設定有defer的指令碼會按順序執行，這裡與async不同，但也禁止使用document.write.
• 8)document物件觸發DOMContentLoaded事件，這意味著程式從同步指令碼執行階段轉到事件驅動階段。
• 9）當所有async的指令碼都載入並執行完，img等載入完成之後，document.readystate = 'complete',觸發load事件。
• 10）從此以非同步響應方式處理使用者輸入和網路事件等。