前端性能优化
2023-02-08 本文已影响0人
靴唯白
1.输入URL的那一瞬间浏览器做了什么？
url => 统一资源定位符 俗称网址，是 ip 地址的映射
www 万维网、服务器
https 加密的传输协议（http 和 TCP 之间加了一层 TSL 或者 SSL 的安全层）
baidu.com 域名
1.1 第一次访问
之后再次访问就会将域名解析的ip存在本地 => 读取浏览器缓存
1.2 解析 URL
- 去 DNS 域名系统里面匹配真实的ip地址
- ping 测试连接
1.3 根据真实的 IP 建立连接 TCP 的三次握手
三次握手的目的是为了确保客户端和服务端双方都能够正常的收发信息。
- 第一次握手客户端向服务端发送seq=x
- 第二次握手服务端接收到了客户端发送过来的数据，并且做出响应ack=x+1
+ 服务端知道自己可以正常接收信息
+ 服务端知道客户端可以正常发送信息
- 第三次握手客户端接收到了服务端响应，并且再次发送数据给服务端
+ 客户端知道自己能够正常发送信息
+ 客户端知道自己能够正常接收信息
+ 客户端知道服务端能够正常的发送信息
+ 客户端知道服务端能够正常的接收信息
- 服务端再次接收客户端数据
+ 服务端知道自己能够正常发送信息
+ 服务端知道客户端能够正常接收信息
1.4 拿数据，渲染页面
1.5 四次挥手（断开连接）
目的： 确保前后端双方都能知道断开链接
- 第一次挥手 客户端主动关闭 发送一个seq=u 服务端接收这个请求
- 第二次挥手 服务端接收客户端关闭请求 对客户端做出响应ack=u+1
+ 服务端知道客户端即将关闭
- 第三次挥手 服务端向客户端发起断开请求 客户端接收这个请求
- 第四次挥手 客户端接收到这个请求之后 对服务端做出响应
+ 客户端知道服务端即将关闭
流程图
2. html页面放在浏览器里面是如何渲染的？
渲染流程
3. 什么是性能优化？
- 性能优化：
- 页面加载性能：加载的时间、用户体验
-
- 动画与操作性能：是否流畅无卡顿
- 用 translate定位 脱离文档流，省去了重新渲染dom的操作，浏览器不用重新计算，卡顿少
-
- 内存占用：内存占用过大，浏览器崩掉等
- 内存消耗过度，数据交互过大
- 电量消耗：游戏方面，可以暂不考虑
4. 日常开发过程中从哪些点做性能优化？
- a. 加载
- 减少http请求（精灵图、文件的合并）
- 减小文件大小（资源压缩、图片压缩、视频压缩、代码压缩、ZIP压缩）
- CDN（第三方库、大文件、大图）
- SSR服务端渲染、预渲染
- 懒加载
- 分包：加快主页的加载
- b. 减少dom操作，避免回流，采用文档碎片
5. 优化实践
- 原生js实现懒加载
- 代理模式
