0

我目前正在尝试将控制器操作转换为 Ajax 请求，以便让页面分段加载，而不是一次全部加载。在我开始进行更改之前，页面加载大约需要 8 秒（它必须处理大量信息）。

由于我已将其更改为通过 ajax 加载部分视图，因此该页面现在需要大约 35 秒来加载相同的信息。

过程如下：

  • 初始请求处理，然后以 json 形式返回视图模型（通用列表）
  • 然后我使用返回的数据创建两个局部视图

我只是想知道是否有更好的方法来布置 jquery 以使其更快地工作。我知道传递的数据量可能是一个因素 - 虽然我无法在调试器中找到对象的确切大小，但当我将 json 转储到文本文件时，它大约为 70kb。

jQuery

$.ajax({
    type: 'GET',
    dataType: "json",
    url: '@Url.Action("GetMapDetails")',
    success: function (data) {
        $.ajax({
            type: 'POST',
            contentType: 'application/json',
            url: '@Url.Action("GetMapItems")',
            data: JSON.stringify({
                list: data
            }),
            success: function (result) {
                $("#mapContainer").html(result);
            }
        });
        $.ajax({
            type: 'POST',
            contentType: 'application/json',
            url: '@Url.Action("GetAreaPoints")',
            data: JSON.stringify({
                list: data
            }),
            success: function (result) {
                $("#areaPointsContainer").html(result);
            }
        });
    }
});

控制器

public JsonResult GetMapDetails()
{
    List<ViewModel> vm = new List<ViewModel>();

    //create viewmodel here 

    return Json(vm.ToArray(), JsonRequestBehavior.AllowGet);
}
public ActionResult GetMapItems(List<ViewModel> list)
{
    return PartialView("_MapItemsPartial", list);
}

public PartialViewResult GetAreaPoints(List<ViewModel> list)
{
    return PartialView("_AreaPointsPartial", list);
}

如果有人可以提供一些优化建议，那将非常感谢

4

4 回答 4

0

由于我认为您的目标是仅在需要时才能够加载部分视图，因此将它们全部放在一个标记字符串中是行不通的。

您遇到的性能问题可能是由于 ajax 调用确实比从服务器加载结果流更昂贵。

只有当您将相同的数据检索到同一页面时，缓存才会有所帮助 - 也不是您的情况。

在我看来，您应该将初始视图加载给用户，并立即开始后台预加载您可能很快需要的视图。只需将它们作为不可分割的元素放置到 DOM 上，所以一请求，它们就会立即被加载。当然，您只预加载您最有可能很快需要的那些。

其他可能更有效的方法是在客户端上使用 MVVM 框架，例如 KnockoutJS。在一个简单的 html 标记中定义你的视图，而不需要服务器用模型来渲染局部视图。这将允许 html 更快地传输。来自客户端的单独 REST 调用将仅从服务器以 JSON 格式检索模型数据，并且您将对视图应用数据绑定（您之前加载的轻量级 html）。这样，重度渲染的负担将落在客户端上，从长远来看，服务器将能够为更多的客户端提供服务+您最有可能获得性能提升。

于 2012-08-22T09:33:06.447 回答
0

安装Stackexchange Miniprofiler并将其连接到您的数据库请求中，这将帮助您找到占用最多时间的位。我怀疑这很可能是您在服务器上的数据和处理（取决于您编写控制器的方式，您可能会在 AJAX 版本中达到 4 次数据加载+处理，从而导致 4 次页面加载）。

如果这是真的，那么问题不会通过 AJAX 处理您的页面来解决，而是在服务器上缓存已处理的数据（为了使其保持最新，您的选择是较短的缓存持续时间或让更新数据的过程删除缓存，正确答案取决于您的数据是什么）。

于 2012-08-22T10:01:58.097 回答
0

您可以考虑将部分视图呈现为字符串。这样，您可以从 中返回两个 HTML 字符串GetMapDetails，并且您可以在一次 AJAX 调用而不是三个调用中获得相同的结果。

如果还可以消除您来回序列化视图模型的需要，那么那里可能会有一些性能提升。

于 2012-08-22T09:21:45.450 回答
0

还尝试使用 $.ajax缓存选项为 true 以改进进一步调用jQuery ajax 方法

我假设信息不会快速变化，那么它会提高性能。

例如，我使用统计页面异步加载 7-8 个图，缓存为我节省了大量时间。

来自 jQuery API：

来自 jQuery Api。

另一方面，如果发布的数据内容变化很快，则不建议对其进行缓存，但也要考虑到每个浏览器都会将该请求缓存在自己的缓存中。为了避免浏览器缓存在每个请求上使用时间戳作为查询字符串，就像 $.ajax 自动执行的那样。

于 2012-08-22T09:23:33.713 回答