否定 safari 中不一致（和延迟）的页面呈现答案

【问题标题】：Negate inconsistent (and late) page rendering in safari否定 safari 中不一致（和延迟）的页面呈现
【发布时间】：2016-07-31 22:55:08
【问题描述】：

情况

我一直在尝试创建一个 react 应用程序。首先加载的索引页面包含一个基本的 CSS 和 HTML 加载动画，然后是外部脚本和 CSS，在 </body> 之前以阻塞顺序排列，最后一个脚本删除加载器动画并显示页面。

这样做的目的是加载一个包含加载动画的非常小的页面（总共2KB），然后加载脚本、样式表和图像的8MB，从而创造更无缝的用户体验。

<html>
  <head>
    ...
    [loader css]
  </head>
  <body>
    <div id="loader">...</div>

    <script src="..."></script>
    <script src="..."></script>
    <link href="..." type="text/css" rel="stylesheet" />

    <script> [remove #loader] </script>
  </body>
</html>

问题

这在 Chrome 中效果很好，因为它会立即呈现页面（加载动画），然后是外部依赖项。但是因为safari has weird, inconsistent, and ostensibly non-deterministic loading practices:

Safari 开始加载新网页的内容，但在加载足够多的信息之前不会开始渲染它。

这种方法行不通；它只会显示地址栏加载指示器（用于关闭 body 标记上方的依赖项）和空白页面，而不是立即呈现 HTML。

如果有人有解决方案：

不会更改页面上加载内容的顺序
适用于尽可能多的浏览器
不受跨站点脚本漏洞的影响

我们将不胜感激。谢谢！

【问题讨论】：

你确定9年前的文章仍然适用吗？
在某种程度上，是的。也许确切的技术仍然不适用，但行为可以在今天复制。

标签： javascript html css asynchronous safari

【解决方案1】：

真正的问题是浏览器无法确定您的 JavaScript 是否可以安全跳过，直到它被加载、解析和执行。如果您要在脚本中添加 defer 属性，则页面将加载并显示而无需等待资源下载 - 但加载器的删除也将执行而无需等待。

考虑将defer 添加到外部脚本和使加载程序删除脚本本身成为外部defer 脚本的组合。 According to some defer 脚本应该按照指定的顺序执行。（还要注意该评论中对async 和DOMContentLoaded 的引用。）

React.js 还可能提供比 DOMContentReady 更可靠的来回调。

【讨论】：

感谢您的回复！据我所知，我不需要浏览器确定 JavaScript 可以安全跳过。我只需要以这样一种方式加载脚本/样式表，即 safari 在下载脚本/样式表时阻止并显示白屏之前显示渲染的 DOM。
我认为延迟加载将使 Safari 呈现页面而不是阻塞 - 这是关于 Safari 确保跳过是安全的，而不是作为开发人员。测试容易吗？
很抱歉花了这么长时间才接受这个，我有一段时间没有从事这个项目了。我将它与捆绑的vuejs 应用程序一起使用。在 <div id="app"> ... loader ... </div> 中显示加载器，然后在加载后在顶部重新渲染 vue，使用 async 属性效果很好。我现在只加载一个文件，所以执行顺序不再是问题。仍然是一个奇怪的问题，但这似乎是目前唯一可行的解决方法。