css - 如何确定导致 iOS Safari 中出现 "Styles Invalidated"的原因？

Question

我正在解决在 iOS 上滚动时的性能问题。在 touchstart 和 touchend 上，Safari 都会使样式无效然后重新计算样式，这会导致滚动响应前出现轻微延迟。 Safari 的工具有一个“启动器”列，但在我的测试中它是空白的。

我试过:

• 在滚动元素上应用 will-change: transform; 或 transform: translateZ(0);。这对 Chrome 有很大帮助，但对 iOS Safari 没有任何帮助。探查器仍然报告正在重新计算样式。
• 从 DOM 中移除所有具有 position: fixed;
的元素
• 检查探查器报告的每一行 Javascript(在我的测试中只是 jQuery 和 Angular 核心代码)，看看它们是否在 Paul Irish's list of things that force layout/reflow 中
• 为了在 Android 上重现它以便我可以使用 Chrome 的一流开发工具，但没有成功。该问题仅影响 iOS Safari，只能从桌面 Safari 进行调试。

如何确定导致我的样式在 iOS Safari 中无效的原因？

Answer 1

当我调试类似问题时，这对我有用。

1. 获取您要调查的事件的开始时间。在您的屏幕截图 View 中，应该位于倒数第二列。
2. 单击“事件”选项卡旁边名为“框架”的选项卡。
3. 寻找与开始时间最接近的帧。 (有时不准确)
4. 展开框架可以让您看到在您正在调查的事件之前/之后发生的事件。在最后一列“位置”中，您可以看到问题出在哪里。如果已填写，您可以单击右箭头以查看导致它的行。 但它并不总是在列中有内容。然后我必须查看以前的事件以尝试找出问题所在。

它并不完美，但我已经能够调试使用此方法遇到的问题。希望这对您有所帮助!