safari 尾部 script 阻塞页面渲染的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 1711 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近做了个手机项目,为了优化交互在首屏有个 load 的动画.在其他设备上都是正常的,唯有 ios 上白屏,等到所有的 script 加载完成才会渲染.在 google 上没有查询到有用的结果.不知道有没有 v 友能提供一些帮助.

<!DOCTYPE html>
<html lang="en">
  <head>
   ...省略
    <style type="text/css">
      .index-load {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .index-load img {
        width: 80px;
        height: 80px;
        margin: 0px auto;
      }
    </style>

    <!-- UI 组件库 1.0 -->
    <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <link rel="stylesheet" href="./swiper.min.css" />
    <script src="./swiper.min.js"></script>

  </head>
  <body>
    <div id="root">
      <div class="index-load">
        <h4>loading...</h4>
      </div>
    </div>
  <script type="text/javascript" src="manifest.bundle.e49239d9939be1e9d187.js" async></script>
  <script type="text/javascript" src="vendors.21fb76d947bb4b3052a5.js" async></script>
  <script type="text/javascript" src="index.b5c33feb2f5cb956513d.js" async></script>
</body>
</html>

如上代码,vendors.js加载完成才会进行渲染,而尾部script都已经加了async关键字,但是毫无作用. 相关提问,非本人

谢谢.

4 条回复 • 2019-08-12 14:01:20 +08:00