Asp.net mvc 3 jquery Ajax优化技巧-MVC

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

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

程序如下：

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

我只是想知道是否有更好的方法来布置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);
}

publicjsonresult GetMapDetails（）
{
List vm=新列表（）；
//在此处创建viewmodel
返回Json（vm.ToArray（），JsonRequestBehavior.AllowGet）；
}
公共操作结果GetMapItems（列表）
{
返回PartialView（“_-MapItemsPartial”，列表）；
}
公共PartialViewResult GetAreaPoints（列表）
{
返回局部视图（“区域点局部”，列表）；
}

如果有人能提供一些优化建议，那就太好了，谢谢你的研究。这样，您就可以从

GetMapDetails

返回两个HTML字符串，并且可以在一个AJAX调用而不是三个AJAX调用中获得相同的结果

---

If还可以使您不必来回序列化viewmodel，因此可能会获得一些性能提升。

还可以尝试将$.ajaxcache选项设置为true，以改进进一步的调用

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

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

从jQuery Api：

---

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

因为我认为您的目标是只在需要时加载部分视图，所以将它们全部放在一个标记字符串中是行不通的

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

只有当您将相同的数据检索到相同的页面时，缓存才会有帮助——这对您的情况也没有帮助

在我看来，您应该向用户加载初始视图，并立即开始对可能很快需要的视图进行后台预加载。只要将它们作为一个不可分割的元素放在DOM中，一旦被请求，它们就会立即被加载。当然，您只预加载最有可能很快需要的内容

另一种可能更有效的方法是在客户机上使用MVVM框架，如KnockoutJS。在简单的html标记中定义视图，而不需要服务器实际使用模型呈现局部视图。这将使html传输更快。来自客户机的单独REST调用将只从服务器检索JSON格式的模型数据，并且您将对视图应用数据绑定（之前加载的轻量级html）。通过这种方式，繁重的渲染负担将由客户端承担，服务器将能够在长期内为更多客户端提供服务+您最有可能获得性能增益。

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

---

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

谢谢您的帮助-我会去调查KnockoutJS，看看这是否有帮助。但是JMVA，并非所有时候都建议将缓存选项设置为true。设置此标志时，它不会从服务器获取数据。因此，在后端更新的数据将与您向用户显示的数据不同步。我觉得这可能是一个严重的问题。如果我错了，请纠正我。谢谢JMVA。但是，即使在后端进行了一些更改之后，我也面临着向用户显示未更新信息的问题。我所做的错误是我没有显式地将缓存设置为false。一切都是关于我们所面临的情况。