【问题标题】:Recalculate style event in Chrome taking approximately 2 seconds在 Chrome 中重新计算样式事件大约需要 2 秒
【发布时间】:2012-01-23 20:39:00
【问题描述】:

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

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

【问题讨论】:

  • 更改 CSS 或 JavaScript 将是最有可能的修复。您应该发布这些内容,以便我们检测 Chrome 可能被要求执行的工作类型。
  • 您是否尝试过将 select 元素的大小减小到 10(或其他)options,看看这是否是罪魁祸首?另外:发布您的 JavaScript 函数。
  • 完全删除select 似乎没有任何效果。这个页面有相当多的 Javascript 代码(大约 600 行),所以很遗憾我没有简单的方法在这里发布。

标签: javascript dom google-chrome renderer


【解决方案1】:

原来我忽略的页面上有一个隐藏对话框,其中包含大约 2,000 个 li 元素。我猜 Firefox 和 Safari 在处理大量元素方面比 Chrome 更好。

【讨论】:

    猜你喜欢
    • 2014-02-18
    • 2016-04-14
    • 2022-10-16
    • 2017-01-22
    • 2021-05-16
    • 1970-01-01
    • 1970-01-01
    • 2017-02-08
    • 2021-01-31
    相关资源
    最近更新 更多