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

标签 javascript dom google-chrome renderer

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

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

最佳答案

事实证明,页面上有一个我忽略的隐藏对话框,里面有大约 2,000 个 li 元素。我猜 Firefox 和 Safari 处理大量元素的能力要比 Chrome 好。

关于javascript - 在 Chrome 中重新计算样式事件大约需要 2 秒,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8566026/

相关文章:

javascript - 开放(聚焦) "select"元素中非常奇怪的 Chrome 行为

javascript - Express - socket.io - session 。将用户 ID 称为套接字 ID

javascript - Vue.js Avoriaz 单元测试在使用 vue-i18n 时产生翻译警告

javascript - 无法为自定义字段 Dynamics 365 设置值

javascript - 无法在 OS X 的 Safari 中聚焦零尺寸输入

javascript - script 标签仅在插入 DOM 后第一次运行

javascript - 如何使椭圆垂直对齐?

javascript - 在javascript中保存文件

javascript - HTML 表单元素属性和属性冲突时的优先级

javascript - 如何使用 JavaScript 追加插入带有样式属性的选项值?