Switching between inputs is slow in a large HTML table

user_1032766 0
Viewed 931

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

rendering html-table html performance
2 Answers

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.

user_10327660

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!

user_48189460
Related