在 Chrome 中重新计算样式事件大约需要 2 秒

Question

我正在开发一个网络应用程序，该应用程序在 Google Chrome 中突然变得极其无响应。在任何其他浏览器中似乎都没有相同的问题（我用 Firefox 和 Safari 进行了测试）。例如，单击输入文本框时，单击和元素获得焦点之间需要 3 到 5 秒的时间。单击复选框时也会发生相同的行为。有几点需要注意：此页面有一个包含大约 150 个选项的下拉菜单，以及一个包含 10 行的表格。除此之外，并无其他异常。

我打开 Chrome 代码检查器并使用“时间轴”选项卡来查看发生了什么。事实证明，大部分延迟来自“重新计算样式”事件，大约需要 2 秒。该事件发生在 mousedown 事件之前。在网上简单搜索此步骤并没有透露太多信息。有谁知道这个特定的渲染步骤以及可以采取哪些措施来提高其性能？

Answer 1

结果发现页面上有一个我忽略的隐藏对话框，li里面有大约 2,000 个元素。我猜 Firefox 和 Safari 比 Chrome 更好地处理大量元素。