关于html：iOS Safari不会从第一次呈现整个页面


iOS Safari not rendering the complete page from the first time

除了第一次在Safari Mobile(或窄屏幕上的Safari Mac)中打开外，我们的网站在所有浏览器和设备上都表现良好。

网址：http://sheriff.org/

在iPhone Safari上复制：

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

    • 在Mac Safari上复制：

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

    • 预期：页面应第一次和第二次呈现相同的内容

    sheriff.org after refresh

    实际情况：在私人模式下，第一次只能看到一个绿色框第二次，页面完全呈现

    sheriff.org in safari first time in private mode

    调查结果：我尝试比较两个页面(当渲染正确时，以及渲染中断时)，以查看是否有任何差异，以发现在这两种情况下，页面具有完全相同的HTML&CSS。

    如果检查第一次尝试时没有显示的任何元素(在页面刷新后应该正确呈现)，您将找不到任何影响元素可见性的样式(如opacity、display、visibility、position等)。

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

    任何关于我们为什么在狩猎中看到这种行为的建议都会受到高度赞赏。

    相关讨论

    你的网站充满了问题，正如其他一些评论员所指出的，有些问题是由于主页的大小荒谬地大，导致一些网站资产在你想要加载它们时无法加载，因为一些大型外部脚本在你的CSS加载之前正在加载。有问题的CSS在"第二次"尝试时加载的原因是，CSS被缓存…最终(在加载了您在请求的几十个CSS文件之一之前请求的几十个javascript中的一个之后)并将在随后的加载中正确地部署CSS(只要您确实允许足够的时间和带宽加载pag)第一次)。

    我想马上给你很多建议，但要与你的职位保持联系：

  • 确保在页面头部的任何javascripts之前调用CSS。
  • 考虑取消大约90%的脚本，这些脚本对你的网站是不必要的，因为很少有人有耐心在浏览你的网站之前加载这么多的数据，尤其是在相对缓慢的移动浏览器上。
  • 查看Chrome控制台中的所有错误(在Google Chrome中右键单击您的页面并单击"检查"，然后查看"控制台"选项卡…您的站点有许多错误。如果您希望您的网站符合标准，并且更可能被搜索引擎抓取，则必须修复这些问题。
  • 在谷歌的洞察页面上看看你的网站：https://developers.google.com/speed/pagespeed/insidences/？url=http%3a%2f%2fwww.sheriff.org%2fpages%2fhome.aspx

    • 祝你好运！

    相关讨论