I’m working on a web application which has suddenly become extremely unresponsive in Google Chrome. There doesn’t seem to be the same issue in any other browser (I tested with Firefox and Safari). For example, when clicking on an input textbox, it takes between 3 and 5 seconds between clicking and the element gaining focus. The same behavior also occurs when clicking a checkbox. A couple things to note: this page has a drop-down with around 150 options in it, as well as a table with 10 rows. Other than that, nothing else unusual.
I opened up the Chrome code inspector and used the “Timeline” tab to see what was going on. Turns out that the bulk of the delay comes from “Recalculate style” event taking around 2 seconds. This event occurred prior to the mousedown event. A brief search for this step online didn’t reveal much. Does anybody know anything about this specific render step and what can be done to improve its performance?
Turns out that there was a hidden dialog on the page that I overlooked that had around 2,000
lielements inside of it. I guess Firefox and Safari handle huge numbers of elements better than Chrome.