为什么这个页面加载速度像 iframe 一样慢，但直接访问时正常？

Question

我有一组运行 iOS 9.3.5 的 iPad（第 3 代）。这是他们支持的最高水平。我正在尝试用等效的 Web 应用程序替换自定义 iOS 应用程序的功能。该站点是用 Angular 11 构建的，目标是es2015，并且我已经在浏览器支持文件中声明了 iOS > 9。该网站的大部分内容与我对此类旧设备的预期完全相同。整个事情的关键是这个需要填写的第三方表单，它作为 iframe 提供，它的表现如此，非常糟糕。

这是带有 iframe 的组件 HTML 代码（出于隐私原因更改了 URL）：

<div class="row header"><a class="restart" (click)='restart()'>Start Over</a><a routerLink='/welcome'><i class="fa fa-times close-x"></i></a></div>
<iframe src="https://notarealsite.com" (load)="waiverLoaded()"></iframe>

该waiverLoaded函数是一个简单的布尔翻转，用于检测嵌入页面在完成后重新加载，以便我可以路由到我的应用程序中的不同组件。如果 iframe 是页面上的唯一元素，则性能不变。嵌入时运行良好的其他页面不会像弃权那样遭受性能下降，因此我必须假设它是弃权页面的代码中的某些内容。

原始的自定义 iOS 应用程序使用 webviewer 加载页面，加载时间为 2 秒或更短。直接在 Safari 中访问页面可以看到相同的性能。在这两种情况下，考虑到设备的使用年限，动态形式的响应能力是合理的。当通过 iframe 加载页面时，性能坦克。我们正在谈论 30-45 秒的加载，有时在点击按钮或字段和表单反应之间长达一整秒的延迟。

我已将设备连接到我的计算机并使用 MacOS Safari 中的远程检查器查看时间线。大部分初始加载时间是表单使用的几个 1-2 kb 图像文件，如滚动条和一些图标。通常这些项目之一最终需要 20-25 秒。当与表单交互时，时间线中会出现一个 XML 资源，每次字段更改或按钮按下时都会出现，这需要大约一两秒钟才能使页面再次更新。

我不太精通像这样的 Web 应用程序性能故障排除，这是我构建的第一个真正的 Angular 应用程序，所以我可能会遗漏一些非常明显的东西。是什么导致直接访问的页面与放置在 iframe 中的页面之间的性能差异？

一些额外的信息：

• 通过本地运行npm serve或构建并部署到我的本地服务器之间的性能是相同的。
• 我曾尝试通过 HTTP 和 HTTPS 托管它，以防出现安全问题，因为该表单仅通过 HTTPS 传送。但是，我目前只有一个自签名证书。
• 在我的其他设备（包括运行 iOS 12.5.2 的 iPad Air）上，我没有发现这两种方法的加载时间有明显差异。
• 控制台中有关于 iOS 9.3.5 上的 jQuery 支持已过时的警告，但在两种情况下都会发生。

其他故障排除

我试图研究我收到的一些建议。我已经在以下配置中检查了 Safari 中慢速加载元素的时间和标题：

• 在 iPad 上我的应用程序的 iframe 中。
• 直接在 iPad 上访问。
• 在我的 MacBook Pro 上的应用程序的 iframe 中。
• 直接在我的 MacBook Pro 上访问。

在我的笔记本电脑上，性能几乎相同。相比之下，在 iPad 上，所有元素的实际加载时间都在我笔记本电脑上的一毫秒或两毫秒之内。最终明显不同的是元素的请求和响应之间的延迟。

直接访问时的延迟高于我的笔记本电脑。通过 iframe 加载时，所有时间都会按比例增加。750ms 的时间跳到 4s。从 6s 跳到 30s。

最后，对我来说真正奇怪的是，由于某种原因，超高延迟图像导致 Cloudflare 为 302，但仅在 iPad 上。不管是通过iframe还是直接。两台设备都使用相同的 WiFi 网络。除非目标站点以某种方式处理 iPad，否则我想不出发生重定向的原因。在我的笔记本电脑上的 Safari 中更改 UserAgent 以匹配 iPad 不会导致相同的重定向。

所以我已经确认，即使在 iframe 之外，有问题的网站在 iOS 9.3.5 上的行为与在较新版本上的行为不同，与我的电脑相比。

Answer 1

请发布您的代码，以便我们诊断和帮助。IFrame一般来说，我的怀疑是jQuery handler或 的开销更大cookie policy，明智的是我还列出了其他要检查的项目。

1. 看起来您已经检查了之前的unsecured elements问题。在 和network graph调用中，仔细检查不安全元素的 Iframe 没有依赖项或 URL 调用，然后它不会显示，如果 Https 在安全和非安全内容之间混合了内容，它会进行多次往返，有一张票新的 TLS 问题。

一旦您修复了确保其安全托管/调用的问题，彻底清除缓存、cookie、数据并重新加载页面即可修复问题，即使在移动浏览器上也是如此。

2. Redirects/Bouncing您加载脚本/css 的顺序，如果存在依赖脚本并且未缓存它们，则可能会阻塞，或者如果其重定向回 HTTP，这也会减慢速度。

3. 仅适用于IOS 移动应用程序（此处不适用） - 如果您使用的是第 3 代，请检查Cookie Security policy(HTTPCookieAcceptPolicy) 的默认值是否UIWebView已更改为NSHTTPCookieAcceptPolicyOnlyFromMainDocumentDomain

Safari Iframe中的动画速度很慢

您的代码中有点击事件，可能是问题所在

4. ..."事实证明，在 jQuery 中分配了点击处理程序的任何非锚定元素都必须具有 onClick 属性（可以为空，如下所示）： “...

放置以下元素声明 cursor:pointer或点击事件