V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
beilo
V2EX  ›  问与答

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

  •  
  •   beilo · 2019-08-09 17:24:28 +08:00 · 1248 次点击
    这是一个创建于 1912 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近做了个手机项目,为了优化交互在首屏有个 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
    love
        1
    love  
       2019-08-09 19:59:41 +08:00 via Android
    加一个 defer 试一试?
    beilo
        2
    beilo  
    OP
       2019-08-12 11:17:04 +08:00
    @love 也不行呢.也是会加载完毕再进行渲染.
    love
        3
    love  
       2019-08-12 11:30:27 +08:00
    @beilo 你这个不是还有几个 script 放在 head?
    beilo
        4
    beilo  
    OP
       2019-08-12 14:01:20 +08:00
    @love 是的,但是那几个很快,而且必须要放在前面的.head 上的加载时间可以忽略不计.主要是 vendors.js 占用时间,导致白屏.虽说我已经分包处理过,在线上首屏首次加载在 1s 之内,但是 ios 那段白屏时间还是有的.想看看能不能优化的更好点
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2737 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 12:34 · PVG 20:34 · LAX 05:34 · JFK 08:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.