前端框架性能

198 阅读1分钟

FMP统计接受(首屏1s最好)

vue的性能优化

react性能优化

只要快一点都算优化

代码优化

  • 框架本身的优化vue1 vue2 vue3每一步做了什么

  • react15 react16

  • VUE1响应式(数据监听,数据变化多的时候)->vue2 组件响应式,组件内dom diff(中和,推拉,单个组件不会过于庞大)->vue3 (treeshaking,proxy做响应式,静态标记,做到按需更新,颗粒度细致,无需时间切片)

  • react15 dom diff(两个对比,dom多的时候)->react 16 fiber (单向链表,浏览器空闲时间计算diff,时间切片计算)

  • 完全对立的架构,都解决不了数据量大卡顿问题

  • 框架的日常斜杠

  • js css

研发优化  基础建设 项目的深度优化

  • 需求(项目不知道怎么描述)

  • 数据量变大,网速变得不稳定,交互要求变得更高

  • 大文件上传

  • 长列表

开发环境优化(vite  snowpack)

人的优化(加班,35岁)

深入了解别人不会的

FMP

真正页面被用户看到的指标

相比于FP,FCP,更贴近实际

没有统一标准,计算方式

1.自己的产品,给个元素打点

2. MutationObserver

3. 趋势计算 dom变化趋势

fiber

并发

react

常规写法 pureComponent Hook

SSR

负载均衡

长列表

虚拟滚动

webpack

bundle-analyzer可视化