iOS Safari 未从第一次呈现完整页面

Posted 2023-05-07

【中文标题】iOS Safari 未从第一次呈现完整页面

【英文标题】：iOS Safari not rendering the complete page from the first time

【发布时间】：2018-05-17 22:57:39

【问题描述】：

我们的网站在所有浏览器和设备上都能很好地呈现，除了您第一次在 Safari 移动版（或 Safari Mac 在窄屏上）中打开它。

网址：http://sheriff.org/

在 iPhone Safari 上重现：

以私密模式打开网站 刷新页面

在 Mac 版 Safari 上重现：

以隐私模式打开 Safari 将用户代理切换到 ios - iPhone（开发 > 用户代理 > Safari -- iOS -- iPhone） 调整浏览器的大小，使其接近移动设备的宽度 打开网站 刷新页面

预期： 页面应该第一次和第二次渲染相同

实际： 第一次在私人模式下，只有一个绿色框可见 第二次，页面完全渲染

调查结果： 我尝试比较两个页面（当它正确呈现时，以及当呈现被破坏时），看看是否有任何区别，以发现在这两种情况下，页面具有完全相同的 html 和 CSS。

如果您检查任何在第一次尝试时未显示的元素（应该在页面刷新后正确呈现），您将找不到任何影响元素可见性的样式（如opacity、@987654327 @、visibility、position、...等）

更新： 似乎 Safari 控制台 Unhandled Promise Rejection: [object DOMError] 中存在可能导致此问题的错误， 我做了研究，发现可能是页面自动播放视频引起的（页面确实有视频，但是即使抛出这个错误也会播放视频），所以我认为应该有另一个原因抛出此错误

我们非常感谢任何关于我们为何在 Safari 上看到此类行为的建议。

【问题讨论】：

你好。我可以在我的手机上重现，但不能在 Mac OS Sierra 10.12 上的模拟 iPhone safari 上重现 - 这可能是 iOS 11 的事情，但是......这里发生了很多事情，我收到 6 个 js 错误 - 这不是很好：/

js 错误不应该影响，它们会出现在两种情况下，当问题被重现时，当问题不重现时。

这个错误，很可能是 js 相关的，所以也许你也应该看看它。这可能是由某种超时或触发尚未加载的 DOM 元素引起的 - 而在第二次，文件被缓存以便加载。

在我的 Mac 上运行 Safari 11 并且页面在第一次加载时无法正确加载无论屏幕宽度如何。我同意@scooterlord 的观点，您需要修复您的 JS 错误

我的网站已经打开了 2 分钟，它已将 62.5 MB 的资产传输到我的浏览器。其中大约 30MB 发生在前 30 秒内。无论是否相关，这对您的移动用户来说都是一个更大的问题。

【参考方案1】：

您的网站充满了问题，正如其他一些评论员所指出的那样，一些问题是由于主页尺寸过大导致某些网站资产在您希望加载时无法加载因为一些大型外部脚本在您的 css 之前加载。有问题的css在“第二次”尝试加载的原因是因为css被缓存了......最终（在加载了你请求的几十个javascript之一之后，你请求的几十个css文件之一）。 ..并且将在后续加载时正确部署 css（只要您确实允许足够的时间和带宽来首次加载页面）。

我想立即给你很多建议，但要与你的帖子保持相关：

确保在页面头部的任何 javascript 之前调用 css。 考虑删除大约 90% 的对您的网站有用的不必要的脚本...因为很少有人会在浏览您的网站之前有耐心加载这么多数据...尤其是在相对较慢的移动浏览器上。 查看 Chrome 控制台中的所有错误（在 Google Chrome 中右键单击您的页面并点击“检查”，然后查看“控制台”选项卡...您的网站有很多错误。如果您希望您的网站符合标准并且更有可能被搜索引擎抓取。 在 Google 洞察页面上查看您的网站：https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.sheriff.org%2FPages%2FHome.aspx

祝你好运！

【讨论】：

有关为什么以及是否将 css 链接放在脚本链接之前的更多信息，这里有很多很好的答案：***.com/questions/9271276/…