2020-09-18 前端性能优化

主要分为两个大方面：1、文件加载的更少；2、代码执行的更少

一、从输入URL到浏览器到底发生了什么
第一步，DNS解析，将域名解析为对应的ip地址
第二步，建立TCP连接，经过三次握手直到双方都能明确自己和对方的收发能力是正常的
第三步，发送HTTP/SSL请求
第四步，解析服务器返回的响应
第五步，浏览器渲染页面

PS：
1、TCP三次握手分为以下步骤：
第一次，客户端发送网络包，服务端收到，服务端确认自己的接收正常，以及客户端的发送正常
第二次，服务端发送网络包，客户端收到，客户端确认自己的接收和发送正常，以及服务端的发送和接收正常
第三次，客户端发送网络包，服务端收到，至此服务端确认自己的接收和发送正常，以及客户端的接收和发送正常

2、浏览器渲染页面的步骤：解析HTML、CSS和执行JS

• 解析HTML为DomTree
• 解析CSS为CSSTree
• 合并两个为renderTree
• 浏览器调用相关的API进行渲染(如GUI)

二、优化策略
1、文件加载的更少

• 缓存，CDN
• 图片优化
• 静态文件优化
• 浏览器优化
• 文件合并压缩

2、代码执行的更少

• 节流防抖
• 按需执行
• 回流重绘
• 框架优化(如Vue3静态标记)
• html,css,javascript
• 减少dom操作
• 尽量避免通配符，正则选择运算

后续还会补充。。。