# front-end_performance_optimization_notes

**Repository Path**: losidk/front-end_performance_optimization_notes

## Basic Information

- **Project Name**: front-end_performance_optimization_notes
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-18
- **Last Updated**: 2021-11-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端性能优化

## 优化方向

### 让网络通信更快速

- 网络通讯的过程

	- 

- 常用策略

	- 服务通信层面（CDN）

		- Content Delivery Network
		- 多节点，让不同区域的用户拿到距离自己最优的节点（时间最优，距离最优）
		- 关键指标

			- 全局负载均衡
			- 缓存系统

				- 重要指标

					- 命中率

						- 当分发节点刚好有用户要获取的数据时，表示当前节点被命中
						- CDN 的命中率越高越好

					- 回源率

						- 当分发节点中没有用户要获取的数据时，当前节点则需要去根节点获取用户请求的数据，这叫做回源
						- CDN的回源率越低越好（5%,超过5%则不属于优质CDN）

		- 通俗： 京东物流（各个本地仓库，有需要先从本地仓库发货）

	- 服务器通信层面（请求次数,基于 http1.1）

		- 注意： 请求次数多，并不意味着请求速度慢，只是需要频繁的建立连接，建立连接才是最消耗时间的
		- 资源合并

			- 雪碧图

		- 域名分片

			- 多域名
			- RFC2616协议规定 每个客户端只能与一个服务器保持2条连接

				- 很多浏览器并没有遵守当前规定

					- chrome 最多并发连接数：6个
					- firefox 最多并发连接数： 8个

			- RFC 7230 已经将上面 2616 中两个并发连接的规定取消了

	- 缓存

		- 强缓存

			- <- expires: Mon,14 Sep 2020 09:02:20 GMT
			- Cache-Control

				- 资源内容长时间内稳定不变，直接设置1年的缓存时间

					- max-age=3153600

						- 说明

							- 资源的内容非常稳定，长时间内都不会发生变更，那么我们就可以声明浏览器/CDN可以长时间缓存该资源（31536000秒，即一年），只要用户不手动清理浏览器缓存，一年内源服务器都不再会收到（当前浏览器/CDN）对该资源的请求

						- 实例

							- <- cache-control: max-age=600

				- 资源经常发生变更

					- no-cache

						- 说明

							- 资源的内容经常发生变化，没有服务器的确认，任何本地缓存的资源都是不可信的，那么我们就可以声明不读取该资源的缓存，需要调用该资源时每次都尝试向源服务器获取
							- 注意

								- no-cache 并不意味着不缓存，他的意思是在使用缓存资源之前，他必须经过服务器的检查（revalidate 也可以实现这个功能）
								- no-store 才是告诉浏览器不要缓存他，此外，must-revalidate 并不意味着必须重新认证，他的前提是资源还在max-age 的缓存期内，否则必须重新认证
								- 在此模式下，你也可以将ETag（你选择的版本ID） 或者 Last-modified 日期添加到响应首部中。客户端下次获取资源时，他会分别通过If-None-Match(与ETage 对应) 和 If-Modified-Since(与Last-Mofied对应)两个请求首部将值发送给服务器。如果服务器发现两次值都是对等的，就返回一个HTTP 304.
								- 如果没有发送ETag 和 Last-Modified, 那么 服务器将时钟返回完整的资源内容
								- 但是这种方法有个缺额点，就是它每次都会去服务器做一次验证，涉及到了网络提取，所以他不如第一个例子妙啊杨可以完全绕过网络

				- 在经常修改内容的静态资源上使用 max-age

					- 当前页面包含文件 /article/ 、 /styles.css 和 /script.js， 他们的缓存策略如下：
					- // 十分钟内不需要重新认证，超过十分钟就需要重新认证
Cache-Control: must-revalidate,max-age=600
					- 当页面文件发生变更时，文件路径会发生变化（如文件名会包含文件算出的哈希），在十分正内，浏览器将会一直使用缓存住的内容，而不去服务器请求最新的资源；超过十分正，在可用的前提下使用 If-Modified-Since 和 If-None-Match 重新进行服务器认证

		- 协商缓存

			- <- last-modified: Fri 07 Aug 2020 02:35:59 GMT
			- -> if-modified-since: Fri, 07 Aug 2020 02:35:59 GMT
			- <- etag: W/"5f2cbe0f-2382"
			- ->if-none-match: W/"5f2cbe0f-2382"

	- 数据传输层面-压缩

		- 数据压缩

			- gzip与 新br

		- 代码文件压缩

			- HTML/CSS/JS 中的注释、空格、长变量名等等

		- 静态资源

			- 字体图标
			- 去除元数据（位置信息、拍照介质、时间等用不到的元信息）
			- 缩小尺寸及分辨率
			- 使用jpg 或者 webp 格式

		- 头与报文

			- http1.1 中减少不必要的头
			- 减少cookie数据量

	- 通讯协议层面

		- http1.1

			- 缺点

				- 文本字符分割的数据流

					- 解析慢且容易出错

				- 臃肿的请求头

					- 平均 460 字节的首部

		- http2

			- 优点

				- 头部压缩

					- 专门的HPACK 压缩算法

						- 索引表
						- 霍夫曼编码

				-  二进制帧传输

					- 帧长度
					- 帧类型
					- 帧标识

				- 链路复用

					- 在 http1.1 中，当客户端向服务端发送请求后，在服务端处理当前请求的时候，当前建立的链接处于等待状态（链接不断开，但是不处理数据），这样就造成了资源浪费，http2 中使用链路复用的方式将当前等待状态的连接利用起来，这样就不用再重复建立链接了

			- 基于http2 的优点，之前在 http1.1 中的一些优化没有必要再做，如 资源合并、域名分片

### 让数据处理更高效