在 asp.net-mvc 站点上优化我的 json 的最佳方法是什么 [英] what is the best way to optimize my json on an asp.net-mvc site

问题描述

我目前在一个 asp.net mvc 站点上使用 jqgrid，我们的网络非常慢(内部应用程序)，并且似乎需要很长时间才能加载网格(问题既是网络问题，也是解析问题，渲染)

我正在尝试确定如何最小化我发送给客户端的内容以使其尽可能快.

这是我将数据加载到网格中的控制器操作的简化视图:

[AcceptVerbs(HttpVerbs.Get)]公共 ActionResult GridData1(GridData args) {var paginatedData = applications.GridPaginate(args.page ? ? 1, args.rows ? ? 10,我=>新的 {身份证，Name = "
"+ i.Name + "</div>",MyValue = GetImageUrl(_map, i.value, "star"),ExternalId = string.Format("<a href="{0}" target="_blank">{1}</a>",Url.Action("链接", "订单", new {id = i.id}), i.Id),i. 目标，i. 所有者，结束日期 = i.结束日期，更新 = "

所以我正在构建一个 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:始终显示选择的可编辑列)，可用于填充 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 与 ASP.NET MVC - 调用启用 ajax 的 Web 服务)和 jsonmap 的使用(参见 在 JQGrid 中映射 JSON 数据 例如)，它也可以用作函数.这种技术有点复杂，但是如果您在问题中添加您当前发送的 JSON 数据示例和 jqGrid 定义示例(尤其是 colModel)，我将编写一个示例，您可以如何使用jsonReader 和 jsonmap 来压缩你的数据.

已更新:您的代码的一个地方在我看来非常可疑:

Name = "<div class='showDescription' id= '" + i.id+ "'>"+ i.Name + "</div>",

jqGrid 将 id 属性添加到网格行(<tr> 元素)，但是您手动将相同的 id 添加到 <div><单元格内的/code> 元素(<td> 元素，它是 <tr> 元素的子元素).这会给你带来很多问题.不允许有双 id 的 HTML.

对应您的主要问题，我可以写很多一般性建议，例如:

• 最好将布尔值发送为 0 或 1 而不是 "true" 和 "false"减少数据.
• 如果您的网格中有 id 数据，您可以使用键列选项(请参阅 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options) 在您的 JSON 数据中只发送一次 id 值.
• 以最紧凑的格式 yy-m-d 传输日期值，并将其转换为您希望在客户端使用日期格式化程序的文本格式.
• 等等

但您可能希望首先解决特定应用程序中的主要性能问题.为了能够改进您的特定应用程序，您应该在问题中发布有关您的解决方案的更多信息:

• jqGrid 定义包括完整的 colModel 定义(不像 asp.net mvc 站点上服务器端 JSON 和 jqGrid loadComplete 之间的长时间延迟)
• 来自 paginatedData 的数据转储，您将其作为 Json(paginatedData) 返回或更好地将您的 JSON 数据发送到客户端(您可以从 Fiddler 复制数据 http://www.fiddler2.com/fiddler2/ 例如)
• 您使用的 jqGrid、jQuery 和 jQuery UI 的版本信息
• 有关您的数据模型和数据库的更多信息也很有帮助

如果没有此类信息，您可能会花掉您的赏金，而不会为您带来真正的好处.

更新 2:您可以在 Jqgrid 3.7 在 Internet Explorer 中不显示行

i am currently using jqgrid on an asp.net mvc site and we have a pretty slow network (internal application) and it seems to be taking the grid a long time to load (the issue is both network as well as parsing, rendering)

I am trying to determine how to minimized what i send over to the client to make it as fast as possible.

Here is a simplified view of my controller action to load data into the grid:

[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);
}

So i am building up a json data (i have about 200 records of the above) and sending it back to the GUI to put in the jqgrid.

The one thing i can thihk of is Repeated data. In some of the json fields i am appending HTML on top of the raw "data". This is the same HTML on every record. It seems like it would be more efficient if i could just send the data and "append" the HTML around it on the client side. Is this possible? Then i would just be sending the actual data over the wire and have the client side add on the rest of the HTML tags (the divs, etc) be put together.

Also, if there are any other suggestions on how i can minimize the size of my messages, that would be great. I guess at some point these solution will increase the client side load but it may be worth it to cut down on network traffic.

解决方案

I agree with Craig Stuntz: usage of HTTP Compression of Dynamic Content can be very effective. But very useful can be also reducing of data which are sent.

First of all you should no time send HTML data back to jqGrid. jqGrid has custom formatter (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter and a small example from jqGrid: Editable column that always shows a select) which can be used to fill <TD> elements of jqGrid cells. Moreover html data inside of jqGrid data are very bad if you want to modify grid data. In this case the html data should be modified and send back to the server. So the best way is sending pure data from the server to jqGrid and use custom formatter to format data as a html fragment.

In general you can use custom formatter to "decode" or "decompress" the data. For example, if you have in a column only data like "Bla Bla Bla" and "Ha Ha Ha", you can send 0 instead of "Bla Bla Bla" and 1 instead of "Ha Ha Ha". Inside of the custom formatter for the column you convert 0 and 1 back to the "Bla Bla Bla" and "Ha Ha Ha" strings. If you have general repeated data this approach will not work, but you can use the next (jsonReader) way instead.

There are one more way of data compression: usage of jsonReader as a function (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#jsonreader_as_function and jquery with ASP.NET MVC - calling ajax enabled web service) and usage of jsonmap (see Mapping JSON data in JQGrid for example), which can be also used as a function. This technique is a little more complex, but if you add in your question an example of JSON data which you send currently and the example of jqGrid definition (especially colModel) I will write an example how you can use jsonReader and jsonmap to compress your data.

UPDATED: One place of your code seems to me very suspected:

Name = "<div class='showDescription' id= '" + i.id+ "'>" + i.Name + "</div>",

jqGrid add id attribute to the grid row (<tr> element), but you added manual the same id to the <div> element inside of cell (<td> element, which is child of the <tr> element). This can makes you much problems. A HTML not allowed to have a double ids.

Corresponds your main question I can write a lot of general recommendations like:

• it is better to send boolean as 0 or 1 instead of "true" and "false" to reduce the data.
• if you have id data inside your grid you can use key column option (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options) to send id value only one time inside your JSON data.
• transfer date values in the most compact form yy-m-d and convert it in the text form which you want on the client side with respect of date-formatter.
• and so on

but probably you want first of all to solve your main performance problem in your specific application. To be able to improve your specific application application you should post in your question more information about your solution:

• jqGrid definition inclusive the full colModel definition (not like in long delay between serverside JSON and jqGrid loadComplete on asp.net mvc site)
• a dump of data from paginatedData which you return as Json(paginatedData) or better your JSON data send to the client (you can copy the data from Fiddler http://www.fiddler2.com/fiddler2/ for example)
• version information of jqGrid, jQuery and jQuery UI which you use
• more information about your data model and database can be also helpful

Without this kind of information you can spend your bounty without real benefit for you.

UPDATED 2: A practical example of optimization of JSON data you can find in Jqgrid 3.7 does not show rows in internet explorer

这篇关于在 asp.net-mvc 站点上优化我的 json 的最佳方法是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！