浏览器的重绘和重排的影响

浏览器下载完页面中所有的组件之后，会解析生成两个内部数据结构：

1. DOM树：表示页面结构

2. 表示DOM节点如何显示

当DOM和渲染树构建完成之后，浏览器就开始显示（绘制）页面元素，当DOM的变化影响了元素的几何属性（如改变边框或者高度）浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会受到影响，浏览器会使中受到影响的部分失效，并重新构造渲染树，这个过程被称为所谓的“重排”。完成重排后，浏览器会重新绘制受影响的部分到屏幕中，这个过程被称为“重绘”。

不是所有的DOM变化都影响元素的几何属性，如果演变元素的背景色并不影响它的宽度和高度，这种情况，只会发生一次重绘，而不会发生重排，因为元素的布局没改变，

重绘和重排对影响速度问题，一般会延迟时间。应尽可能减少这样的操作。

重排发生一般出现这几种情况：

1. 添加或删除可见的DOM元素；

2. 改变元素位置；

3. 元素的尺寸改变（包括：外边距、内边距、边框、高度等）

4. 内容改变（如：文本改变或图片被另外一个不同尺寸的图片替代）

5. 页面渲染器初始化；

6. 浏览器窗口尺寸的改变；

根据改变的范围和程度，渲染树中或大或小的对应部分也需要重新计算。有些改变会触发整个页面的重排：如当滚动条出现时候

每次重排都会产生计算消耗，大多数浏览器通过队列化修改并批量执行来优化重排过程，然而，你可能会强制刷新队列并要求任务立刻执行，获取布局信息的操作会导致队列刷新。

一个好的提高程序响应的速度策略就是减少重绘和重排的操作发生，为了减少，应该合并多次对DOM和样式的修改，然后一次处理。离线操作DOM，使用缓存，并减少访问局部信息的次数

浏览器的重绘和重排的影响相关推荐

浏览器渲染页面的原理及流程---------重绘与重排（回流）--优化
浏览器渲染页面的原理及流程浏览器将域名通过网络通信从服务器拿到html文件后,如何渲染页面呢? 1.根据html文件构建DOM树和CSSOM树.构建DOM树期间,如果遇到JS,阻塞DOM树及CSSO ...
html-什么是重排和重绘？如何减少影响的范围
答: 重排:是引起DOM树重新计算的行为重绘:一个元素外观的改变(如color)所触发的浏览器行为减少: 分离读写操作; 样式集中改变; 使用absolute脱离文档流; 使用 display:n ...
浏览器：重绘（repaint）与回流/重排（reflow）
一.从上面这个图上,我们可以看到,浏览器渲染过程如下: 1.解析HTML,生成DOM树,解析CSS,生成CSSOM树 2.将DOM树和CSSOM树结合,生成渲染树(Render Tree) 3.Lay ...
dev 中 gridcontrol1 滚动条重绘_浏览器的重绘和回流（Repaint amp; Reflow）
参考文献: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree ...
android 重绘如何能不闪一下屏幕_前端性能优化之重绘和重排
性能优化中,减少重绘重排应该是一种很好的优化方式,我们具体看一下什么情况下会造成重绘重排,为什么减少重绘重排可以做到优化,怎么样减少重绘重排. 浏览器渲染过程我们先看看当浏览器拿到服务端返回的资源时 ...
高性能Javascript重绘和重排学习笔记
浏览器下载完页面中所有的组件 HTML标记,css,js,图片面性之后,会解析生成两个内部数据结构 DOM树表示页面结构渲染树表示DOM节点如何显示 DOM树中每一个需要显示的节点在 ...
什么是重绘，重排？如何解决？
一.重绘(repaint/redraw) 某个dom节点的颜色,背景颜色变了,字体大小,只影响自己,不影响其他元素. 注意:table及其内部元素可能需要多次计算才能确定好其在渲染树中节点的属性,比同 ...
重绘、重排区别如何避免
重排(Reflow):当渲染树的一部分必须更新并且节点的尺寸发生了变化,浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树. 重绘(Repaint):是在一个元素的外观被改变所触发的浏览器行为,浏 ...
重绘和重排是什么？如何减少重绘和重排
一个页面由两部分组成: DOM:描述该页面的结构 render:描述 DOM 节点 (nodes) 在页面上如何呈现当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 rende ...

浏览器的重绘和重排的影响

浏览器的重绘和重排的影响相关推荐

最新文章

热门文章