Get a better performance for React SPA on mobile

1. React单页应用性能调优
seanlong@outlook.com

2. React 在移动端有性能问题？
https://aerotwist.com/blog/react-plus-performance-equals-what/

3. 因为React做了不擅长的事
This case would simply construct the virtual DOM and then draw it on real DOM.
There are no DOM changes, which Virtual DOM could excel at.
https://discuss.reactjs.org/t/reactjs-perf-on-mobile/781/4
Virtual DOM只能帮助开发者免去手动优化DOM麻烦，开发者还需要特别的设计来规
避性能瓶颈：
● 比如使用shouldComponentUpdate避免不必要的渲染
● 比如使用immutable.js来提高数据变化跟踪效率

4. 单页应用的Virtual DOM代价
● 从Virtual DOM到真实DOM的重头构建是费时的，尤其在移动端。
○ http://sealedabstract.com/rants/why-mobile-web-apps-are-slow/
○ https://meta.discourse.org/t/the-state-of-javascript-on-android-in-2015-is-
poor/33889
● 对于单页应用来说，在路由切换时会导致Virtual DOM到DOM的重新构建，易形
成性能瓶颈，尤其当返回一个DOM已变得庞大的页面。
Root
Home
Root
Feed
/home /feed/:id
Root
Home
/home
click link backward

5. 数据说话
目标路由页面节点数量的变化: 750 -> 1200 -> 2000 -> 4000 -> 6000。基于小米2S + Chrome46。

6. 引用计数路由状态树
Root
Home
Root
Home Feed
/home /feed/:id
1
1
1
2
1
Root
Home Feed
/home
1
01
make page
invsible, detach
event handlers
make page visible,
attach event handlers,
maybe update props

7. 稍复杂的情况
Root
Home
Root
Home
Top
/home /home/top
1
1
2
2
1
Root
Home
Top
/home
1
0
1
Root
Home
/feed/:id
3
2
Feed
1
Top
1
1

8. 数据说话
目标路由页面节点数量的变化: 750 -> 1200 -> 2000 -> 4000 -> 6000。基于小米2S + Chrome46。

9. 优化Layout,Paint
在现代浏览器中我们可以将路由页面整体提升到composting layer，然后通过修改只
影响composite的属性来减少layout, paint所需时间。

10. 总结
● 在移动端单页应用的路由切换时易导致React的Virtual DOM计算瓶颈
● 在使用shouldComponentUpdate基本优化的基础上运用引用计数路由状态树和
合并层优化后能获得较大的性能提升。
● 其他可能的优化手段
○ 只在渲染可视区域的元素。
○ 在Web Worker里面做并行的Virtual DOM计算。
○ 在内核层面实现DOM tree的缓存，类似于bfcache。

11. Thanks!