面试官：SPA（单页应用）首屏加载速度慢怎么解决？

柔情只为你懂 2022-12-26 11:15 209阅读 0赞

![format_png][]

## 一、什么是首屏加载    ##

首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容

首屏加载可以说是用户体验中**最重要**的环节

### 关于计算首屏时间 ###

利用`performance.timing`提供的数据：

![format_png 1][]

通过`DOMContentLoad`或者`performance`来计算出首屏时间

// 方案一：
    document.addEventListener('DOMContentLoaded', (event) => {
        console.log('first contentful painting');
    });
    // 方案二：
    performance.getEntriesByName("first-contentful-paint")[0].startTime
    
    // performance.getEntriesByName("first-contentful-paint")[0]
    // 会返回一个 PerformancePaintTiming的实例，结构如下：
    {
      name: "first-contentful-paint",
      entryType: "paint",
      startTime: 507.80000002123415,
      duration: 0,
    };

## 二、加载慢的原因 ##

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

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

## 三、解决方案 ##

常见的几种SPA首屏优化方式

*  减小入口文件积
 *  静态资源本地缓存
 *  UI框架按需加载
 *  图片资源的压缩
 *  组件重复打包
 *  开启GZip压缩
 *  使用SSR

### 减小入口文件体积 ###

常用的手段是路由懒加载，把不同路由对应的组件分割成不同的代码块，待路由被请求的时候会单独打包路由，使得入口文件变小，加载速度大大增加

![format_png 2][]

在`vue-router`配置路由的时候，采用动态加载路由的形式

routes:[ 
        path: 'Blogs',
        name: 'ShowBlogs',
        component: () => import('./components/ShowBlogs.vue')
    ]

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

### 静态资源本地缓存 ###

后端返回资源问题：

*  采用`HTTP`缓存，设置`Cache-Control`，`Last-Modified`，`Etag`等响应头
 *  采用`Service Worker`离线缓存

前端合理利用`localStorage`

### UI框架按需加载 ###

在日常使用`UI`框架，例如`element-UI`、或者`antd`，我们经常性直接饮用整个`UI`库

import ElementUI from 'element-ui'
    Vue.use(ElementUI)

但实际上我用到的组件只有按钮，分页，表格，输入与警告 所以我们要按需引用

import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';
    Vue.use(Button)
    Vue.use(Input)
    Vue.use(Pagination)

### 组件重复打包 ###

假设`A.js`文件是一个常用的库，现在有多个路由使用了`A.js`文件，这就造成了重复下载

解决方案：在`webpack`的`config`文件中，修改`CommonsChunkPlugin`的配置

minChunks: 3

`minChunks`为3表示会把使用3次及以上的包抽离出来，放进公共依赖文件，避免了重复加载组件

### 图片资源的压缩 ###

图片资源虽然不在编码过程中，但它却是对页面性能影响最大的因素

对于所有的图片资源，我们可以进行适当的压缩

对页面上使用到的`icon`，可以使用在线字体图标，或者雪碧图，将众多小图标合并到同一张图上，用以减轻`http`请求压力。

### 开启GZip压缩 ###

拆完包之后，我们再用`gzip`做一下压缩 安装`compression-webpack-plugin`

cnmp i compression-webpack-plugin -D

在`vue.congig.js`中引入并修改`webpack`配置

const CompressionPlugin = require('compression-webpack-plugin')
    
    configureWebpack: (config) => {
            if (process.env.NODE_ENV === 'production') {
                // 为生产环境修改配置...
                config.mode = 'production'
                return {
                    plugins: [new CompressionPlugin({
                        test: /\.js$|\.html$|\.css/, //匹配文件名
                        threshold: 10240, //对超过10k的数据进行压缩
                        deleteOriginalAssets: false //是否删除原文件
                    })]
                }
            }

在服务器我们也要做相应的配置 如果发送请求的浏览器支持`gzip`，就发送给它`gzip`格式的文件 我的服务器是用`express`框架搭建的 只要安装一下`compression`就能使用

const compression = require('compression')
    app.use(compression())  // 在其他中间件使用之前调用

### 使用SSR ###

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

从头搭建一个服务端渲染是很复杂的，`vue`应用建议使用`Nuxt.js`实现服务端渲染

### 小结： ###

减少首屏渲染时间的方法有很多，总的来讲可以分成两大部分 ：资源加载优化 和 页面渲染优化

下图是更为全面的首屏优化的方案

![format_png 3][]

大家可以根据自己项目的情况选择各种方式进行首屏渲染的优化

## 参考文献 ##

*  https://zhuanlan.zhihu.com/p/88639980?utm\_source=wechat\_session
 *  https://www.chengrang.com/how-browsers-work.html
 *  https://juejin.cn/post/6844904185264095246
 *  https://vue3js.cn/docs/zh

面试官VUE系列总进度：8／33

[面试官：说说你对vue的理解?][vue]

[面试官：说说你对SPA（单页应用）的理解?][SPA]

[面试官：说说你对双向绑定的理解?][Link 1]

[面试官：说说你对Vue生命周期的理解?][Vue]

[面试官：Vue组件间通信方式都有哪些?][Vue 1]

[面试官：Vue中的v-show和v-if怎么理解？][Vue_v-show_v-if]

[面试官：为什么Vue中的v-if和v-for不建议一起用?][Vue_v-if_v-for]

![format_png 4][]

[format_png]: /images/20221120/757c832995fc4773ab44f16d64018183.png
[format_png 1]: /images/20221120/43682660981349d3a3b1cd7c3110a7bc.png
[format_png 2]: /images/20221120/f5db5be74a9b44179c3f244c3a06ac85.png
[format_png 3]: /images/20221120/4ba0f195674f44988b5d52d0974a072e.png
[vue]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c093cb674985ef3bd2966f66fc28c5eb70b0037e4be1af4bf54fb6fa9571985abd31d52f&idx=1&mid=2247484101&scene=21&sn=83b0983f0fca7d7c556e4cb0bff8c9b8#wechat_redirect
[SPA]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c081cb6749976814aaeda6a6433db418223cec57edda7e15b9e5a0ca69ad549655639c61&idx=1&mid=2247484119&scene=21&sn=d171b28a00d42549d279498944a98519#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c151cb6748476008dab2f4e6c6264f5d19678305955c85cec1b619e56e8f7457b7357fb9&idx=1&mid=2247484167&scene=21&sn=7b00b4333ab2722f25f12586b70667ca#wechat_redirect
[Vue]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c146cb67485015f24f7e9f5862c4c685fc33485fe30e1b375a534b4031978439c554e0c0&idx=1&mid=2247484176&scene=21&sn=5623421ed2678046ed9e438aadf6e26f#wechat_redirect
[Vue 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c116cb674800b2757be9eb27fe20709de0e511b834d8bb6b23171218fa4a1cfd5f87596c&idx=1&mid=2247484224&scene=21&sn=3043891f60d99afcf74dffd6b9b51ff7#wechat_redirect
[Vue_v-show_v-if]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c113cb674805626c614b617491b5e6f7b0050f83106a8a9cd1e640eb8526d43eee01c716&idx=1&mid=2247484229&scene=21&sn=538d5c37cd91c3a2f9431f8fd120fc90#wechat_redirect
[Vue_v-if_v-for]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c130cb674826510f82810856ca589c5b73b8e1385f179b9ba2bc8bab89bb1db3ff6e53ed&idx=1&mid=2247484262&scene=21&sn=cf0928603e7cf14189b4328366f70836#wechat_redirect
[format_png 4]: /images/20221120/cc999ac4bde14bc19704f9bb84173982.png