简简单单介绍
在前端项目中,优化是不可或缺的一环。在工作过程中,优化用户体验也是必不可少的
从哪几个方面入手呢?
- 就先从清这方面开始说吧?
答:为什么叫清呢?在项目中肯定用到过定时器、延时器的功能函数吧,什么场景需要用到例如:实时获取数据、长列表的滚动、数字变换等都需要用到呀!文章最后可以解释!!!
- 再来就是从多缓存 (文章最后)
- 然后就是懒系列了 (文章最后)
- 最后就是少的系列了(文章最后)
为什么要清除它(清)?
就是为了避免内存泄漏;如果没有清除的话;定时器还是会执行,占用系统资源导致性能的下降
为什么要叫多缓存呢?
因为有的时候数据过于多每次加载和获取数据的时候非常慢可以通过一些缓存提高访问的速度。在项目中怎么做缓存呢?
- 如果应用程序依赖于外部 API,可以将 API 返回的数据进行缓存;在后面的请求中直接拿取缓存的数据
- 会话数据:某些用户相关的数据,如登录状态、购物车信息等,可以进行会话缓存;避免进行重新验证
- vue
- 计算函数(computed)
- watch(侦听器)
- 组件缓存(keep-alive)
- 通过状态管理库(vuex、pinia)
- react
- 可以通过useMemo函数进行缓存:将需要长期计算的数据进行缓存,每次在页面上调用的时候直接拿上一次的结果
- 函数缓存(useCallback):通过这个记忆化函数来避免不必要的渲染
- 状态管理库(Redux)
为什么要叫懒呢?
懒你们都应该清除那就是懒加载、懒路由呗
- 图片懒加载:就是可以看见可视化区域的图片;等到用户滚动的时候在进行加载
- 延时加载:将不必要的数据:懒加载的方式进行延迟加载。将这些资源的加载推迟到用户需要时再进行,可以加快页面的初始加载速度
- 采用延迟加载的策略,只在需要时才去加载相应的路由组件,从而减少初始加载的资源和提高应用的加载速度
为什么要叫少呢?
少就很有意思了(你在项目中给我少搞一些事情、少请求吧)
少搞事情和少请求都是一回事的:用户做一些操作输入框啊、页面绘制...
怎么做到性能想必大家都知道了吧:防抖、节流