首屏优化:首次加载过慢动画

一般前端项目部署到服务器之后,用户首次加载需要下载大量的静态资源,等加载了相应的资源之后才会显示真实的页面,这中间的过程,就会容易我们常说的“白屏”,为了解决白屏,我们通常的做饭就是尽量减少包的大小、按需加载、首页加载尽可能简单等;但在这之前,还是有一段时间是页面的“空白”时间。针对这个问题,可以先在页面预加载一个小动画提升用户体验。
思路主要是在模板文件手写一段动画,在vue/react完成对应的虚拟dom转化并插入之前渲染该动画以达到目的。

  1. css
    首先在模板文件index.htmldocument.ejs的head标签中添加css内容
 
  1. 然后在app中添加dom
 
  1. 成果


你可能感兴趣的:(首屏优化:首次加载过慢动画)