jQuery的Ajax优化技巧 - MVC

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

由于我已将其更改为通过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); 
}

如果任何人都可以提供一些优化建议，那将是巨大的感谢

来源

2012-08-22 e-on

你可以看看rendering partial views into strings。这样，您可以从GetMapDetails返回两个HTML字符串，并且您可以在一次AJAX调用中获得相同的结果，而不是三次。

如果还可以避免需要来回串行化视图模型，那么可能会有一些性能上的提升。

来源

2012-08-22 09:21:45

还尝试使用$就缓存选项设置为true，以进一步改善通话jQuery ajax method

我认为信息来源不改变快那么这将提高性能。

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

从jQuery的API：

From jQuery Api.

在另一方面，如果发布的数据内容的变化之快，不建议缓存，但也考虑到EVERY浏览器缓存在它自己的这一请求缓存。为避免浏览器缓存在每个请求上使用时间戳作为查询字符串，就像$ .ajax自动执行一样。

来源

2012-08-22 09:23:33 jmventar

但是，JMVA并不是所有的时间都将Cache选项设置为true。当你设置这个标志时，它不会从你的服务器获取数据。因此，后端中更新的数据将不会与您向用户显示的内容同步。我觉得这可能是一个严重的问题。纠正我，如果我错了。 – Dhanasekar

我编辑我的答案@Dhanasekar – jmventar

谢谢JMVA。 BUt即使在后端进行了一些更改之后，我仍然面临着向用户显示未更新信息的问题。我做的错误是我没有明确地将缓存设置为false。所有这些都是关于我们面临的情况 – Dhanasekar

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

您遇到的性能问题可能是由于以下事实：ajax调用确实性能更高，然后从服务器加载结果流。

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

从我看来，你应该加载初始视图给用户，并立即开始后台预加载您可能很快将需要的视图。只需将它们作为不可分割的元素放置到DOM上，如此请求，它们将立即加载。当然，你只需预先加载那些你很可能很快需要的东西。

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

来源

2012-08-22 09:33:06

感谢你 - 我会去调查KnockoutJS，看看是否有帮助 –

安装Stackexchange Miniprofiler并将其挂载到数据库请求中，这将帮助您找到哪个位花费最多时间。我怀疑这可能是你的数据和服务器上的处理（取决于你如何编写控制器，你可能会在AJAX版本中执行4次数据加载+处理，导致4次页面加载）。

如果这是真的，那么问题不会通过对您的页面进行AJAX处理来解决，而是将处理的数据缓存到服务器上（为了保持最新，您的选择只需要很短的缓存时间，或者让程序更新数据删除缓存，正确的答案取决于你的数据是什么）。

来源

2012-08-22 10:01:58 Chao

jQuery的Ajax优化技巧 - MVC

回答

相关问题