前端性能优化

宏观方面

1. DNS查询
2. HTTP/SSL
3. TCP
4. 响应解析(SPA/SSR)
5. 浏览器渲染
   浏览器解析html/css，执行js
   解析html(AST) dom tree。可以减少dom层间
   解析css, css tree。优化选择器
   合并成 render tree
   浏览器调用操作系统渲染页面。减少重绘和回流，调用硬件加速

优化策略

1. 减少文件请求的数量和大小

• 缓存，cdn，
• 图片优化，
  jpeg / png / gif / webp / 压缩图片 / 渐进加载(先加载占位->低像素->实际) / 懒加载
• 静态文件优化，
• 浏览器优化
• 文件压缩合并，

2. 减少代码的执行

• 节流防抖，
• 按需加载执行，滚动加载
• 重绘回流
• 框架优化
• html / css / js
  数据结构、算法，

能做哪些优化

1. 代码优化
   框架本身的优化: vue1/2/3, react15/16
   框架的日常写法
   js/css
2. 研发优化/项目深度优化，亮点
   需求优化
   数据量大，网速不稳定，交互需求要求更高
   大文件
   长列表
3. 开发环境的优化 vite, snowpack
4. 人的优化，掌握别人不会的

性能分析工具

1. 使用lighthouse分析网站性能
   cnpm install -g lighthouse / yarn global add lighthouse
   然后在终端输入命令： lighthouse https://www.cnblogs.com/

2. Chrome性能分析工具Coverage使用方法
   打开控制台--》点击‘Sources’--》ctrl+shift+p--》
   在命令窗口输入coverage--》在下边新出现的窗口中点击左上角刷新按钮。

性能监控指标

前端性能指标分析

1. FP首次绘制
2. FCP首次内容绘制
3. FMP首次有效绘制
   如何获取最重要的节点。
   a. 页面进入使用mutationObserver监听dom
   b. 对变化的dom做上标记
   c. 监听load事件
   d. 便利dom tree
   e. 根据元素可视区域，计算元素权重
   f. 遍历父元素，对比合并
   e. 获取权重最高的dom，
   f. 判断是否加载完成
   是否是img/video/audio，判断资源加载时间: performance.getEntries。
   单纯的dom，计算时间变化
   g. 计算FMP
4. TTI可交互时间