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>

How big is the overhead in the markup for each asset? Chrome should handle 1000 checkboxes fine, but if each checkbox is nested in a 4 level deep table madness, then the markup is probably getting pretty huge, pretty fast. You might also want to page the list of assets. What if there are going to be 5000 assets at some point? Having everything on one page does not scale very well. — HaukurHaf, Oct 08 '14 at 10:31
please share your code (rendered html and / or razor) for how the checkboxes are created or rendered — Pete, Oct 08 '14 at 10:32
Also looking for a solution to this. I have 700+ checkboxes in a list (not my requirement, a client), and its loading in c. 1.3 minutes - painful. On Firefox, no problem at all though? Did anyone find a solution to this on desktop? — Mike Upjohn, Jan 11 '16 at 16:34

Nitin · Answer 1 · 2017-11-25T19:41:39.213

3

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>

edited Nov 25 '17 at 19:41

answered Oct 27 '17 at 19:37

Nitin

898
1
9
25

score 1 · Answer 2 · edited May 23 '17 at 12:13

1

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.

edited May 23 '17 at 12:13

Community

1
1

answered Aug 28 '15 at 00:18

Alexandre Avrane

141
1
8

score 0 · Answer 3 · answered Oct 08 '14 at 17:32

Looks like Chrome not uses closing tags for checkboxes dropdown markup for and <br> that is somehow forces additional browser internal checks and as result slow page rendering in comparison to IE and FF browsers(that are using closing tags). To avoid Chrome slow loading because of <br /> tags you may use opening and closing <div> instead and speed up page a bit, but I'm not sure whether <input> elements may be replaced somehow.

Chrome is slow when there are a lot of inputs

3 Answers3

Linked