前端性能优化总结-一一网

DNS查询

与服务器交互是先进行DNS查询，得到服务器的IP地址，浏览器会先查询自己的缓存，之后在查询本地HOSTS，如果依然没有，就会发送DNS服务器发送查询请求，一般会话费大约20ms ~ 120ms. 在这里可优化的策略就是预查询dns-prefetch，节省这一部分的时间，当用到的时候直接可以拿到对应的IP

<link rel="dns-prefetch" href="https://cdn.bootcss.com">
复制代码

建立HTTP(TCP)连接

得到服务器IP地址之后，首先会进行TCP三次握手，之后在进行SSL握手(HTTPS)，SSL握手时会向服务器端确认HTTP的版本

HTTP1.0/HTTP1.1时代优化
1. 减少HTTP请求。因为每一个HTTP请求都会发送一次完整的DNS查找，TCP握手，浏览器发送HTTP请求、服务器接收请求、服务器处理请求并返回响应和浏览器就收响应等过程。
2. keep-alive。由于TCP的可靠性，每条独立的TCP都会进行3次握手，因此会将消耗大部分时间。所以为了解决这个问题在header中加入了Connection:Keep-Alive，keep-alive的连接会保持一段时间不断开，后续的请求都会用这一条TCP，但是一个TCP在工作的时候只能处理一个HTTP请求，所以当多个请求时会造成队头阻塞。
HTTP2时代
1. 多路复用。把每一个请求都当作一个流，那么多个请求就变成多个流，请求响应数据分成多个帧，不同流中的帧交错发给对方。
  
  流的概念实现了一个TCP单连接上可以有多个请求，并且这些请求是并行的，能够解决多个请求造成的队头阻塞问题
2. 首部压缩。如果两个请求首部相同，那么会省去这一部分，只需要传输不同的首部字段，进一步减少请求体积。
```
# nginx 配置http2
server {
	listen 443 ssl http2;
	server_name domain.com;
}
复制代码
```

使用服务端渲染

以Vue的SSR和SPA为例

客户端渲染(SPA)
1. 访问客户端渲染的网站
2. 服务器返回一个包含引入资源的语句和<div id="#app"></div>的HTML文件
3. 当必要的资源加载完毕之后执行new Vue()开始实例化并渲染页面
好处：
1. 前后端分离
2. 用户体验好
3. 减轻服务端渲染压力
缺点：
1. 不利于SEO搜索引擎优化
2. 请求次数多，响应慢
3. 首屏加载较慢
服务器端渲染(SSR)
1. 访问服务端渲染的网站
2. 服务器直接返回HTML页面，立即可以渲染页面
3. 当必要资源加载完毕之后开始执行new Vue()开始实例化并接管页面
好处：
1. 只需要一次请求
2. 更好的SEO
缺点：
1. 占用服务器资源
2. 不利于前后端分离，开发效率较低

缓存

缓存的意义在于减少请求，更多的使用本地资源，给用户更好体验的同时，也减轻服务器压力。最佳实践是尽可能的使用强缓存，同时当文件更改的时候让客户端的缓存失效。

缓存分为两类：都是通过Headers来控制，强缓存的优先级大于协商缓存

强缓存
- 服务器通知浏览器一个缓存时间，在缓存时间内，浏览器请求直接使用缓存，而不是直接请求
- 强缓存根据请求头的Expires和Cache-Control来控制
协商缓存
- 一般是在强缓存过期的时候，向服务器发送确认是否需要更新本地缓存，如果不需要更新则返回304，否则会返回整个文件

图片来源：前端缓存总结-HTTP缓存

静态资源使用CDN

CDN是一组分布在多个不同地理位置的Web服务器，服务器越近速度越快，当用户访问时，会从最近的CDN服务器拿，这样的好处是可以分散主服务器的压力，同时带来访问速度的提升和增强稳定性。

文件压缩

合理的文件资源压缩可以有效的减少传输体积，减少返回时间，提高用户体验。

得益于Webpack和Node的发展

HTML的压缩: HtmlWebpackPlugin
CSS的压缩: MiniCssExtractPlugin
HTML的压缩: HtmlWebpackPlugin

在请求中使用Gzip压缩，可以通过向HTTP请求头中的Accept-Encoding头中添加Gzip标识开启这一功能，当然也需要nginx配置开启

Nginx开启方式可以参考juejin.cn/post/684490…

代码层

1. 将CSS放在文件头部，Javascript文件放到底部

所有放到head中的CSS和JS都会阻塞渲染，但是CSS不会阻塞DOM解析

如果需要将JS放在投资部，则需要在script标签中加上defer属性就可以了，异步下载，延迟执行。

2. 图标

使用字体图标iconfont代替图片链接

3. 图片优化

图片压缩
- 工具压缩
- webpack压缩
  
  工程化的项目可以在webpack里面配置image-webpack-loader进行图片压缩
使用图片精灵
使用字体图图标库
使用base64格式
使用css替代图片
使用CDN图片
图片懒加载
响应式图片加载—–媒体查询
渐进式图片
使用webp格式图片，使用之前需要查看下浏览器是否支持