首屏加载过慢或白屏怎么解决

首屏加载过慢

  1. 减少入口文件

  2. 静态资源本地存储

  3. 图片压缩

  4. UI框架按需加载

  5. 重复组件打包优化

  6. SSR

  7. GZip

image-20210213114220872.png

我们知道白屏现象多出现在单页面网页(SPA)

主要的解决办法可以通过SSR(服务器端渲染)

SSR

服务器端渲染,普通的SPA是将代码发送到浏览器,然后浏览器生成和操作DOM会很慢。但是我们也是可以将SPA打包到服务器上进行渲染HTML,然后再发送给浏览器,这样的HTML页面还不具备交互能力,所以还需要与SPA框架配合,在浏览器上“混合”成可交互的应用程序。这样不仅可以减少白屏现象,还有利于seo优化。

SSR常用框架

  • React 的 Next

  • Vue.js 的 Nuxt

目前我最喜欢使用的方式就是首屏的时候减少接口请求数据,比如让表单数据仅五个分页展示,这样能够很有效减少首次加载过慢问题

你可能感兴趣的:(首屏加载过慢或白屏怎么解决)