前端性能优化---总结

49 阅读1分钟

性能优化总结:减少请求次数、减小资源大小、提高响应和加载速度、优化资源加载时机、优化加载方式。

如何获取指标

  • Lighthouse插件
  • web-vitals-extension插件
  • Chrome DevTools ----(Performance)

指标优化有哪些

image.png

核心性能指标

1743257134027.jpg

输入URL到页面加载发生了什么

image.png

网络层面优化

network

React做性能优化

  • useMemo: 把“创建”函数和依赖项数组作为参数传入useMemo,它仅会在某个依赖项改变时才重新计算 memoized 值, 主要用于将变量缓存

  • useCallbackuseMemo的语法糖,返回一个 memoized 回调函数。主要用于将函数缓存

  • React.memo:类似于PureComponent,主要是为了在父组件渲染时防止对没有状态变化的子组件进行不必要的渲染