反应速度慢的原因可能是什么？

时间：2019-01-05 02:23:10

标签： javascript reactjs performance profiling

我正在支持基于React的CMS，但我陷入了性能问题，因为添加10个新输入字段会使浏览器处理时间增加1秒。这不是我的代码，我没有React的经验。我有分析方面的经验，并对渲染引擎的工作原理有粗略的了解。

我已经钩上了 ReactCompositeComponent._updateRenderedComponent 函数，以查看主要性能瓶颈在哪里，区别似乎是我获得了很多成功。在日历输入中添加40个转发器项目会导致这种性能差异（表单必须支持200多个输入，当前需要20秒）：

  • div ：250毫秒-> 1600毫秒，1300次点击-> 8100次点击
  • ConnectedField（props）：20毫秒-> 370毫秒，70次点击-> 2300次点击
  • Calendar（）：10毫秒-> 300毫秒，20次点击-> 1200次点击（但我只添加了40个日历输入）
  • ConnectedFieldArray（）：30毫秒-> 250毫秒，200次点击-> 1300次

是什么会导致仅添加几个元素就产生如此多的匹配？

这是Chrome DevTool分析图（单击可获得完整尺寸）：

1 个答案:

答案 0 :(得分：0)

可能有许多原因影响反应性能

  1. 在渲染长列表时键的作用，键对于比较实际dom和虚拟dom是至关重要的。

  2. 突变对象，如果对对象进行突变，则ShouldComponentUpdate无法执行检查并毫不费力地触发更新生命周期。

  3. API仅在ComponentDidMount中调用，安装部件中的任何其他生命周期都将不必要地调用render方法。

  4. 使用Debounce / Throttle作为输入参数，以避免不必要的函数/ api调用

  5. 使用虚拟化的React库，同时渲染长列表，因为它将减少大量的dom元素。

  6. 使用插件react-addons-perf计算性能。

  7. 早期绑定函数，避免绑定到渲染函数

相关问题
最新问题