首页IT科技重流和重绘(什么是重绘与回流?)

重流和重绘(什么是重绘与回流?)

时间2025-05-05 11:18:39分类IT科技浏览3741
导读:什么是重绘和回流 1.重绘...

什么是重绘和回流

1.重绘

简单来说就是重新绘画            ,当给一个元素更换颜色           、更换背景                 ,虽然不会影响页面布局      ,但是颜色或背景变了         ,就会重新渲染页面                 ,这就是重绘           。

2.回流

当增加或删除dom节点         ,或者给元素修改宽高时      ,会改变页面布局                 ,那么就会重新构造dom树然后再次进行渲染            ,这就是回流                  。

总结 重绘不会引起dom结构和页面布局的变化   ,只是样式的变化                 ,有重绘不一定有回流      。 回流则是会引起dom结构和页面布局的变化              ,有回流就一定有重绘        。

不管怎么说都是会影响性能                  。

怎么进行优化或减少?

1.多个属性尽量使用简写,例如:boder可以代替boder-width                  、boder-color      、boder-style

2.创建多个dom节点时               ,使用documentfragment创建

3.避免使用table布局

4.避免设置多层内联样式                 ,避免节点层级过多

5.避免使用css表达式

6.将频繁重绘或回流的节点设置为图层   ,图层能够阻止该节点的渲染行为影响到别的节点(例:will-change\video\iframe等标签)            ,浏览器会自动将该节点变为图层

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
打码赚钱可靠吗(打码赚钱如何赚积分-网创新项目:每天花2-3小时,轻松赚点零花钱!(适合新手做))