时间戳

首页 > 解决方案 > 为什么这个页面像iframe一样加载这么慢，直接访问却正常？

ios - 为什么这个页面像iframe一样加载这么慢，直接访问却正常？

问题描述

我有一套运行 iOS 9.3.5 的 iPad（第三代）。这是他们支持的最高级别。我正在尝试用等效的 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 中的页面之间的性能差异？

一些附加信息：

其他故障排除

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

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

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

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

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

标签： iosangularperformanceiframe

解决方案

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

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

有一个新的 TLS 问题

一旦您解决了确保其安全托管/调用的问题，请完全清除缓存、cookie、数据并重新加载页面，即使在移动浏览器上也能解决问题。

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

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

Safari iframe中的动画很慢

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

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

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

推荐阅读