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 ge

Solution 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.

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

Solution 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.

Solution 3:

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.