Chromeでスタイルイベントを再計算するのに約2秒かかります

Question

私は突然Google Chromeで非常に反応しなくなったWebアプリケーションで作業しています。他のブラウザでも同じ問題はないようです（FirefoxとSafariでテストしました）。たとえば、入力テキストボックスをクリックすると、クリックと要素がフォーカスを取得するまでに3〜5秒かかります。チェックボックスをクリックしても同じ動作が発生します。いくつかの注意点：このページにはドロップダウンがあり、その中に約150のオプションがあり、10行のテーブルもあります。それ以外は珍しいことはありません。

Chromeのコードインスペクタを開き、「タイムライン」タブを使用して何が起こっていたかを確認しました。この遅延の大半は、「スタイルを再計算する」イベントから約2秒かかることがわかります。このイベントは、mousedownイベントの前に発生しました。このステップをオンラインで簡単に検索しても、それほど明らかにはなりませんでした。誰かがこの特定のレンダリングステップについて何か知っていますか、そのパフォーマンスを向上させるために何ができるでしょうか？

Answer 1

私が見落としたページには、内部に約2,000個のli個の要素がある隠されたダイアログがあることが分かります。私はFirefoxとSafariがChromeよりも遥かに多くの要素を処理すると思う。