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

Question

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

​

表格将有大约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>

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

<%@ 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>

其他显示模板类似。

我的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());
    }

Answer 1

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

根据Internet Explorers 'F12 developer tools‘或Firebug、YSlow、PageSpeed或其他类似工具制作的请求时间图将非常有用。

另外，对服务器端进行定时以实际创建视图也会有所帮助。这也可能是客户端渲染的情况，这就是问题所在。

请记住，在互联网应用程序中，感知通常与“真实性能”一样重要，在这方面，AJAX化可能会通过在日历本身之前加载页面的其余部分来改善他们的感知。您可以通过只传输JSON来提高下载和服务器端的速度，并使用jquery在客户端构建UI。但是，如果客户端渲染是主要问题所在，那么这将不会有帮助。

Answer 2

正如Chris Chilvers所说，具体的问题是什么？数据访问？或者html生成？如果较慢的操作是在控制器中访问或处理数据，而您的数据没有那么多更改，您可以尝试使用de OutputCache。例如，如果您想在控制器中缓存操作的数据结果，这将返回您想要显示的视图，设置用于缓存的OutputCache(Duration=10)为10秒的结果。

示例：

​

​

你可以在scottgu博客上阅读更多，网址是http://weblogs.asp.net/scottgu/archive/2008/07/14/asp-net-mvc-preview-4-release-part-1.aspx