Javascript 否定safari中不一致（和延迟）的页面呈现形势_Javascript_Html_Css_Asynchronous_Safari

Javascript 否定safari中不一致（和延迟）的页面呈现形势

javascript html css asynchronous safari

Javascript 否定safari中不一致（和延迟）的页面呈现形势,javascript,html,css,asynchronous,safari,Javascript,Html,Css,Asynchronous,Safari,我一直在尝试创建react应用程序。首先加载的索引页面包含一个基本的CSS和HTML加载动画，然后是外部脚本和CSS，在之前按阻塞顺序，最后一个脚本删除加载程序动画并显示页面这样做的目的是加载一个包含加载动画的非常小的页面（2KB），然后加载脚本、样式表和图像的8MB，从而创建更无缝的用户体验 <html> <head> ... [loader css] </head> <body> <div id="l

我一直在尝试创建react应用程序。首先加载的索引页面包含一个基本的CSS和HTML加载动画，然后是外部脚本和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>


...
[加载器css]
...
[卸下装载机]

问题这在Chrome中非常有效，因为它会立即呈现页面（加载动画），然后呈现外部依赖项。但因为：

Safari开始加载新网页的内容，但在加载足够的信息量之前不会开始呈现新网页

这种方法不起作用；它将只显示地址栏加载指示器（用于结束

正文

标记上方的依赖项）和一个空白页面，而不是直接呈现HTML

如果任何人有一个解决方案：

不会更改在页面上加载内容的顺序
在尽可能多的浏览器上工作
不存在跨站点脚本漏洞

这将非常感谢。谢谢大家!

真正的问题是，浏览器无法确定JavaScript是否安全地跳过，直到它被加载、解析和执行。如果要将

defer

属性添加到脚本中，则页面将在不等待资源下载的情况下加载和显示，但加载程序的删除也将在不等待的情况下执行

考虑将

defer

添加到外部脚本，并使加载程序删除脚本本身成为外部

defer

脚本<代码>延迟脚本应该按照指定的顺序执行。（还要注意对

async

的引用以及该注释。）

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

您确定9年前的文章仍然适用吗？在某种程度上，是的。也许确切的技术还不适用，但这种行为今天可以复制。谢谢你的回复！据我所知，我不需要浏览器来确定JavaScript是否可以安全跳过。我只需要加载脚本/样式表，以便safari在阻止之前显示呈现的DOM，并在下载脚本/样式表时显示白色屏幕。我认为延迟加载将使safari呈现页面而不是阻止-这是关于safari确保跳过是安全的，而不是您作为开发人员。测试容易吗？我很抱歉花了这么长时间才接受这个，我已经有一段时间没做这个项目了。我将它与捆绑的

vuejs

应用程序一起使用。在

中显示加载程序。。。装载机async

属性，加载vue后在顶部重新渲染vue效果非常好。我现在只加载一个文件，所以执行顺序不再是问题。这仍然是一个奇怪的问题，但这似乎是目前唯一可行的解决办法。