React
React的优点有很多,现在很多应用都接入React这个框架。
在我看来,有下列优点:
- Facebook团队研发并维护——有团队维护更新且有质量保证
- 在MVVM结构下只起View的作用——简单接入,不需要花费大量人力重构代码
- 组件化形式构建Web应用——复用性强,提高开发效率
- 用Virtual DOM减少对DOM的频繁操作提高页面性能——批量操作减少重排(reflows)和重绘(repaints)次数——性能对比旧的方式有提高
React对重排和重绘的提高
雅虎性能优化比较重要的点,老司机自行忽略。
如下图,HTML被浏览器解析为DOM树,CSS代码加载进来解析为样式结构体,两者关联组成渲染树,之后浏览器把渲染树绘制出来就是我们看到的网页了。这里如果我们对DOM树或者样式结构体做一些操作,如删除某个节点,样式改为隐藏(display:none)等等,会触发重排进而导致重绘。
触发重排的条件
- DOM元素的数量属性变化
- DOM树的结构变化——节点的增减、移动
-
某些布局属性的读取和设置触发重排——offsetTop/offsetWidth/scrollTop等等
导致子级、后续兄弟元素、父节点因重新计算布局而重排
触发重绘的条件
- 简单样式属性的变化——颜色、背景色等
- 重排导致的重绘
而React维护了一个Virtual DOM将短时间的操作合并起来一起同步到DOM,所以这也是它对整个前端领域提出的最重要的改变。
为什么引入Reflux?
延伸阅读
- ssh框架 2016-09-30
- 阿里移动安全 [无线安全]玩转无线电——不安全的蓝牙锁 2017-07-26
- 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 论文笔记【图片目标分割】 2017-07-26
- 词向量-LRWE模型-更好地识别反义词同义词 2017-07-26
- 从栈不平衡问题 理解 calling convention 2017-07-26
- php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明 2017-07-26
- Swift实现JSON转Model - HandyJSON使用讲解 2017-07-26
- 阿里移动安全 Android端恶意锁屏勒索应用分析 2017-07-26
- 集合结合数据结构来看看(二) 2017-07-26
学习是年轻人改变自己的最好方式