浏览器的重绘和回流

浏览器的重绘与回流

我的博客

这是我在之前面试中遇到的一个问题,今天回想起来正好做一个总结

浏览器在将页面展示给我们之前都做了什么(渲染机制)

这其实也是我遇到的一道面试题,与重绘和回流息息相关

  1. 用户输入网址
  2. 浏览器通过DNS获取网站的IP地址
  3. 浏览器尝试与服务器建立连接
  4. 服务器发送永久重定向
  5. 浏览器跟踪重定向地址
  6. 服务器处理请求
  7. 服务器发送HTML响应
  8. 浏览器接收响应,开始解析
  9. 解析html文件,处理并创建DOM
  10. 解析css样式表, 构建CSSOM
  11. DOMCSSOM进行结合,构建渲染树(Render Tree)
  12. 根据渲染树来布局(layout),计算每一个节点的位置
  13. 调用GPU进行绘制(Paint),合成图层
  14. 重绘(repaint)与回流(reflow)

当html解析遇到script时会暂停构建DOM,执行js脚本,执行完毕后才会继续构建DOM树,因此将js文件放在html文件底部进行加载才会节省加载时间,加快绘制速度

浏览器使用流式布局 (Flow Based L

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML重绘回流浏览器渲染页面时的两个重要过程。它们都与DOM操作相关,但是两者的目的和处理方式不同。 重绘(Repaint):当元素的样式改变,但没有改变布局时,浏览器将新的样式绘制到屏幕上,这个过程称为重绘重绘的过程比较快,因为它不需要重新计算元素的尺寸和位置,只需要将新的样式应用到元素上即可。 回流(Refloaw):当元素的尺寸、位置或布局发生改变时,浏览器需要重新计算元素的位置和大小,并重新排列页面的布局。这个过程称为回流回流的过程比较耗时,因为浏览器需要遍历整个文档树,计算每个元素的尺寸和位置,并重新排列布局。 例如,当我们通过JavaScript改变一个元素的宽度时,浏览器触发该元素的回流重绘。因为改变元素的宽度可能影响其他元素的位置和大小,因此浏览器需要重新计算整个页面的布局,并将新的样式绘制到屏幕上。 为了减少回流重绘的次数,我们可以采取以下措施: 1. 避免频繁操作DOM,尽量一次性修改多个元素的样式。 2. 使用CSS3动画代替JavaScript动画,因为CSS3动画可以利用GPU硬件加速,而JavaScript动画通常需要通过JavaScript计算样式并重绘页面。 3. 使用文档碎片(DocumentFragment)来批量插入多个节点,可以减少页面回流次数。 4. 使用CSS3的transform属性来改变元素的位置和大小,因为transform属性不触发页面的回流重绘。 5. 避免使用table布局,因为table布局在页面发生改变时需要重新计算整个表格的布局。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值