回流和重绘

理解浏览器的重绘和回流

css性能能让javascript变慢?

频繁触发重绘与回流,会导致UI频繁渲染,最终导致js变慢

回流:当render tree 中的一部分(全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流。

当页面布局和几何属性改变时就需要回流

重绘:当render tree 中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局,比如background-color

回流一定会引起重绘,但是重绘不一定引起回流

触发页面布局的属性

 盒子模型相关属性会触发重布局

 定位属性及浮动也会触发重布局

  改变节点内部文字结构也会触发重布局

 

将频繁重绘回流的DOM元素单独作为一个独立的图层,那么这个DOM的重绘和回流只会影响这一个图层

 

 

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页