什么是回流(重排 reflow)？什么是重绘(repaint)？如何减少回流、重绘？
什么是回流(重排 reflow)？
回流（重排 reflow）：对DOM树进行渲染，只要修改DOM或修改元素的形状大小，就会触发reflow，reflow的时候，浏览器会使已渲染好受到影响的部分失效，并重新构造这部分，完成reflow后，浏览器会重新绘制受影响的部分到屏幕中
（继昨日每日一题：display:none和visibility:hidden 当display显示及隐藏元素时，显示时占据空间，隐藏时不占空间，隐藏前后DOM结构发生变化，所以需要重新渲染 当visibility显示及隐藏元素时，不论是显示还是隐藏，都占据空间，因此隐藏前后DOM结构未发生变化，所以不需要重新渲染。）
什么是重绘(repaint)？
重绘(repaint)：当我们对DOM的修改导致的样式变化，但未影响几何属性时，浏览器不需要重新计算元素的几何属性，直接可以为该元素绘制新的样式，跳过了回流环节，这个过程就叫重绘。
结论：回流必定会发生重绘，重绘不一定发生回流
在页面交互中存在频繁的回流与重绘，这个过程，会很大程度的影响性能，因为回流所需成本比重绘高的多，so，能用重绘就不要用回流了。
如何减少回流、重绘？
减少回流、重绘就是减少对DOM的操作
1.直接改变className，如果动态改变样式，则使用cssText（减少设置多项内联样式）
2.让要操作的元素进行“离线处理”，处理完后一起更新
当使用DocumentFragment进行缓存操作，引发一次回流和重绘
使用display:none 技术，只引发两次回流和重绘
使用cloneNode(true or false)和replaceChild技术，引发一次回流和重绘
3.不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存
4.让元素脱离动画流，减少render 树的规模
5.牺牲平滑度换取速度
6.避免使用table布局
7.IE中避免使用javascript表达式
最新文章
- Ubuntu16.04安装Samba
- td的所有style
- user_jj两条记录改成一条
- FString的相关文档，另外还有4种LOG的方法
- RPGJS 进阶分析之 如何使用RMXP导出的数据
- IdHttpServer实现webservice（130篇DataSnap文章）
- Android中使用findViewByMe提升组件查找效率
- webgl自学笔记——矩阵变换
- [图论]最大流问题(Maximum flow)的定义
- Eureka配置instanceId显示IP
- python笔记25-sys模块
- java中的线程问题（三）——继承Thread VS 实现Runnable的区别
- Nginx搭建
- 推荐《Java编程思想》
- Docker 学习应用篇之三： Docker的简单实用
- Quick find Helper
- main函数的传参与返回
- hdu 5961 传递 (2016ccpc 合肥站 A题)
- 带SSL证书的httpclient 远程接口工具类
- 墨菲定律&吉德林法则&吉尔伯特定律&沃尔森法则&福克兰定律