1

tl;dr VS2012 でデバッグ モードで実行しているときに、多数のレコードとレコードごとに 4 つのレンダリングされたリンクを含むビューを MVC で表示すると、読み込みに時間がかかります。

ASP.NET MVC4 Web アプリケーションがあり、ビューの 1 つに 300 レコードのテーブルが表示されます。VS2012 でアプリケーションをデバッグ モードで実行すると、このビューを読み込むのに 2 分近くかかります。テーブルには、HTML.ActionLink または URL.Action によって生成される 4 つの一意のリンクがあります。テストから、これらのリンクの生成が問題のあるコードであることがわかっています。

遅いコードの例:

<table>
<thead>
    <tr>
        <th></th>
        <th></th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model) {
    <tr>
        <td>Bob</td>
        <td>
    Tony
            <div style="margin-top: 5px;">
                <a href="@Url.Action("Edit", "Home", new { id = item.Id })" class="btn btn-mini" title="Edit"><i class="icon-edit"></i></a>
                <a href="@Url.Action("Details", "Home", new { id = item.Id })" class="btn btn-mini" title="Details"><i class="icon-file"></i></a>
                <a href="@Url.Action("Delete", "Home", new { id = item.Id })" class="btn btn-mini" title="Delete"><i class="icon-trash"></i></a>
            </div>
            <div style="margin-top: 5px;">
                @Html.ActionLink("Do Something", "SomeAction", "SomeController", new { id = item.Id }, new { @class = "btn btn-success btn-mini", data_pe_type = "auto" })
            </div>
        </td>
    </tr>
    }
</tbody>

コードを変更してリンクの基本部分を foreach の外側に作成すると、読み込み時間が 15 秒に短縮されます。

より高速なコードの例:

<table>
<thead>
    <tr>
        <th></th>
        <th></th>
    </tr>
</thead>
<tbody>
    @{
        var editLink = Url.Action("Edit", "Home") + "/";
        var detailsLink = Url.Action("Details", "Home") + "/";
        var deleteLink = Url.Action("Delete", "Home") + "/";
        var saLink = Url.Action("SomeAction", "SomeController") + "/";
    }
    @foreach (var item in Model) {
    <tr>
        <td>Bob</td>
        <td>
    Tony
            <div style="margin-top: 5px;">
                <a href="@editLink@item.Id" class="btn btn-mini" title="Edit"><i class="icon-edit"></i></a>
                <a href="@detailsLink@item.Id" class="btn btn-mini" title="Details"><i class="icon-file"></i></a>
                <a href="@deleteLink@item.Id" class="btn btn-mini" title="Delete"><i class="icon-trash"></i></a>
            </div>
            <div style="margin-top: 5px;">
                <a href="@saLink@item.Id" class="btn btn-success btn-mini" data-pe-type="auto">Do Something</a>
            </div>
        </td>
    </tr>
    }
</tbody>

IIS Express を使用しており、これを Windows 7 の IE10 と Chrome 27 の両方でテストしました。Chrome では IPv6 を無効にしています。これは、デバッグ中にのみ発生します。また、同僚に自分のマシンで同じコードをテストしてもらい、同じ問題に遭遇しました。

ベース リンクの生成を foreach の外に移動することでパフォーマンスの問題を解決しましたが、デバッグによって元のコードのレンダリングが非常に遅くなった理由を知りたいと思います。

4

1 に答える 1