通過javascript和ajax填充HTML頁面時的最佳策略

Question

我有這個HTML頁面是通過JavaScript與多個ajax調用填充的。我有這個字典中充滿了一些JSON文本通過Ajax調用抓住就像這個例子：（實際的代碼是在1K線）

var dict = {} 
$.ajax({async: false, type: 'GET', url: '/page/1', success: function(data) 
{ 
    dict = JSON.parse(data); 
    // {'name': 'foo', 'image': '42', 'user': 'bar_user'} 

    $.ajax({async: false, type: 'GET', url: '/image/'+dict.image, 
     success: function(data) 
     { 
      dict.image = JSON.parse(data); 
      // {'low_res': 'l.jpg', 'high_res': 'h.jpg'} 
     } 

    $.ajax({async: false, type: 'GET', url: '/user/'+dict.user, 
     success: function(data) 
     { 
      dict.user = JSON.parse(data); 
      // {'email': 'bar@bar.com', 'image': '69'} 

      $.ajax({async: false, type: 'GET', url: '/image/'+dict.user.image, 
       success: function(data) 
       { 
        dict.user.image = JSON.parse(data); 
        // {'low_res': 'l_2.jpg', 'high_res': 'h_2.jpg'} 
       } 
     } 
} 

這本詞典是用來使用像這樣一些功能，以填充頁面：

考慮到這一點，填充頁面的最佳方式是什麼？

填充整個字典然後填充div或者在JSON加載到字典中時填充每個div會更好嗎？

使ajax調用異步會使dict填充更快，即使在javascript中沒有多線程時？

異步調用fillImageDiv和fillUserDiv怎麼辦？

謝謝！

Answer 1

在性能方面，如果您只需撥打一次AJAX電話來填寫您的字典，然後一次性填寫您的<div>元素，那將是最好的。那些同步的AJAX調用將會最大限度地損害網站的響應能力。

如果你不能合併AJAX調用，並且你的網站不會因爲沒有將每個單獨的組件（圖像和用戶）放在一起而受到其影響，那麼最好讓它們單獨更新異步。

如果您確實需要將它們結合在一起，那麼您可以使用異步控制流庫（例如caolan's async.js）更優雅地管理並行AJAX調用，然後一旦結果可用就更新DOM元素。

在一般情況下，當你在談論的Web和JavaScript性能，做以下事情依次是：

1. 儘量減少HTTP請求
2. 讓你的AJAX結果可緩存
3. 儘量減少訪問DOM

HTTP請求通常會成爲瓶頸，並在此之後進行DOM操作。