一、前言
关于react的性能优化,有很多方面可以去做,而其中避免重复渲染又是比较重要的一点,那么为什么react会重复渲染,我们又该如何避免重复渲染呢,关于这方面官方其实早有说明:避免重复渲染,这里我就不赘述了。这次我主要是想对目前应用比较多的两种解决方案进行一次性能对比,分别是immutablejs和mobx,作为参考我把没有任何优化的redux也加入进来,对这三者在页面首次加载速度、用户点击执行一个操作的响应速度进行一系列的测试,最终根据测试结果得出结论。
二、采集数据
1、测试对象
测试对象很简单就是一个todolist:
2、测试工具
(一)chrome自带的performance工具,如下图所示:
3、测试方法
(一)前提说明:
(二)页面首次渲染时间测试:
(三)点击完成某个todo页面渲染时间测试:
通过以上方法反复测试就得到了测试数据,那么在第二篇里我奖对获得到的数据进行分析。
如对本文有疑问, 点击进行留言回复!!
清除新版Google Chrome浏览器中表单控件(input,button...)默认的黑色边框
荐 20200714——git/mac配置/项目运行步骤/一些报错
antd 菜单组件 使用时报错:Cannot read property ‘isRootMenu‘ of undefined
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来
硬件仪表盘账号建立指导(一) --WHQL认证测试结果提交账号(一)
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系
网友评论