-
回流（必定产生重绘）
渲染树中的元素因尺寸、布局、显隐的改变重新构建，产生回流
每页至少需一次回流（加载时）
发生时，渲染树中受影响的部分（和后面的元素）被重新构造- 调整窗口的大小
- 改变字体，如果用rem 设置了根目录的字体大小，这样就减少了回流的次数
- 增加或者移除样式表
- 内容的变化，用户在input中输入了文字（这是不可避免的）
- 激活CSS的伪类
- 操作class属性
- 基本操作DOM(包括js中的domcument等)
- 计算offsetWidth与offsetHeight 属性，获取元素在窗口中的位置
- 在html代码中直接设置 style 属性的值，这个降低了代码的利用率，还影响性能
重绘（不一定产生回流）
渲染树中的元素更新不影响布局和尺寸的可见属性（background、visibility）等时，产生重绘-
如何减少
减少对渲染树的操作（合并多次多DOM和样式的修改）和对一些style值的请求- 对尺寸、布局改动频繁的元素abosolute或fixed定位，使之脱离渲染树
- 样式表放在head标签中，脚本放在body结束前。
- 避免多次获取、操作dom节点
- 修改元素的class而不是直接操作样式
例子
top/left是布局类的样式，这个样式的变化会导致回流 - 即指对这些节点以及受这些节点影响的其它节点，进行CSS计算->布局->重绘过程，这个过程的前2步是消耗大量资源的
translate导致重绘- 即在屏幕上重新画一下，不会进行CSS计算和布局这2个性能大户，所以我们认为translate性能上要明显好于top/left
回流和重绘
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- clipsToBounds(UIView)是指视图上的子视图,如果超出父视图的部分就截取掉 masksToBoun...
