这是我参与 8 月更文挑战的第 10 天,活动详情查看:8月更文挑战
前言
在项目开发中,性能永远是第一需求,必须时刻考虑性能问题。
如何避免应用出现性能问题,可以考虑这几个方面:
- 了解常见的性能问题场景
- 时刻注意代码的潜在性能问题
- 注重可重构的代码
- 了解如何使用工具定位性能问题
常见的性能问题场景
了解常见的性能问题场景,在出现性能问题时,能根据经验按优先级先解决影响最大。
在 Web 应用中,最常出现的有两种情况:键盘输入的卡顿、鼠标事件的卡顿。
比如在一个列表页面,搜索框的每一次输入都会引发列表内容的刷新,如果每次刷新都需要消耗较大的性能,那就是有问题的。
再比如一个视图区域 resize
的功能,每一次鼠标的移动都会导致页面组件的更新,这时就可以通过防抖函数(debounce
)来优化性能。
代码的潜在性能问题
在开发的时候时常思考:什么时候可以拆分组件?什么时候出现了优化的空间?...
特别是在 React 中,当页面状态发生变化时组件是否可以高效更新,当组件的粒度越细,React 可优化的空间也越大,diff 算法可以最大程度的保留不变的组件,从而提升性能。
可重构的代码
什么样的代码是可重构的?这就要求代码的耦合性非常低,是一个独立的功能模块,即不依赖外部的变量、不被很多外部模块所依赖。这样的模块在快速实现后,即使存在一定的性能问题,也可以在之后的优化中重构,即保留了可优化的空间。
使用工具定位性能问题
当问题发生时,我们可以通过工具定位问题的位置,比如 React 提供的 Dev Tool
和 Chorme 提供的 Dev Tool
。
结语
综上,是对性能问题的一些概述,具体场景的实践,会有后续的文章跟进。