20170629-重排与重绘

Dogee 发布于2019-08-29 12:51 / 2608人阅读

摘要：完成重排后，浏览器会重新绘制受到影响的部分到屏幕中，该过程称为重绘重绘和重排操作都是代价昂贵的操作，它们会导致应用程序的反应迟钝，所以应该尽可能减少这类过程的发生。

浏览器下载完页面中的所有内容：HTML、JavaScript、CSS、图片——之后会解析并生成两个内部数据结构：

DOM树：表示页面结构

渲染树：表示DOM节点如何显示

DOM树中的每一个需要显示的节点在渲染树中至少存在一个对应的节点(隐藏的DOM元素在渲染树中没有对应的节点)。渲染树中的节点被称为“帧”或者“盒子”，理解页面元素为一个具有填充(padding)、边距(margin)、边框(border)和位置(position)的盒子。一旦DOM树和渲染树构建完成，浏览器就开始显示(绘制 paint)页面元素

当DOM的改变影响了元素几何属性（例如宽和高）——浏览器就需要重新计算元素的几何特性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为重排(reflow)。完成重排后，浏览器会重新绘制受到影响的部分到屏幕中，该过程称为重绘(repaint)

重绘和重排操作都是代价昂贵的操作，它们会导致web应用程序的UI反应迟钝，所以应该尽可能减少这类过程的发生。

引起重排的原因

添加或删除可见的DOM元素

元素位置改变

元素尺寸改变

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

页面渲染初始化

浏览器窗口尺寸改变

渲染树变化的排队与刷新

由于每次重排都会产生计算消耗，大多数浏览器通过队列化修改和批量执行来优化重排过程（将多个重排过程合并成一次）。然而，某些操作会强制刷新队列并要求队列中的重排立即执行（这样会使浏览器的优化策略失效）。

获取布局信息的操作会导致强制刷新队列，使得浏览器不得不执行渲染队列中的“待处理变化”并触发重排以返回正确的值

offsetTop，offsetLeft，offsetWidth，offsetHeight

scrollTop，scrollLeft，scrollWidth，scrollHeight

clientTop，clientLeft，clientWidth，clientHeight

getComputedStyle()

优化方法：尽量不要在布局信息改变时查询它，可以在布局信息改变完毕之后再去查询

最小化重绘和重排

重绘和重排的代价非常昂贵，因此一个好的提高程序响应速度的策略就是减少此类操作的发生。为了减少发生次数，应该合并多次对DOM和样式的修改，然后一次处理掉。

合并多次对样式的修改

var el = document.getElementById("myDiv")
el.style.borderLeft = "1px"
el.style.borderRight = "2px"
el.style.padding = "5px"

上面的例子中，存在两个问题：

每个样式属性的改变都会影响元素的集合结构，最糟糕的情况下，会导致浏览器触发三次重排(大部分现代浏览器都为此做了优化，只会触发一次重排)

上面的代码访问了4次DOM

优化方法：使用cssText属性，合并所有的改变然后一次处理

var el = document.getElementById("myDiv")
el.style.cssText +="border-left: 1px; border-right: 2px; padding: 5px;";

批量修改DOM

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

使元素脱离文档流

对其进行一些列操作

把元素带回文档中

使元素脱离文档流的方法：

隐藏元素，施加修改，重新显示

使用document fragment在当前DOM之外构建一个子树，再把它拷贝会文档

将元素元素拷贝到另一个脱离文档的节点中，修改副本，完成后再替换原始元素。

缓存布局信息

在上面的介绍中讲到了，浏览器通过队列化修改和批量执行的方式减少重排次数。但是当查询布局信息时（如获取偏移量、滚动位置、计算出的样式值），浏览器为了返回最新值，会刷新队列并应用所有的变更。因此最好的做法应该是尽量减少布局信息的获取次数，获取后把它复制给局部变量，然后再操作局部变量。

IE和:hover

避免在大量元素上使用:hover这种效果

云服务器私有云重排重绘编译与重编重排序数组重排序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112191.html

20170629-重排与重绘

摘要：完成重排后，浏览器会重新绘制受到影响的部分到屏幕中，该过程称为重绘重绘和重排操作都是代价昂贵的操作，它们会导致应用程序的反应迟钝，所以应该尽可能减少这类过程的发生。浏览器下载完页面中的所有内容：HTML、JavaScript、CSS、图片——之后会解析并生成两个内部数据结构： DOM树：表示页面结构渲染树：表示DOM节点如何显示 DOM树中的每一个需要显示的节点在渲染树中至少存...

Miracle 2019-08-20 17:37 评论0 收藏0
20170629-重排与重绘

摘要：完成重排后，浏览器会重新绘制受到影响的部分到屏幕中，该过程称为重绘重绘和重排操作都是代价昂贵的操作，它们会导致应用程序的反应迟钝，所以应该尽可能减少这类过程的发生。浏览器下载完页面中的所有内容：HTML、JavaScript、CSS、图片——之后会解析并生成两个内部数据结构： DOM树：表示页面结构渲染树：表示DOM节点如何显示 DOM树中的每一个需要显示的节点在渲染树中至少存...

shiweifu 2019-08-01 17:04 评论0 收藏0
重排与重绘

摘要：原文地址在页面的生命周期中，一些效果的交互都有可能发生重排和重绘，这些都会使我们付出高额的性能代价。更比而言，重排会产生比重绘更大的开销。触发重绘的操作主要有背景色等属性的改变我们应当注意的是重绘不一定导致重排，但重排一定会导致重绘。原文地址：http://www.cun-xu.cn/index.ph... 在页面的生命周期中，一些效果的交互都有可能发生重排（Layout）和重绘（P...

warmcheng 2019-08-06 13:39 评论0 收藏0
JavaScript：回流（重排）与重绘

摘要：回流也被称为重排，其实从字面上来看，重排更容易让人形象易懂即重新排版整个页面。重绘当页面元素样式改变不影响元素在文档流中的位置时如，，，浏览器只会将新样式赋予元素并进行重新绘制操作。你真的了解回流和重绘吗简单先了解一下浏览器的渲染过程（图片来自于网络） showImg(https://segmentfault.com/img/bVbaC2e?w=624&h=289); 浏览器生成渲染...

Jioby 2019-08-26 13:34 评论0 收藏0
innerHTML vs createElement

摘要：，当元素插入后仍然保留对元素的指针。能够获得事件处理函数，而生成的新无法获得原先设置的事件处理函数。某些情况下，更加快速。无疑，在大多数情况下，更为快速且更加易用，但是使用的时候小心上述的那个问题就好。 WilsonLius blog 首发地址两者生成dom的方式有什么优劣呢？首先让我们看一个小问题再引入正题～如何重复插入一个相同的html结构呢？ //错误的 window.onlo...

paulli3 2019-08-19 17:26 评论0 收藏0