React性能优化资料(文章)搜集整理(持续更新)
2018-01-04 11:52
387 查看
第一次查阅文章-2018-01-04
资料整理
最近公司做了一个项目,需要前端做一些优化,查阅了一些资料,放在这里,以文章为主,留作以后参考。React性能优化总结—segmentfault
React性能优化总结—github
React移动web极致优化—github(腾讯全端 AlloyTeam 团队)
使用Perf工具研究React Key对渲染的影响
React组件性能调优—react-china
知识整理
虚拟DOM比较的时机生成虚拟DOM并进行比对发生在render()后,而不是render()前。
进入render并不意味着一定会重新渲染,也许仅进行了虚拟DOM比较,即diff算法。
[优化点1]在diff算法执行前比较state和props,确定是否进行虚拟DOM比较。
shouldComponentUpdate函数,return false,就不会进入render()函数,也不会进行虚拟DOM的对比。
[优化点2]map里面添加key,并且key不要使用index(可变的)。
使用Perf工具研究React Key对渲染的影响这篇文章详细讲解了为什么不用的原因,但是因为项目React版本号太高,导致不能运行性能检测工具(React.addons.Perf),使用index作为key,确实会导致很多问题,不仅仅是性能方面。
[优化点3]使用immutable
因为项目已经基本开发完成,将models中的数据更改为immutable工程量太大,这一次没有做这部分的优化。
优化效果
今天下午试了一下优化效果,使用同步服务大量更新model,更新2000+次。使用performance记录的情况下,如果没有shouldComponentUpdate优化,时间在40+s
使用performance记录的情况下,有shouldComponentUpdate优化,时间在30s左右。
相关文章推荐
- 【React自制全家桶】六、React性能优化(持续更新总结)
- web 性能笔记整理(持续更新)
- 比较好的 文章博客整理 持续更新。。。
- SQL性能优化整合持续更新
- docker学习资料整理(持续更新中..)
- JAVA性能优化-持续更新
- 笔试面试题整理,慢慢搜集....持续更新
- 性能优化资料整理
- 300+篇运维、数据库等实战资料免费下载(文章+PDF+视频,持续更新)
- JS代码在IE和Firefox间的区别(独家搜集归纳整理,持续更新中)
- SQL Server 2000 一些有用的SQL语句搜集整理(持续更新 )
- 整理jQuery学习资料---持续更新...
- iOS 开发学习资料整理(持续更新)
- SQL的优化整理以及时间信息(持续更新)+ 中级以上sql
- 从零开始学iOS开发,15条建议---资料整理(持续更新)
- SQL Server 性能调优化 (2005-02-21) 来源:天行者网络搜集整理
- 系统架构好文章整理--持续更新
- [总结]vue开发常见知识点及问题资料整理(持续更新)
- JS代码在IE和Firefox间的区别(独家搜集归纳整理,持续更新中)
- ASP.NET应用程序性能优化(根据资料归纳整理)