vue h5 首次打开加载缓慢、白屏几秒后才渲染解决方案 --- 加载启动页

拿回忆下酒

已于 2023-06-14 10:48:12 修改

阅读量4.9k

点赞数

文章标签： vue 白屏问题启动页

于 2021-06-08 16:28:17 首次发布

本文链接：https://blog.csdn.net/qq_38998250/article/details/117705621

版权

首次打开 web app 应用，都会有一个尴尬的问题，就是加载慢、白屏好几秒。

原生APP 都有一个启动页，那么web app为什么就不能实现呢？或者折中一下，快点实现也可以啊！！！

1、分析问题

web app 之所以打开慢，主要还是渲染的问题：DNS解析 – 服务器交互 – 浏览器页面渲染

我们可以通过cdn引入、去除map文件、异步加载、按需引入、压缩等等方法，这里我就不再阐述了，大家可以自行搜索 Vue项目优化

2、vue 虚拟dom 替换

我们大家都知道，vue、react 的双向数据绑定，都是通过用虚拟dom，替换真实dom实现的，不了解的同学，可以戳这里Vue学习 – 双向数据绑定~

那么页面首次加载时，真实的dom肯定会先加载完成，然后根据路由，将对应的页面再渲染。

那么是否可以，在index.html里需改一下呢？

3、index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=750, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>页面加载失败~</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

4、添加动画

在 id 为 app 的标签里面，添加内容

//html
<div id="app">
    <section class="guide-wrap-app" >
      <section class="main">
        <div class="box">
            <p class="b"></p>
         </div>
      </section>
    </section>
 </div>

//css
<style>
	#app {
	  display: block;
	  min-height: 100%;
	  max-width: 750px;
	  margin: 0 auto;
	  width: 100%;
	  //图片自行填写真实地址
	  background: url('~@/assets/img/back-1.png') no-repeat center;
	  background-size: cover;
	  position: relative;
	}
	.guide-wrap-app{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
      }
      .guide-wrap-app .main{
        height: 100%;
      	display: flex;
        align-items: center;
        justify-content: center;
      }
      .guide-wrap-app  .box{
        width: 521px;
        margin: 0 auto;
        height: 28px;
        border-radius: 14px;
        border: 2px solid #fff;
        background-color: #000;
        box-sizing: border-box;
      }
      .guide-wrap-app  .box .b{
        background-color: #FFDE1E;
        height: 24px;
        border-radius: 12px;
        width: 0px;
        -webkit-animation:  widthFn 1s forwards;
        animation:  widthFn 1s forwards;
      }
      
	@keyframes widthFn {
	  from {
	    width: 0;
	  }
	  to {
	    width: 100%;
	  }
	}
</style>

5、总结

写到这里，其实已经完成了，但是还有点不太完美的地方。

就是我们不知道实际加载完成的时间为多少，因此我写的是 1秒的动画时间，其实这到也没问题，因为你可以理解为，超出1秒一直为 99%的状态。

还有的同学可能会问，需不需要等加载完成后，隐藏该动画。
答案是，不需要，因为咱们是写在 app 标签里的，等实际加载完成后，app里的内容都是替换调

拿回忆下酒

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
5
评论
vue h5 首次打开加载缓慢、白屏几秒后才渲染解决方案 --- 加载启动页

首次打开 web app 应用，都会有一个尴尬的问题，就是加载慢、白屏好几秒。原生APP 都有一个启动页，那么web app为什么就不能实现呢？或者折中一下，快点实现也可以啊！！！1、分析问题web app 之所以打开慢，主要还是渲染的问题：DNS解析 – 服务器交互 – 浏览器页面渲染我们可以通过cdn引入、去除map文件、异步加载、按需引入、压缩等等方法，这里我就不再阐述了，大家可以自行搜索 Vue项目优化2、vue 虚拟dom 替换我们大家都知道，vue、react 的双向数据绑定，
复制链接

扫一扫