4

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?

Jordan Brown
  • 13,603
  • 6
  • 30
  • 29
  • 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 Dec 19 '11 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 Dec 19 '11 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 Dec 19 '11 at 19:06

1 Answers1

6

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.

Jordan Brown
  • 13,603
  • 6
  • 30
  • 29