iOS Safari不会首次呈现整个页面

Question

我们有一个在所有浏览器和设备上都能很好地呈现的网站,除了第一次在Safari移动设备(或窄屏幕上的Safari Mac)中打开它.

网站:http://sheriff.org/

在iPhone Safari上重现:

1. 以私人模式打开网站
2. 刷新页面

在Safari for Mac上重现:

1. 以私人模式打开Safari
2. 将用户代理切换到iOS - iPhone(开发>用户代理> Safari - iOS - iPhone)
3. 调整浏览器大小以获得移动设备宽度的近似值
4. 打开网站
5. 刷新页面

预期: 页面应该第一次和第二次呈现相同

实际: 在私人模式中第一次只显示绿色框第二次,页面完全呈现

结果: 我试图比较两个页面(当它正确渲染时,以及渲染被破坏时),看看是否有任何差异,要发现在这两种情况下,页面都具有完全相同的HTML和CSS.

如果您检查任何未在第一次尝试(这应该页面刷新后正确地呈现)所示的元素,你不会发现,是影响该元素的可见性的任何样式(如opacity,display,visibility,position,...等)

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

关于我们为何在Safari上看到此类行为的任何建议都受到高度赞赏.

Answer 1

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

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

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

祝你好运！