了解重排与重绘的关系,重排和重绘,了解重排与重绘

了解重排与重绘的关系,重排和重绘,了解重排与重绘

重绘和重排是开销很大的操作,会导致web应用的UI无响应,所以要尽量减少这类进程的发生。让我们简单看一下。

前言

在下载完页面中的所有内容:HTML、JavaScript、CSS、image ——之后,浏览器将解析并生成两个内部数据结构:

DOM树:表示页面结构

呈现树:指示DOM节点如何显示。

DOM树中每个需要显示的节点在渲染树中至少有一个对应的节点(隐藏的DOM元素在渲染树中没有对应的节点)。渲染树中的节点被称为“框架”或“盒子”,页面元素被理解为具有填充、边距、边框和位置的盒子。一旦构建了DOM树和呈现树,浏览器就开始显示(绘制)页面元素。

当DOM的变化影响到元素的几何属性(如宽度和高度)时,——浏览器需要重新计算元素的几何属性,其他元素的几何属性和位置也会受到影响。浏览器将使渲染树受影响的部分无效,并重新构建渲染树。这个过程称为回流。重排后,浏览器会将受影响的部分重绘到屏幕上,这个过程叫做重绘。

重绘和重排是开销很大的操作,会导致web应用的UI无响应,所以要尽量减少这类进程的发生。

引起重排的原因

或者添加或删除可见的DOM元素。

元素位置变化

元素大小变化

内容更改(例如,文本更改或图片被另一张不同大小的图片替换)

页面呈现初始化

浏览器窗口大小改变

渲染树变化的排队和刷新

因为每次重排都会产生计算成本,所以大多数浏览器通过排队修改和批量执行(将多个重排过程合并为一个)来优化重排过程。但是,有些操作会强制刷新队列,并要求立即执行队列中的重新排列(这将使浏览器的优化策略无效)。

获取布局信息的操作会导致队列被强制刷新,使得浏览器不得不在渲染队列中执行“挂起的更改”并触发重新排列以返回正确的值。

偏顶,偏左,偏宽,偏高

scrollTop,scrollLeft,scrollWidth,scrollHeight

clientTop,clientLeft,clientWidth,clientHeight

getComputedStyle()

优化方法:版面信息发生变化时尽量不要查询,版面信息发生变化后再查询。

最小化重绘和重排

重绘和重排的开销非常大,所以提高程序响应速度的一个好策略就是减少这类操作的发生。为了减少出现的次数,您应该多次合并对DOM和style的修改,然后一次性处理它们。

将多个更改合并到样式中。

var El=document . getelementbyid(' my div ')

el.style.borderLeft='1px '

el.style.borderRight='2px '

el.style.padding='5px '

在上面的例子中,有两个问题:

style属性的每一次改变都会影响元素的集合结构,最坏的情况下会导致浏览器触发三次重排(大多数现代浏览器都为此进行了优化,只触发一次重排)。

上面的代码访问DOM 4次。

优化方法:使用cssText属性,合并所有更改,然后一次性处理。

var El=document . getelementbyid(' my div ')

El . style . CSS text=' border-left:1px;border-right:2px;填充:5px';

批量修改DOM

当需要对DOM元素执行一系列操作时,可以通过以下步骤减少重绘和重排的次数

1.从文档流中分离元素。

2.对其进行一些列操作。

3.将元素带回到文档中

从文档流中分离元素的方法:

隐藏元素,应用修改,并重新显示它们。

使用document fragment在当前DOM之外构建一个子树,然后将其复制到文档中。

将元素元素复制到文档之外的另一个节点,修改副本,然后在完成后替换原始元素。

缓存布局信息

上面介绍中提到,浏览器通过排队修改和批量执行,减少了重新排列的次数。但是,当查询布局信息(如获取偏移量、滚动位置和计算的样式值)时,浏览器将刷新队列并应用所有更改,以便返回最新值。所以最好的办法是尽量减少布局信息的获取次数,获取后复制到局部变量,再对局部变量进行操作。

IE和:hover

避免使用效果:悬停在大量元素上。

这就是本文的全部内容。希望对大家的学习有帮助,支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: