情况
我一直在尝试创建一个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 starts loading the contents of the new web page, but does not start rendering it until it has loaded a sufficient amount of information.
这种方法行不通；它只会显示地址栏加载指示器(对于结束 body 标记上方的依赖项)和一个空白页面，而不是直接呈现 HTML。
如果有人有解决方案:
- 不会改变页面加载内容的顺序
- 适用于尽可能多的浏览器
- 免受跨站脚本攻击
那将不胜感激。谢谢!
最佳答案
真正的问题是浏览器无法确定您的 JavaScript 是否可以安全跳过，直到它被加载、解析和执行。如果您要将 defer 属性添加到您的脚本中，页面将加载并显示，而无需等待 Assets 下载 - 但加载程序的删除也将在不等待的情况下执行。
考虑将 defer 添加到外部脚本并使加载程序删除脚本本身成为外部 defer 脚本的组合。 According to some defer 脚本应该按照指定的顺序执行。 (另请注意该评论中对 async 和 DOMContentLoaded 的引用。)
React.js 也可能提供比 DOMContentReady 更可靠的回调。
关于javascript - 否定 safari 中不一致(和延迟)的页面呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38689053/