重绘(repaint)和回流/重排(reflow)介绍,以及如何进行优化

首先了解浏览器的渲染过程

1、浏览器渲染过程

截自chenjigeng作者的图
(截自chenjigeng作者的图)

  • 浏览器采用流式布局;
  • 解析HTML—DOM树,解析CSS—CSSOM树,DOM + CSSOM => 渲染树;
  • 根据生成的渲染树,进行回流(layout),得到节点的位置、大小;
  • 根据之前得到的信息,进行重绘(painting),得到节点的绝对像素;
  • 将像素发送给GPU,节点绘制到页面上;
2、回流

发生机制:

  • 页面初始渲染;
  • 添加/删除元素;
  • 位置、尺寸(包括边距大小、高度、宽度)、内容(文本、图片替换)变化;
  • 浏览器窗口大小变化;
  • display:none,脱离了文档流;
回流一定会触发重绘,而重绘不一定会回流
3、重绘

发生机制:

  • 颜色
  • visibility: hidden,元素还是占了位置的
4、优化机制
  • 避免频繁使用0ffsetTop/Left/Width/Height、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、width/height(大多浏览器是通过队列化修改、执行重排过程,而这些属性需要返回最近的值,浏览器就得清空队列,触发回流/重排);
const width = box.offsetWidth;
function initP() {
    for (let i = 0; i < paragraphs.length; i++) {
    	// 每次循环都会读取offsetWidth,强制浏览器刷新队列,放到循环外避免这种情况
    	// paragraphs[i].style.width = box.offsetWidth + 'px'; 
        paragraphs[i].style.width = width + 'px';
    }
}
  • 将动画效果应用到positions: absolute/fixed元素上,脱离文档流,避免父元素以及有影响的元素频繁的回流;
  • JS方面,避免频繁操作样式、DOM;
const el = document.getElementById('test');
el.style.cssText += 'border-left: 1px; border-right: 2px; padding: 5px;';
// or
el.className += ' active';
  • css3硬件加速(GPU加速),可以让transform、opacity、filters这些动画不会引起回流重绘;
5、扩展知识

vue中v-if与v-show的区别:

v-if:条件渲染,条件为false时是不做渲染的,切换过程中内部事件监听和子组件会适当的销毁和重建;切换消耗较高;
v-show:无论是true还是false,元素都会渲染,使用display来控制显示隐藏;初始渲染消耗较高,适合频繁切换场景;

PS:学习的重绘和回流介绍问题回答作者

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值