重绘、重排区别如何避免
重排(Reflow):当渲染树的一部分必须更新并且节点的尺寸发生了变化,浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。
重绘(Repaint):是在一个元素的外观被改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。比如改变某个元素的背景色、文字颜色、边框颜色等等
区别:重绘不一定会发生重排,重排必然导致重绘
引发重排
4.1 添加、删除可见的dom
4.2 元素的位置改变
4.3 元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性)
4.4 页面渲染初始化
4.5 浏览器窗口尺寸改变
4.6 获取某些属性。当获取一些属性时,浏览器为取得正确的值也会触发重排,它会导致队列刷新,这些属性包括:offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。所以,在多次使用这些值时应进行缓存。
引发重绘
优化:
浏览器自己的优化:
浏览器会维护1个队列,把所有会引起重排,重绘的操作放入这个队列,等队列中的操作到一定数量或者到了一定时间间隔,浏览器就会flush队列,进行一批处理,这样多次重排,重绘变成一次重排重绘
减少 reflow/repaint:
(1)对于dom样式统一修改,不要一条一条地修改 DOM 的样式。可以先定义好 css 的 class,然后修改 DOM 的 className。(2)不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。
(3)为动画的 HTML 元件使用 fixed 或 absoult 的 position,那么修改他们的 CSS 是不会 reflow 的。
(4)千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。(table及其内部元素除外,它可能需要多次计算才能确定好其在渲染树中节点的属性,通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。)(5)使用visibility替换display:none,因为前者只会引起重绘,后者会引发重排
重绘、重排区别如何避免相关推荐
- android 重绘如何能不闪一下屏幕_浏览器渲染机制——重绘重排
性能优化中,减少重绘重排应该是一种很好的优化方式,我们具体看一下什么情况下会造成重绘重排,为什么减少重绘重排可以做到优化,怎么样减少重绘重排. 浏览器渲染过程 我们先看看当浏览器拿到服务端返回的资源时 ...
- css什么是重绘重排,哪些操作会造成重绘重排
一.重绘.重排 1.1 什么是重绘重排 当我们改变了一个元素的尺寸位置属性时,会重新进行样式计算(computed style)和布局(layout) 绘制(paint)以及后面的所有流程,这种行为称 ...
- 【转】css_重绘重排
[转自]Yahoo! 性能工程师 Nicole Sullivan 在最新的文章 <Reflows & Repaints: CSS Performance making your Java ...
- 你真的了解重排和重绘吗?
做过前端开发的小伙伴就算不是非常理解重排与重绘,但是肯定都听过这两个词.那为什么这两个东西这么重要?因为他与我们的页面性能息息相关,今天,我们就来好好研究一下这两个东西. 浏览器的渲染流程 在讲解重排 ...
- 什么是重排、重绘,如何优化
概念 重排:当渲染树的一部分必须更新并且节点的尺寸发生了变化,浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树. 重绘:是在一个元素的外观被改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘 ...
- 重排(reflow) 重绘(repaint)
在页面的生命周期中:至少会发生一次渲染,在用户访问的过程中,还会不断的触发重排(reflow)重绘(repaint) 重绘和重排都会影响性能,尤其是重排,会使我们付出高昂的性能代价. 页面生成的过程( ...
- android 重绘如何能不闪一下屏幕_前端性能优化之重绘和重排
性能优化中,减少重绘重排应该是一种很好的优化方式,我们具体看一下什么情况下会造成重绘重排,为什么减少重绘重排可以做到优化,怎么样减少重绘重排. 浏览器渲染过程 我们先看看当浏览器拿到服务端返回的资源时 ...
- 重绘(redraw或repaint),重排(reflow)
浏览器运行机制图: 浏览器的运行机制:layout:布局: 1.构建DOM树(parse):渲染引擎解析HTML文档,首先将标签转换成DOM树中的DOM node(包括js生成的标签)生成内容树(Co ...
- 重绘、重排区别及如何减少
重绘 当一个元素的外观发生改变,但没有改变布局,重新把元素外观绘制出来的过程,所以重绘跳过了创建布局树和分层的阶段. 重排(回流) 当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小),浏览器 ...
最新文章
- 添加高精度计时器测量处理能力
- python生成迭代的用法
- python安装unittest_python 自动化测试 (一):安装 requests,unittest,HTMLTestRunner
- 安卓加载asset中的json文件_Android解析Asset目录下的json文件
- SVO实时全局光照优化(里程碑MK2):Sparse Voxel Octree based Global Illumination (SVO GI)...
- [Linux] 学习笔记之安装学习环境(sshd, lrzsz)
- 微信支付之H5页面WAP端接入
- Android手机使用笔记本流量上网(基于Android便携式WLAN热点)
- 陕西奥罗国际大酒店配电房改造
- 设置JSP页脚版权标识
- get请求获取淘宝吱口令
- Tet3在前脑神经元中对抗焦虑
- Mac OS X 键盘快捷键
- linux modprobe命令参数
- 汉语编程vs汉语写一元方程
- 系统规划与管理师笔记——信息系统综合知识
- suse linux enterprise 11 密码,图解SUSE Linux Enterprise Server 11 SP4安装教程
- Windows查看局域网在线的所有IP
- 浅聊下后台管理系统权限控制的实现思路
- 无锡平面设计培训——零基础怎么学习平面设计