MVC 2 - 我有一个使用大量HTML的控件。如何提高性能？

I am developing a product with users who up until now have been using Excel and they want my MVC application to be similar to that. They like the visual impact of seeing annual leave, so I have developed a scrollable table which looks like this; MVC 2 - 我有一个使用大量HTML的控件。如何提高性能？

我正在开发一个产品，用户到目前为止一直在使用Excel，他们希望我的MVC应用程序与此类似。他们喜欢看年假的视觉效果，所以我开发了一个可滚动的桌子，看起来像这样;

The table is going to be about 300 cells across, and I might have 15 people to display this information, so you can see this could get very large indeed. I mentioned to them before I built the control that there would be performance issues. But now they like the product and want it to load more quickly. I would not be surprised if the code I wrote could be refactored. No doubt it could be written better anyway, and maybe performance can be improved as well, so I will show you that. However I suspect the real problem is too much HTML. What are my other options? I am not yet familiar with Silverlight or HTML5, although I am happy to look into it if someone can provide me with some good links. My webpage has this markup;

该表将大约300个单元格，我可能有15个人来显示这些信息，所以你可以看到这可能会变得非常大。在我构建控件之前，我曾向他们提到会出现性能问题。但现在他们喜欢这个产品，并希望它能更快地加载。如果我编写的代码可以重构，我不会感到惊讶。毫无疑问，它可以写得更好，也许性能也可以提高，所以我会告诉你。但是我怀疑真正的问题是HTML太多了。我的其他选择是什么？我还不熟悉Silverlight或HTML5，虽然如果有人能为我提供一些好的链接，我很乐意调查它。我的网页有这个标记;

<% if (Model.cvm != null && Model.cvm.Lines != null && Model.cvm.Lines.Count > 0)
   { %> 
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <table cellpadding="0" cellspacing="0" id="TeamNames"><!-- Table to display names of team members -->
                        <tr>
                            <td style="height:65px"></td>
                        </tr>
                        <% foreach (SHP.Models.CalendarViewModel.CalendarLine cl in Model.cvm.Lines)
                        {%>
                            <tr>
                                <td align="right"><%: cl.Name%></td>
                            </tr>
                        <%} %>
                    </table>
                </td>
                <td>
                    <div id="pageWidthCalendar"><!-- Table to display a scrollable grid of the annual leave calendar -->
                    <table id="ScheduledLeaveCalendar">
                        <%: Html.DisplayFor(x => x.cvm.Header1)%>
                        <%: Html.DisplayFor(x => x.cvm.Header2)%>
                        <%: Html.DisplayFor(x => x.cvm.Header3)%>
                        <%: Html.DisplayFor(x => x.cvm.Lines)%>
                    </table>
                    </div><!-- pageWidthCalendar - puts scrollbars on the calendar control -->
                </td>
            </tr>
        </table>

My Calendar Lines Display Template has this markup;

我的日历行显示模板有此标记;

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SHP.Models.CalendarViewModel+CalendarLine>" %>
<%@ Import Namespace="SHP.WebUI.HtmlHelpers" %>
<%@ Import Namespace="SHP.Models" %>

<tr>
    <% foreach (var item in Model.HtmlCellCollection) { %>
            <%: Html.CalendarCellClass(item)%>
    <% } %>
</tr>

The other display templates are similar.

其他显示模板类似。

My CalendarCellClass helper method looks like;

我的CalendarCellClass辅助方法看起来像;

    public static MvcHtmlString CalendarCellClass(this HtmlHelper helper, CalendarViewModel.CalendarCell _cell)
    {
        TagBuilder td_Outer = new TagBuilder("td");
        if (_cell.MorningOnlyFlag == true || _cell.AfternoonOnlyFlag == true)
        {
            td_Outer.InnerHtml = GetHalfDayTable(_cell);
        }
        else
            td_Outer.MergeAttribute("class", _cell.HtmlCellClass);

        return MvcHtmlString.Create(td_Outer.ToString());
    }

2 个解决方案

#1

As others have noted, profiling would be useful.

正如其他人所说，分析将是有用的。

A request times graph as per Internet Explorers 'F12 developer tools' or Firebug, YSlow, PageSpeed or some such tool would be useful.

根据Internet Explorers的F12开发人员工具或Firebug，YSlow，PageSpeed或某些此类工具的请求时间图将非常有用。

Also Timings server side to actually create the view would help. It could also be a case of rendering on the client side thats the issue.

另外Timings服务器端实际创建视图会有所帮助。它也可能是在客户端呈现问题的情况。

Remember in internet applications Perception is often as important as 'true performance' in that regard, AJAX-ifying might improve their perception, by loading the rest of the page before the calendar itself. You may be able to speed up both download and server side by stransfering just JSON, and build the UI on the client using jquery. But that wont help if client rendering is where the major problem is.

记住在互联网应用程序中，在这方面，感知通常与“真实性能”同样重要，通过在日历本身之前加载页面的其余部分，AJAX-ifying可以改善他们的感知。您可以通过仅传输JSON来加速下载和服务器端，并使用jquery在客户端上构建UI。但是，如果客户端渲染是主要问题所在，那将无济于事。

#2

as Chris Chilvers said, what is the concrete problem? data access? or html generation? If the slow operation is data access or process in the controller and your data no change so much, you can try to use de [OutputCache] for example, if you want to cache the data result of the action in the controller, that return the view you want to display, set [OutputCache(Duration=10)] for caching by ten seconds the result.

正如Chris Chilvers所说，具体问题是什么？数据访问？还是html一代？如果缓慢操作是控制器中的数据访问或进程，并且您的数据没有太大变化，您可以尝试使用de [OutputCache]，例如，如果要在控制器中缓存操作的数据结果，则返回要显示的视图，将[OutputCache（Duration = 10）]设置为缓存10秒的结果。