html - 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 Explorer 的“F12 开发人员工具”或 Firebug、YSlow、PageSpeed 或某些此类工具绘制的请求时间图表将会很有用。

服务器端实际创建 View 的时间也会有所帮助。也可能是客户端渲染的问题，这就是问题所在。

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