什么是重排和重绘

简答

1.重排(重新排列)=> 指元素的位置发生改变的时候浏览器会进行重排

2.重绘(重新绘制)=>指元素的基本样式发生改变是发生重绘,比如颜色等。。。

细答

前提概要(浏览器使用两个引擎进行工作一是渲染引擎,二是js引擎,谷歌使用的渲染引擎是webkit)

1.当我们访问网页时,会向服务器请求资源

2.渲染引擎首先会将html元素生产节点树(dom树)

3.css会被解析成类似dom树一样的css树(比较消耗性能,样式有可能是继承和自身获取,需要遍历,所以我们的dom树层级尽量要小,使用id或者class选择器)

4.浏览器将dom树和css树合成为渲染树

5.浏览器根据渲染树进行布局,输入一个盒子模型,它精确的捕获每个节点在视图内的确切的位置和尺寸,所有相对的测量指值都会转换成为屏幕上的绝对像素,通常这一行为被称为回流和自动重拍

6.在布局完成之后浏览器会立即发出paint stup事件,将渲染树转换成屏幕的像素,这一个过程我们通常被称为绘制,这时候我们的页面将显示在我们的屏幕上面

 

 7.所以回流必定重绘

8.常见的重排因素(宽高,display:none,节点内容发生变化,浏览器窗口发生变化等都会发生重排---重排必重绘)

 9.重绘的因素(颜色,透明度,transform)

 

 

  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值