宏观方面
- DNS查询
- HTTP/SSL
- TCP
- 响应解析(SPA/SSR)
- 浏览器渲染
浏览器解析html/css，执行js
解析html(AST) dom tree。可以减少dom层间
解析css, css tree。优化选择器
合并成 render tree
浏览器调用操作系统渲染页面。减少重绘和回流，调用硬件加速
优化策略
- 减少文件请求的数量和大小
- 缓存，cdn，
- 图片优化，
jpeg / png / gif / webp / 压缩图片 / 渐进加载(先加载占位->低像素->实际) / 懒加载 - 静态文件优化，
- 浏览器优化
- 文件压缩合并，
- 减少代码的执行
- 节流防抖，
- 按需加载执行，滚动加载
- 重绘回流
- 框架优化
- html / css / js
数据结构、算法，
能做哪些优化
- 代码优化
框架本身的优化: vue1/2/3, react15/16
框架的日常写法
js/css - 研发优化/项目深度优化，亮点
需求优化
数据量大，网速不稳定，交互需求要求更高
大文件
长列表 - 开发环境的优化 vite, snowpack
- 人的优化，掌握别人不会的
性能分析工具
使用lighthouse分析网站性能
cnpm install -g lighthouse / yarn global add lighthouse
然后在终端输入命令： lighthouse https://www.cnblogs.com/Chrome性能分析工具Coverage使用方法
打开控制台--》点击‘Sources’--》ctrl+shift+p--》
在命令窗口输入coverage--》在下边新出现的窗口中点击左上角刷新按钮。
性能监控指标
前端性能指标分析
- FP首次绘制
- FCP首次内容绘制
- FMP首次有效绘制
如何获取最重要的节点。
a. 页面进入使用mutationObserver监听dom
b. 对变化的dom做上标记
c. 监听load事件
d. 便利dom tree
e. 根据元素可视区域，计算元素权重
f. 遍历父元素，对比合并
e. 获取权重最高的dom，
f. 判断是否加载完成
是否是img/video/audio，判断资源加载时间: performance.getEntries。
单纯的dom，计算时间变化
g. 计算FMP - TTI可交互时间
