如何确定iOS Safari中"样式无效"的原因？

Question

在iOS上滚动时,我正在追逐性能问题.在这两个touchstart和touchend,但Safari失效,然后重新计算方式,这会导致滚动响应之前稍有延迟.Safari的工具有一个"启动器"列,但在我的测试中它是空白的.

我试过了:

• 在滚动元素上应用任何一个will-change: transform;或transform: translateZ(0);.这对Chrome很有帮助,但对iOS Safari没有任何帮助.分析器仍然报告正在重新计算样式.
• 从DOM中删除所有具有的元素 position: fixed;
• 检查分析器报告的每一行Javascript(我的测试中只是jQuery和Angular核心代码),看看他们是否在Paul Irish的强制布局/回流的事物清单中
• 要在Android上重现它,我可以使用Chrome的恒星开发工具,但没有成功.该问题仅影响iOS Safari,后者只能从桌面Safari调试.

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

Answer 1

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

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

它并不完美，但我已经能够用这种方法调试遇到的问题。希望这可以帮助！