欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-17 19:47:10
...

简短概括

  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四层模型

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

  1. TCP连接
    客户端和服务端建立TCP连接需要三次握手。过程如下:
    前端性能优化总结 ~进阶篇
  1. 客户端发送一个带 SYN=1,Seq=X 的数据包到服务器端口(第一次握手,由浏览器发起,告诉服务器我要发送请求了)

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

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

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

  1. 发送HHTP请求(*网络优化)

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

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

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

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

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

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

  4. 断开连接: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

前端优化性能监控(待完成~)