CODEWITHSUNDEEP
htmlperformancehtml-tablerendering
bumbleshoot
bumbleshoot

Reputation: 1160

Switching between inputs is slow in a large HTML table

I have created a wholesale order form in the form of a large HTML table with lots of number inputs. I've noticed that switching between number inputs and typing values in the inputs are very slow in this table (ie. when I click in an input, it takes time for the cursor to show up; when I type in an input, it takes time for the character to show up). Is there any way for me to remove the lag without paginating the table rows?

You can view and play around with the table here (use guest password "braese").

A screenshot of a Chrome Dev Tools performance recording for clicking inside a single input (I'm not really sure what to make of this): Chrome Dev Tools performance recording

Upvotes: 3

Views: 1259

Answers (2)

bumbleshoot
bumbleshoot

Reputation: 1160

I did some more digging and testing, and it turns out the lag (update layer tree) when clicking/typing in inputs is only an issue in Chrome. This answer on another question points to issues with Chrome since version 46. It's a shame that such a popular browser has allowed an issue like this to go on for 2+ years. We will have to paginate our order form since Chrome is so popular with our client's customers.

Upvotes: 2

Vasil Gerginski
Vasil Gerginski

Reputation: 587

Wow my chrome almost crashed :) It is your styles You are causing layer creation every time you apply translate transform Check out the Layers menu in Chrome Dev tools; Test if it runs better - only table :)

Also order your styles and scripts! - first styles after that scripts

Cheers!

Upvotes: 0

Related Questions