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

我在iOS上滚动时遇到了性能问题。在touchstart和touchend上，Safari无效，然后重新计算样式，这导致在滚动响应之前稍微延迟。 Safari的工具有一个“启动器”列，但在我的测试中它是空白的。如何确定iOS Safari中导致“样式失效”的原因？

我已经试过：

滚动元件上施加任何will-change: transform;或transform: translateZ(0);。这对Chrome非常有帮助，但对iOS Safari没有任何帮助。分析器仍然报告正在重新计算样式。
去除有position: fixed;
检查的Javascript每一行的DOM的所有元素（这只是jQuery和在我的测试角的核心代码）通过剖析报告，看看他们在Paul Irish's list of things that force layout/reflow
要重现在Android上，我可以使用Chrome的恒星开发工具，但没有成功。该问题仅影响iOS Safari，而Safari Safari只能从桌面Safari进行调试。

如何确定是什么导致我的样式在iOS Safari中失效？

来源

2016-12-16 adamdport

这是iOS中已知的“问题”，请参阅此处：https：//developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away。使用Fastclick.js来帮助缓解，我认为8之后更新版本的iOS删除了这个点击延迟“功能”。希望有所帮助！ –

我不确定这是一样的。对于我来说，滚动对于更简单的DOM结构的页面响应速度更快，这不是一个静态延迟。我确定它与风格无效有关。 – adamdport

面对同样的问题，唯一有效的方法是查看单个页面上的每个动画内容并尝试禁用它并检查它是否有帮助。在我的情况下，回流是由来自离子的组件的“animated ='true'”参数引起的。 –

这为我工作，当我调试一个类似的问题。

获取您想要查看的事件的开始时间。从屏幕截图看，应该在倒数第二列。
单击名为“框架”的“事件”选项卡旁边的选项卡。
寻找匹配起始时间最近的帧。（有时并非确切）
扩展该框架可以让您看到正在查看的事件之前/之后发生的事件。在最后一列“位置”上，您可以看到问题的来源。如果它已填充，则可以单击右箭头查看导致该行的行。 但它并不总是有东西在列中。我不得不看看以前的事件，试图找出问题所在。

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

来源

2016-12-23 08:35:48 heraldo

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

回答

相关问题