我目前在 asp.net mvc 站点上使用 jqgrid,我们的网络(内部应用程序)非常慢,并且似乎需要很长时间才能加载网格(问题既在于网络,也在于解析,渲染)
我正在尝试确定如何最大限度地减少发送给客户端的内容,以使其尽可能快。
这是我的 Controller 将数据加载到网格中的操作的简化 View :
[AcceptVerbs(HttpVerbs.Get)]
public ActionResult GridData1(GridData args) {
var paginatedData = applications.GridPaginate(args.page ? ? 1, args.rows ? ? 10,
i => new {
i.Id,
Name = "<div class='showDescription' id= '" + i.id + "'>" + i.Name + "</div>",
MyValue = GetImageUrl(_map, i.value, "star"),
ExternalId = string.Format("<a href=\"{0}\" target=\"_blank\">{1}</a>",
Url.Action("Link", "Order", new {
id = i.id
}), i.Id),
i.Target,
i.Owner,
EndDate = i.EndDate,
Updated = "<div class='showView' aitId= '" + i.AitId + "'>" + GetImage(i.EndDateColumn, "star") + "</div>",
})
return Json(paginatedData);
}
所以我正在构建一个 json 数据(我有大约 200 条上述记录)并将其发送回 GUI 以放入 jqgrid。
我可以做的一件事是重复数据。在某些 json 字段中,我将 HTML 附加到原始“数据”之上。每条记录上的 HTML 都是相同的。如果我可以在客户端发送数据并在其周围“附加”HTML,那么似乎会更有效。这可能吗?然后我只需通过线路发送实际数据,并让客户端添加其余的 HTML 标签(div 等)放在一起。
另外,如果有任何其他关于如何最小化消息大小的建议,那就太好了。我想在某些时候这些解决方案会增加客户端负载,但减少网络流量可能是值得的。
最佳答案
我同意 Craig Stuntz 的观点:使用动态内容的 HTTP 压缩非常有效。但减少发送的数据也非常有用。
首先,您不应该将 HTML 数据发送回 jqGrid。 jqGrid 有自定义格式化程序(请参阅 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter 和 jqGrid: Editable column that always shows a select 中的一个小示例),可用于填充 jqGrid 单元格的 <TD>
元素。此外,如果你想修改网格数据,jqGrid数据内部的html数据非常糟糕。在这种情况下,应该修改 html 数据并将其发送回服务器。因此最好的方法是将纯数据从服务器发送到 jqGrid 并使用自定义格式化程序将数据格式化为 html 片段。
通常,您可以使用自定义格式化程序来“解码”或“解压缩”数据。例如,如果列中只有“Bla Bla Bla”和“Ha Ha Ha”等数据,则可以发送 0 代替“Bla Bla Bla”,发送 1 代替“Ha Ha Ha”。在该列的自定义格式化程序中,您将 0 和 1 转换回“Bla Bla Bla”和“Ha Ha Ha”字符串。如果您有一般重复数据,此方法将不起作用,但您可以使用下一个(jsonReader
)方法。
还有另一种数据压缩方式:将 jsonReader
作为函数使用(请参阅 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#jsonreader_as_function 和 jquery with ASP.NET MVC - calling ajax enabled web service )以及使用 jsonmap
(例如,请参阅 Mapping JSON data in JQGrid ),后者也可以用作函数。这种技术有点复杂,但是如果您在问题中添加当前发送的 JSON 数据的示例以及 jqGrid 定义的示例(尤其是 colModel
),我将编写一个示例如何使用 jsonReader
和 jsonmap
来压缩数据.
更新:在我看来,你的代码的一个地方非常可疑:
Name = "<div class='showDescription' id= '" + i.id+ "'>" + i.Name + "</div>",
jqGrid 将 id
属性添加到网格行( <tr>
元素),但您手动将相同的 id 添加到单元格内部的 <div>
元素( <td>
元素,它是 <tr>
元素的子元素)。这会给你带来很多问题。 HTML 不允许有双 id。
对应你的主要问题我可以写很多一般性建议,例如:
- 最好将 bool 值发送为
0
或1
,而不是"true"
和"false"
,以减少数据量。 - 如果网格中有 id 数据,您可以使用键列选项(请参阅 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options )在 JSON 数据中仅发送一次 id 值。
- 以最紧凑的形式 yy-m-d 传输日期值,并将其转换为您希望在客户端使用日期格式化程序的文本形式。
- 等等
但您可能希望首先解决特定应用程序中的主要性能问题。为了能够改进您的特定应用程序,您应该在问题中发布有关您的解决方案的更多信息:
- jqGrid 定义包含完整的 colModel 定义(与 long delay between serverside JSON and jqGrid loadComplete on asp.net mvc site 不同)
- 来自
paginatedDat
的数据转储,您将其作为Json(paginatedData)
或更好的 JSON 数据返回发送到客户端(例如,您可以从 Fiddler http://www.fiddler2.com/fiddler2/ 复制数据) - 您使用的jqGrid、jQuery和jQuery UI的版本信息
- 有关您的数据模型和数据库的更多信息也会有所帮助
如果没有此类信息,您可能会花掉您的赏金,而不会为您带来真正的好处。
更新2:您可以在Jqgrid 3.7 does not show rows in internet explorer中找到优化JSON数据的实际示例
关于asp.net-mvc - 在 asp.net-mvc 站点上优化 json 的最佳方法是什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2999955/