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

【问题标题】：How do I determine what's causing "Styles Invalidated" in iOS Safari?如何确定导致 iOS Safari 中“样式无效”的原因？
【发布时间】：2017-05-02 18:40:01
【问题描述】：

我正在追查在 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 中无效？

【问题讨论】：

这是 iOS 中的一个已知“问题”，请参见此处：developers.google.com/web/updates/2013/12/…。使用 Fastclick.js 来帮助缓解，我认为 iOS 8 之后的较新版本删除了这个点击延迟“功能”。希望有帮助！
我不确定这是否相同。对我来说，在具有更简单 DOM 结构的页面上滚动响应更快，这不是静态延迟。我确定这与样式失效有关。
面临同样的问题，唯一可行的方法是查看单个页面上的每个动画内容并尝试禁用它并检查它是否有帮助。在我的情况下，回流是由 ionic 的组件的“animated='true'”参数引起的。

标签： css angularjs safari mobile-safari angular-material

【解决方案1】：

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

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

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

【讨论】：