I'm working on a web application which has suddenly bee 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 es 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?

I'm working on a web application which has suddenly bee 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 es 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?

• javascript
• dom
• google-chrome
• renderer

• Changes to your CSS or JavaScript would be the most likely fixes. You should post those so we can detect what kind of work Chrome may be being asked to do. – Jacob Commented Dec 19, 2011 at 18:58
• Have you tried reducing the size of the select element, to 10 (or whatever) options to see if that's the culprit? Also: post your JavaScript function(s). – David Thomas Commented Dec 19, 2011 at 19:00
• Removing the select entirely doesn't seem to have any effect. There's a fair amount of Javascript code for this page (approximately 600 lines) so unfortunately there's no easy way for me to post it here. – Jordan Brown Commented Dec 19, 2011 at 19:06

1 Answer 1

Turns out that there was a hidden dialog on the page that I overlooked that had around 2,000 li elements inside of it. I guess Firefox and Safari handle huge numbers of elements better than Chrome.