通过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操作。