Web性能优化之降低渲染次数

SPA应用的优势本来是流畅化的类App体验，但是随着业务功能的增加，代码逐步变得臃肿，性能也会出现瓶颈，因此就进入一个课题-性能优化。

其中一个优化的手段就是降低渲染次数。

这里以React的实际代码为例，当然Angular，Vue类似。

无论是哪个JS框架，实际上都是动态渲染新Dom，而框架带来的组件化将整个页面切割为N个组件，因此渲染更新也就成了局部，但是如果使用不当就会出现重复渲染，多余渲染问题，所以对应就应该降低渲染次数，说白了就是只在该渲染时，该渲染的元素身上，执行渲染。

React下的具体优化措施

React针对类组件提供了 shouldComponentUpdate钩子，默认情况下props，state只要改变就会re-render，当然还有一种情况就是父组件只要render，子组件也会re-render，即使参数没有变化。

react15.3+提供了pureComponent类，这个类实现了shouldComponentUpdate方法，具体实现就是对参数做了浅比较，因此如果没变，就不会执行渲染。对应pureComponent解决类组件的渲染问题，React.memo16.6+ 解决的事函数组件的渲染问题，两者目的与实现一样。

似乎，我们把组件都切换到pureComponent或者memo就解决了？肯定不是。

这里的实现是浅比较，如果是基本数据类型，实际上这个比较就简单准确，但是如果是对象引用，就也会存在实际上数据相等，但还是重复刷新的问题，因此取决于参数类型，选择对应的优化手段，最终的措施就是shouldComponentUpdate控制渲染次数

举个例子

在最近的Web调优中，footer我发现共渲染了7次，该组件依赖了很多个redux的对象，确实也用到了，这时继承pureComponent并不可以解决问题，因为参数是非基本数据类型， 因此我只能根据实际的对象值做业务逻辑判断，确定需要渲染的情况，最终渲染2次，且正确。7/2，优化一大半。

对于页面的复杂交互部分更为明显，越是外围的组件，冗余的渲染，对其本身及N层嵌套的组件都会产生影响，细思恐极。

关于redux的使用不当造成的渲染增加

在react 前端架子中，很多组件会关联了redux，这中间很容易出现一个问题是直接连接的对象过大，比如是个person，但是正如上面所说，person name才是真正需要关心消费的，但是因为关联的过大，person其它属性的变动都会引起这个组件的无端渲染。这种使用就是不当的，因此连接redux，需要在合适的对象，合适的层级上才对。

写在最后

JS操作Dom的代价是高昂的，因此降低操作频次是前端一个努力的目标。