在 iPad Air 2 上分析前端 (js) 性能问题的策略

Posted 2023-03-14

【中文标题】在 iPad Air 2 上分析前端 (js) 性能问题的策略

【英文标题】：Strategy to profile front end (js) performance issues on iPad Air 2

【发布时间】：2015-09-21 01:22:08

【问题描述】：

另一个奇怪的时间线事件，它甚至超过 5 秒都没有发出网络请求

在 iPad Air 2 上使用 Safari 重新加载此页面时出现性能问题

http://demo.phppointofsalestaging.com/slow.html

第一次相当快；但是第一次加载后的刷新速度很慢。 （5-10 秒）而且它不会每次都发生。这不是网络问题，因为我在本地网络上尝试过，结果相同。

这也不是服务器端性能问题，因为上面的 url 只是一个静态 html 文件。

这似乎也不是 CSS 问题，好像我删除了所有 CSS 它仍然很慢。

到目前为止，我尝试的是逐个删除 js 文件，看看是否有帮助。由于问题的随机性并且仅在 iPad 上发生，因此很难缩小范围。

另外我知道我的 CSS 和 js 没有被联系或缩小；因为我们仍在积极开发中。

如果我删除所有 js，它会很快。

我们使用第三方脚本；但由于该问题不会发生在桌面上，因此很难使用分析工具。

我正在寻找在 iPad Air 2 上进行分析的任何方法

我正在运行 ios 9.1；但这也发生在 8 点。

有趣的提示：点击刷新图标时很慢；但不要点击 url 然后去。

【问题讨论】：

您可以使用 Safari 直接从任何 iOS 设备调试和分析您的 Web 应用程序。您还可以使用 Xcode iOS 模拟器加载您的代码并再次使用 Safari 进行调试。 Safari 菜单 -> 开发 -> iPad / iPhone -> 您的设备 IP 地址

@DaveGomez 感谢您的提示。我打开了 IOS 模拟器并重现了问题/不幸的是，计算机上的 safari 检查器在错误发生时立即停止。但它确实给了我信息，当它开始下载 css 文件时它被卡住了。我已经发布了它的截图。注意：这是在本地网络上。

我通过删除 css 中的 @import 解决了这个问题。并将所有 css + js 移动到页面顶部...我仍然很想知道为什么会中断...

【参考方案1】：

克里斯，您不能在不同于文档开头的其他地方使用 @import 规则，这就是问题所在。

MDN 关于 @import 规则：

@import CSS at-rule 允许从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则，@charset 规则除外；由于它不是嵌套语句，因此不能在条件组 at-rules 中使用。