1

我有这个 HTML 页面，它通过带有多个 ajax 调用的 javascript 填充。我有这本字典，其中填充了一些通过 ajax 调用抓取的 JSON 文本，如本例所示：（实际代码超过 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'}
                }
        }
}

该字典用于使用以下功能填充页面：

function fillImageDiv(img)
{
    $('div#image_container > img').attr('src',img.high_res)
}

function fillUserDiv(user)
{
    $('div#user_container > span').html(user.email);
    $('div#user_container > img').attr('src', user.image.low_res);
}

fillImageDiv(dict.image);
fillUserDiv(dict.user);

考虑到这一点，填充页面的最佳方式是什么？

填充整个字典然后填充 div 会更好，还是在将 JSON 加载到字典后立即填充每个 div？

即使javascript中没有多线程，使ajax调用异步也会使dict填充更快？

调用fillImageDiv和fillUserDiv异步呢？

谢谢！

4

1 回答 1

0

在性能方面，最好只进行一次 AJAX 调用来填满您的字典，然后<div>一次性填写所有元素。那些同步的 AJAX 调用会比其他任何事情都更会损害您网站的响应能力。

如果您不能组合 AJAX 调用，并且您的站点不会因为没有将每个单独的组件（图像和用户）放在一起而影响其界面，那么让它们分别异步更新肯定会更好。

如果您确实需要将两者结合在一起，那么您可以使用诸如caolan 的 async.js 之类的异步控制流库来更优雅地管理您的并行 AJAX 调用，然后在结果可用后一次性更新 DOM 元素。

通常，当您谈论 Web 和 JavaScript 性能时，请按顺序执行以下操作：

  1. 最小化 HTTP 请求
  2. 使您的 AJAX 结果可缓存
  3. 最小化对 DOM 的访问

HTTP 请求通常会成为瓶颈，然后是 DOM 操作。

于 2013-04-14T07:17:10.360 回答