React 性能优化:性能永远是第一需求

405 阅读2分钟

这是我参与 8 月更文挑战的第 10 天,活动详情查看:8月更文挑战

前言

在项目开发中,性能永远是第一需求,必须时刻考虑性能问题。

如何避免应用出现性能问题,可以考虑这几个方面:

  • 了解常见的性能问题场景
  • 时刻注意代码的潜在性能问题
  • 注重可重构的代码
  • 了解如何使用工具定位性能问题

常见的性能问题场景

了解常见的性能问题场景,在出现性能问题时,能根据经验按优先级先解决影响最大。

在 Web 应用中,最常出现的有两种情况:键盘输入的卡顿鼠标事件的卡顿

比如在一个列表页面,搜索框的每一次输入都会引发列表内容的刷新,如果每次刷新都需要消耗较大的性能,那就是有问题的。

table.png

再比如一个视图区域 resize 的功能,每一次鼠标的移动都会导致页面组件的更新,这时就可以通过防抖函数(debounce)来优化性能。

resize.gif

代码的潜在性能问题

在开发的时候时常思考:什么时候可以拆分组件?什么时候出现了优化的空间?...

特别是在 React 中,当页面状态发生变化时组件是否可以高效更新,当组件的粒度越细,React 可优化的空间也越大,diff 算法可以最大程度的保留不变的组件,从而提升性能。

可重构的代码

什么样的代码是可重构的?这就要求代码的耦合性非常低,是一个独立的功能模块,即不依赖外部的变量、不被很多外部模块所依赖。这样的模块在快速实现后,即使存在一定的性能问题,也可以在之后的优化中重构,即保留了可优化的空间。

使用工具定位性能问题

当问题发生时,我们可以通过工具定位问题的位置,比如 React 提供的 Dev Tool 和 Chorme 提供的 Dev Tool

结语

综上,是对性能问题的一些概述,具体场景的实践,会有后续的文章跟进。

React 性能优化