前端性能优化

1.减少http请求

一个完整的http请求需要经历dns查找，tcp握手，浏览器发送http请求，服务器接收请求，服务器处理请求并发回响应，浏览器接收响应等过程。

这是一个接口花费的时间。但是真正下载数据的时间，只有0.45ms，0.45/378.49 = 0.001%
文件越小，这个比例越小，文件越大，这个比例越大。这就是为什么，我们建议将多个小文件合并一个大文件，从而减少http请求。

2.使用http2

1.解析速度快
2.多路复用
http1如果同时发起多个请求，就需要建立多个tcp链接，因为一个tcp连接同时只能处理一个http1请求。
http2可以多个请求共用一个tcp连接，这就是多路复用
3.首部压缩
如果多个请求很多数据都是重复的，如果可以把首部存起来，仅发送不同的部分。就可以节省不少流量，加快请求时间。
4.优先级
http2可以对比较紧急的请求设置比较高的优先级，服务器遇到这个请求优先响应
5.流量控制
6.服务器推送
http2可以对客户端请求发送多个响应。

3.使用服务器渲染

服务端返回html文件，客户端只需要解析html。

• 优点:首屏渲染快，seo好
• 缺点：配置麻烦，增加了服务器的计算压力

vue ssr

客户端渲染过程

1. 访问客户端渲染的网站
2. 服务器端返回一个包含了引入资源语句和
   的html文件
3. 客户端通过http向服务器请求资源，当必要的资源都加载完毕后，执行new Vue()开始实例化并渲染页面。

服务端渲染过程

1. 访问服务端渲染网站
2. 服务器查看当前路由组件需要哪些资源文件，然后将这些文件的内容填充到html文件。如果有ajax请求就会数据预取填充到html中，最后返回html页面
3. 当客户端收到html文件，可以直接渲染，同时加载资源，当资源加载完毕，执行new Vue（）实例化。

4.静态资源使用CDN

5.css文件放头部，js放到底部

6.使用icon字体图标

7.擅用缓存，不重复加载相同的资源

8.压缩文件

gzip 压缩

const CompressionPlugin = require('compression-webpack-plugin')
 // gzip 打包压缩
        plugins: [
            new CompressionPlugin({
                // filename: "[path].gz[query]", //目标资源名称
                filename: '[path][base].gz',
                test: /\.js$|\.html$|\.css/, // 匹配文件名
                threshold: 10240, // 对超过10kb的数据进行压缩
                deleteOriginalAssets: false // 是否删除原文件
            })
        ]

9.图片优化

1. 延迟加载，响应式图片，调整大小，降低质量，webp

10.按需加载代码

11.减少重排重绘

1. 解析html生成dom树
2. 解析css 生成cssom规则
3. 解析js 操作dom和css
4. 合并dom和css 生成渲染树
5. 遍历渲染树开始布局，
6. 将所有图层数据发送给GPU，GPU合并图层显示在屏幕上

12.不要覆盖原生方法

13.降低css选择器的复杂性

14.