Recalculate a style event in Chrome takes approximately 2 seconds

Question

I am working on a web application that suddenly became extremely out of date in Google Chrome. In any other browser (I have not tested Firefox and Safari), it does not seem to have the same problem. For example, when you click on a text input field between a click and an element that receives focus, it takes from 3 to 5 seconds. The same behavior is observed when the box is checked. There are a couple of things to note: this page has a drop-down list with approximately 150 options, as well as a table with 10 rows. Other than that, nothing out of the ordinary.

I opened the Chrome Code Inspector and used the Timeline tab to find out what was going on. It turns out that the main part of the delay comes from the "Recalculate Style" event, which takes about 2 seconds. This event occurred before the mousedown event. A brief search of this step on the Internet did not reveal much. Does anyone know anything about this particular rendering stage and what can be done to increase its performance?

Answer 1

It turns out that the page had a hidden dialog box that I overlooked, which had about 2000 li elements inside it. I think Firefox and Safari handle a huge amount of elements better than Chrome.