Question

情况

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

这样做的目的是加载一个包含加载动画的非常小的页面（总共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。

如果有人有解决方案：

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

非常感谢。谢谢！

Answer 1

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

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

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

在Safari

情况

问题

1 个答案: