本文梳理最近在项目中进行的一次代码优化.在文章的结尾会总结一些自己在代码优化上的一些思考.

优化项目背景

业务背景是创建订单场景允许用户上传excel数据,这些excel数据经过服务端的处理后会在前端页面上回显到表单上.需要优化的一个问题是当用户上传excel数据行数过多的时候,页面会卡顿甚至卡死崩溃.了解了业务背景,在着手解决问题之前先需要熟悉代码的结构,这样才能发现问题所在.

在页面全局数据的管理中,有Context/State两种方式,在之前的文章这样的react代码不好闻中梳理了Context结合form在渲染上的一些问题.

在Form组件内有普通的FormItem组件和FormList组件. 通过分析页面数据和组件并且结合实际的调试过程,发现全局的属性变更导致FormList频繁渲染从而造成页面卡顿.

优化思路

优化的思路主要有两个方面:

在减少重复渲染上,需要将共享的全局属性通过统一的状态管理方案聚合起来,这里使用了Zustand来替换原来的Context/State方案.Zustand通过Selectors可以实现更新的订阅,就能一定程度上减少组件的重复渲染.

在降低页面的渲染成本上,在FormList上实现了分页渲染功能.这样在大量数据的情况下,每次只会渲染当前页就减少了每次的页面渲染量. 最后的结果通过这两处的改动在上传多行excel数据的时候,页面也能正常的展示了.

优化代码的一些思考

上面的优化思路似乎不值一提,笔者也因为代码'洁癖'的原因,做过几次类似的代码���化.代码优化并不是一刀子买卖,是一个长期的过程.那怎么优化或者在优化过程中需要注意哪些问题是一个比较值得思考的问题.下面是自己的一点思考:

重构的问题

通常遇到'改不动'的代码的时候,进入脑海的第一个思路就是重构.我理解这里的重构可能是因为之前的技术方案不在符合当前的业务形式.简单理解重构可能是按照当前的业务重写实现一遍业务代码并且尝试解决之前存在的问题.

重构的重点应该在解决之前的问题并且能降低相似问题发生的可能性.比如在页面性能上一些弹层组件可以异步加载,那就可以将这部分组件导出位置统一.这样后续添加其他异步组件的时候就可以按照异步加载的方式添加了.

产品(业务)梳理

在开发中也容易陷入当局者迷的场景.这个时候就应该跳出来,换个思路去看问题.在面对问题的时候,不光想着做加法也可以做做减法.比如一个功能在实现逻辑上很复杂,维护成本较高,那是不是可以实现一个'减配'版本.

数据

在做优化代码相关事的时候,在做之前要想好数据相关的事情.没有数据指标就无法衡量做的事的标准.没有数据指标也无法把一件事做成一个长期可跟进的事.笔者曾经做过一次代码性能优化,在前期对数据缺少调研,只想着按照思路去做.在最后需要产出数据的时候,发现数据变化并不是很大.这个就是因为对之前的数据缺少理解没有排除噪音.

在讨论数据的时候,其实并不是在考虑怎么让结果好看,而是从前期的数据调研中能发掘一些思路,形成一些长期跟进的路线.