Chrome is slow when there are a lot of inputs

Question

In our MVC5 project there is a page where user can check multiple assets. Each asset is represeneted by checkbox and name.

When there are a lot of assets (about 800-1000) Chrome getting extremely slow. It's even sometimes show message that "page is unresponsible".

It looks like this: - page is partially rendered and stucked on DIV with checkboxes - then there is delay 30-40-50 sec. Sometimes error message - DIV with checkboxes rendered and rest of the page rendered too

In FF and IE it's ok.

Thanks in advance

I agree that it's not a good user experience, but at the current stage I need to solve this problem. Here is markup (this div is 4 level nested):

<div class="list">
        @for (int i = 0; i < Model.Items.Count; i++)
        {
            <text>
                @{var cid = Guid.NewGuid().ToString();}
                @Html.HiddenFor(m => Model.Items[i].Id)
                @Html.CheckBoxFor(m => Model.Items[i].Selected, new { id = cid })
                <label for="@cid">@Trakopolis.WebSite.AppHelper.GetLocalizedString(Model.Items[i].Name)</label><br />
            </text>
        }
    </div>

Answer 1

You could try to use javascript for this where everything is in plain text with data attributes and on click, input element is temporarily added, the input element takes the input, sends it to the server (or saves it in indexeddb for async using a service worker) and removes itself or waits for next input.

<td id=“unique-id1” data-url=“/action” data-name=“InputName”>data</td>

Answer 2

Same problem with Safari, I suspect a webkit bug. Any page with hundreds or thousands of input fields will be very very slow to navigate or edit.

See Why does Safari Mobile have trouble handling many input fields on iOS 8

We have a page with some tables with 300 rows, each row has several cells and each cell is editable (input).

Workaround given in link above works nicely.