单页应用首屏加载速度慢怎么解决？_单页面应用如何提高加载速度

1、什么是首屏加载时间？

首屏加载时间是指浏览器从相应用户输入网址到首屏内容渲染完成的时间，从用户的角度来说就是：“地址栏输入网址之后网页呈现的速度”。整个网站并不需要全部加载完成，但需要展示当前可视窗口中的内容。

2、如何计算首屏加载时间？

常用方法：

• 首屏模块标签标记法
• 统计首屏内加载最慢的图片的时间
• 自定义首屏内容计算法
• 借助第三方工具（pagespeed、vue-cli等等）

其实很简单，并不需要我们手动去计算。打开F12控制台，然后刷新网页，其中Load就是首屏加载时间。

3、首屏加载速度慢的原因

在页面渲染的过程，导致加载速度慢的因素可能如下

1. 网络延时问题
2. 资源文件体积是否过大问题
3. 资源是否重复发送请求去加载问题
4. 加载脚本的时候，渲染内容堵塞问题

4、解决方案

• 路由懒加载

      以函数的形式加载路由，这样就可以把各自的路由文件分别打包，只有在解析给定路由的时候才会加载对应的路由组件。

• 静态资源本地缓存

       前端合理使用localStorage，sessionStorage等缓存方式。 接口采用http缓存，合理设置cache-control等请求头。

• 图片压缩

      像一些icon图标，我们并不需要在本地存放一张张的图片，可以用在线字体图标代替，或者将多个图标合并到一张图上，以减轻请求压力。

   webpack处理图片常用依赖：

         file-loader：在css 和html 主页中，相对路径的图片都会被处理，发布到输出目录中

        url-loader：是对file-loader的封装，因此在安装了file-loader和url-loader 后，在webpack.config.js 中只对url-loader 做配置即可。url-loader的自身功能是给图片一个limit 标准，当图片小于limit时，使用base64 的格式引用图片；否则，使用url 路径引用图片。

         image-webpack-loader：压缩图片。这个用得不算太多，因为前期可以直接让UI设计把图片压缩好，像ps 就可以自动的批量压缩图片。

• 减少重复请求

     像一些表单提交或者长列表，合理使用防抖节流，以减少不必要的请求，减轻服务器压力。

•  UI框架按需加载

      借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的

•  开启GZip压缩

•  代码优化

       1.v-if 和 v-show 的合理使用

　　2.使用v-for的时候为item设置唯一key值

　　3.细分vuejs组件

      4.减少watch的数据

• 使用SSR服务端渲染

       SSR（server side render），也就是服务端渲染，组件或页面通过服务器生成html字符串，再发送到浏览器。

      SSR技术会实现将指定的异步数据在服务端渲染好，再返回给客户端，这样就减轻了客户端的请求异步数据的压力，渲染页面就更快了。

1. vue可使用Nuxt.js框架实现服务端渲染
2. react多采用koa2等技术的实现方案。

 

• 使用CDN

     使用CDN主要解决两个问题：

　　　　① 打包时间太长、打包后代码体积太大、请求慢

　　　　② 服务器网络不稳定带宽不高，使用cdn刻意回避服务器贷款问题