我正在对大型 web 应用程序中的性能回归进行故障排除。我最近做了一些更改以删除 IFRAME 并将内容直接放入原始 DOM 中,以提高性能。确实,初始加载时间更好,但我发现了一个奇怪的问题。

移除 iframe 后,各种布局(动画和滚动)的变化似乎要慢得多。我已经缩小范围以知道它不是 javascript。

我已经删除了在计时器和事件上运行的所有 javascript。

在具有 1 秒 CSS 过渡的元素上简单地设置类名时,我可以看到性能缓慢,这会更改其 style.top 和 style.left。 (它已经绝对定位了)。这个元素非常缓慢地动画到新位置......看起来大约是 5-10 FPS,而使用 IFRAME 它是 40+ FPS。

所以 - 我想知道是否有某种方法可以衡量实际的浏览器布局性能。我在 Safari、IE、Firefox 和 Chrome 上全面看到了这个问题——所以任何这些都可以使用(尽管我更喜欢 Firefox,因为问题似乎在那里最明确)。

最佳答案

一个很好的起点 - Speed TracerPage Speed 。它们将向您展示许多关于布局如何影响性能以及您可以采取哪些措施来改进性能的有用信息。尽管 Speed Tracer 是 Chrome 扩展程序,但它的数据也将反射(reflect)其他浏览器的性能。

关于html - 如何衡量浏览器布局性能,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10283734/

10-12 12:22
查看更多