前端性能优化总结 ~进阶篇

简短概括

1. 前端性能优化
2. 前端性能监控
3. 框架性能优化

一、前端性能优化

1. 从输入url到页面展现发生了什么？（前端必了解，优化的重点）
2. 网络优化
3. 浏览器优化

先简单概括一下输入URL并回车发的过程；

• 回车
• DNS解析：将域名解析成IP地址；
• TCP连接：TCP三次握手；
• 发送HTTP请求；
• 服务器处理请求并返回HTTP报文；
• 浏览器解析渲染页面
• 断开连接：TCP四次挥手

具体说明：????
1、URL
前端工程师都应该知道 http://www.baidu.com由：协议、域名、端口号。（如若不知，请移步百度）重点词汇：同源策略

2、DNS解析（网络层面优化重点）
域名-》dns解析

• IP地址（不解释）

• 域名解析定义
  DNS是一个网络服务器，DNS协议提供通过域名查找IP地址，或逆向从IP地址反查域名的服务。

• 浏览器如何查询URL对应的IP？
  DNS域名解析分为递归查询和迭代查询两种方式，现一般为迭代查询。

  DNS应用场景

  • CDN就是利用DNS的重定向技术，DNS服务器会返回一个跟用户最接近的点的IP地址给用户，CDN节点的服务器负责相应用户的请求，提供所系的内容。
  • dns-prefetch是一种DNS预解析技术。当你浏览网页时，浏览器会加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行DNS的解析，减少用户等待时间，提高用户体验。

OSI参考模型与TCP/IP四层模型

3. TCP连接
   客户端和服务端建立TCP连接需要三次握手。过程如下：
   

1. 客户端发送一个带 SYN=1，Seq=X 的数据包到服务器端口（第一次握手，由浏览器发起，告诉服务器我要发送请求了）

2. 服务器发回一个带 SYN=1， ACK=X+1， Seq=Y 的响应包以示传达确认信息（第二次握手，由服务器发起，告诉浏览器我准备接受了，你赶紧发送吧）

3. 客户端再回传一个带 ACK=Y+1， Seq=Z 的数据包，代表“握手结束”（第三次握手，由浏览器发送，告诉服务器，我马上就发了，准备接受吧）
   说明：
   ACK：确认标识，用于表示对数据包的成功接收。
   SYN：同步标识，表示TCP连接已初始化。

三次握手的目的：为了防止已经失效的连接请求报文段突然又传送到了服务器端，从而产生错误。

4. 发送HHTP请求（*网络优化）

   请求报文由请求行、请求头和请求体三部分组成。
   1）请求行包含请求方法、url和协议版本。
   2）请求头包含请求的附加信息，由键值对组成。如Host:github.com、User-Agent：""、Connection:keep-alive以及Cookie。
   3）请求体主要是请求参数（Query String Parameters）。
   注意：在发送HTTP请求的过程中，要先考虑浏览器缓存情况。缓存又分为强制缓存和协商缓存。

   详细资料：请查看《图解HTTP》

5. 服务器处理请求并返回HTTP报文

   每台服务器上都会安装处理请求的应用——Web server。常见的web server产品有apache、nginx、IIS、Lighttpd等。

6. 浏览器解析渲染页面（*浏览器优化）
   
   1）HTML解析，处理HTML标记并构建DOM树。
   2）CSS解析，处理CSS标记并构建CSSOM树。
   3）将DOM树和CSSOM合并称render tree(渲染树)。将每条css规则按照【从右至左】的方式在dom树上进行逆向匹配，然后生成具有样式规则描述的渲染树。
   4）渲染树布局，计算每个节点的集合信息。包括repaint和reflow。
   5）渲染树绘制，将每个节点绘制到屏幕上。

   重绘与重排（重排 又叫 回流）
   1）重排 (html改变) 一般是位置，大小，节点变化引起文档空间变化时发生的。
   引起重排：
   添加或删除可见的DOM元素
   元素的位置发生变化
   元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
   内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
   页面一开始渲染的时候（这肯定避免不了）
   浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
   2）重绘（css改变）一般是颜色等不引起文档结构变化时发生的。
   注：重绘不一定导致重排，但重排一定会导致重绘。

7. 断开连接：TCP四次挥手

   当数据传送完毕，需要断开 tcp 连接，此时发起 tcp 四次挥手。

1. 发起方向被动方发送报文，Fin、Ack、Seq，表示已经没有数据传输了。并进入 FIN_WAIT_1 状态。(第一次挥手：由浏览器发起的，发送给服务器，我请求报文发送完了，你准备关闭吧)

2. 被动方发送报文，Ack、Seq，表示同意关闭请求。此时主机发起方进入 FIN_WAIT_2 状态。(第二次挥手：由服务器发起的，告诉浏览器，我请求报文接受完了，我准备关闭了，你也准备吧)

3. 被动方向发起方发送报文段，Fin、Ack、Seq，请求关闭连接。并进入 LAST_ACK 状态。(第三次挥手：由服务器发起，告诉浏览器，我响应报文发送完了，你准备关闭吧)

4. 发起方向被动方发送报文段，Ack、Seq。然后进入等待 TIME_WAIT 状态。被动方收到发起方的报文段以后关闭连接。发起方等待一定时间未收到回复，则正常关闭。(第四次挥手：由浏览器发起，告诉服务器，我响应报文接受完了，我准备关闭了，你也准备吧)

TCP与UDP区别总结：

相同点：TCP和UDP都是网络层之上的，传输层协议，都能都能保护网络层的传输，双方的通信都需要开放端口，TCP和UDP中都存在复用和分用技术。

不同点：TCP是可靠传输的，UDP是不可靠传输的。

										优化特点

1、⽂件加载的更少

1) 缓存，CDN   （百度关键词：解析Web缓存及其最佳实践）

2) 图⽚优化

3) 静态⽂件优化

4) 浏览器优化

5) ⽂件合并压缩等雅⻁军规常规操作（百度关键词：雅虎的35条军规）

2、代码执⾏的更少

1）节流防抖 

2）按需执⾏

3）回流重绘

4）框架优化（⽐如vue3的静态标记）

5）html、css、javascript

前端优化性能监控（待完成~）