CODEWITHSUNDEEP
htmlperformancegoogle-chrome
Renat Khabibulin
Renat Khabibulin

Reputation: 193

Chrome is slow when there are a lot of inputs

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>

Upvotes: 5

Views: 4628

Answers (3)

Nitin
Nitin

Reputation: 916

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>

Upvotes: 3

Alexandre Avrane
Alexandre Avrane

Reputation: 147

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.

Upvotes: 1

Volodymyr
Volodymyr

Reputation: 1255

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.

Upvotes: 0

Related Questions