2021-04-01

前端性能优化

对于前端来说，性能优化无非就是执行相隔方面，分别是。文件获取优化和代码执行优化

文件获取优化

• 加载文件 css js
• http 协议的细节‘
• 从输入 url 到页面渲染发生了什么
• 大厂怎么上线前端的代码

代码执行优化

• 节流 防抖
• 重绘 回流
• vue react（ssr）常见优化，代码执行的更少，dom 的操作更少
• 浏览器是如何操作 DOM 的

---

文件优化

网络协议

网络协议是很多性能优化的基础，了解了网络协议，很多优化也就是会呼之欲出

• ip 协议 （寻址） 通过 ip 找到准确的地址 如 39.96.42.170 找到具体的地址
• ip 协议之上，使用 tcp 协议来确保数据的完整有序
  1. 三次握手（每次请求都会有三次捂手）-- 所以要尽量少的请求来提高性能
  2. 滑动窗口
  3. 慢启动
  4. 挥手
  5. 。。。。
• 在 tcp 协议之上，我们使用 http 协议来作为网页传输的协议（应用层）
• udp 协议也是基于 ip 的，不考虑数据的完整和有序。（那为啥还需要 udp 协议呢？）
  1. 性能更高（因为不像 tcp 一样要考虑一大堆的事情）
  2. 不在乎丢包 （音频 视频聊天 直播）
  3. 包比较小 不需要分包，只需要重发即可的情况下可以使用
  4. 直播之类就需要使用 udp 协议
  5. DNS 是基于 UDP 协议的

http 是如何聊天的？

1. 建立连接 – （主要是 TCP）
   • 服务器 你在吗
   • 我在
   • 那我要给你发数据了

少加载文件

• 如何少加载文件（合理李颖浏览器缓存文件）

  1. 首次访问 http 请求 server 正常返回

     • 返回响应头加上强缓存说明，如expires:wed 11 aug 2019或者cache-control:max-age=300000（优先级更高）
     • 两个 header 都是都断告诉浏览器，这个文件，多少时间内是不过期的
     • 浏览器接收到这两个 header 之后，就会将文件给缓存下来

  2. 在未过期的时间内再次请求这个文件

     • 浏览器识别到 强缓存命中，请求不发出，直接用本地缓存的文件 状态码 200 from cache

  3. 过期后再次访问这个文件，浏览器强缓存失效，这时候就会采用协商缓存（因为毕竟这个文件浏览器存在过）

     • 这时候浏览器不会直接发出请求，而是会问一下后端，在 header 上加上请求头，后端会告诉浏览器是否文件还存在，如果好存在，就可以继续直接使用缓存

  4. 如果后端返回原来那么文件内容已经被修改了，不存在了，那就只能重新加载了。

  5. 以上文件缓存都是浏览器本身自己的机制，js 都控制不到，但是我们可以通过工程化，来更搞笑的利用缓存

• 如何高效利用缓存

  1. 缓存时间过长

     • 发布上线了，用户还用缓存，会有 BUG

  2. 缓存时间过短

     • 重复加载的文件太多，浪费带宽

  3. 模板 （html） 静态资源（css js img video audio…）

     • 模板或者 html 是不能有缓存的，这个是入口，一旦新代码发布上线，就没办法加载了

     • 文件+哈希 - - 上线之后，要求用户用文件+哈希的方式来解决了（现在 webpack 工程化已经很成熟了）现在是先上线 js 再上线 html

       

       现在 webpack 打包之后的文件都是这样文件名+哈希的形式

优化策略

在明白了网络协议的原理之后，我们就可以知道如何优化了

• 长连接
• 减少文件体积
  1. js 打包压缩
  2. 图片压缩
  3. geip
• 减少文件请求的次数
  1. 雪碧图
  2. js，css 打包
  3. 缓存控制
  4. 懒加载
• 减少用户和服务器的距离 （比如服务器在北京，人在美国）
  1. cdn - - 简单理解就是将文件传在 cdn 上，如人在北京，访问长沙的站，就可以优先从北京的 cdn 机房上获取，就不用到长沙的机房上获取
• 本地缓存

图片优化

图片通常是最占流量的，PC 端平均加载图片大小是 600k，就比 js 打包之后的文件还打，所针对图片的优化，是受益非常不错的

不同的场景，使用不同的类型

• jpg
  1. 有损压缩
  2. 体积小，不支持透明
  3. 用于背景图、轮播图
• png
  1. 无损压缩，质量高，支持透明
  2. 色彩线条更加丰富，常用小图，如 logo，商品 icon
• svg
  1. 矢量图，体积小
  2. 渲染成本、学习成本

本地缓存

cookie localstroage sessionStroage indexDB

• cookie

1. 最早、体积限定、性能浪费、所有请求都带上所有当前域名的 cookie
2. web stroage
   • LocalStroage 和 SessionStroage
   • 存储量大，不自动发给服务端、js 控制
3. indexdb
   • 运行在浏览器上的非关系型数据库
4. Pwa
   • 基于缓存技术的应用模型