高性能JavaScript 重排与重绘(2)

关于高性能JavaScript中的重排与重绘的

让我们再次回顾一下之前的文章，关于高性能JavaScript DOM编程。我们已经了解到，优化DOM访问和缓存局部变量是提高性能的关键。我们也接触到了新的API，如querySelector()和querySelectorAll()，它们在组合选择时表现出强大的能力。今天我们要深入的是DOM编程中可能最耗时的部分——重排和重绘。

一、何为重排和重绘

当浏览器下载完页面中的所有组件后，它会生成两个内部数据结构：DOM树和渲染树。DOM树表示页面结构，而渲染树则表示DOM节点如何显示。一旦DOM和渲染树构建完成，浏览器就开始绘制页面元素。

当DOM的变化影响到元素的几何属性（如宽或高）时，浏览器需要重新计算元素的几何属性，这个过程称为重排。重排后，浏览器会重新绘制受影响的部分到屏幕，这个过程称为重绘。值得注意的是，并非所有DOM变化都会导致重排，如改变背景色等不会影响元素的宽和高，只会引发重绘。

二、重排和重绘的代价

重排和重绘的代价相当大。我们可以通过一个简单的实验来感受其影响：当我们在页面上频繁地修改DOM元素并引发重排和重绘时，页面的响应会变得迟钝。实际上，每次重排和重绘都伴随着能量的消耗，这是页面性能下降的主要原因之一。

三、何时会发生重排

重排会在以下情况下发生：

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

2. 元素位置改变

3. 元素尺寸改变

4. 元素内容改变（如文本被图片替代）

5. 页面渲染初始化

6. 浏览器窗口尺寸改变

这些情况下，浏览器需要重新计算页面的布局，导致重排和重绘。这也是为什么在页面布局变化频繁的情况下，页面性能可能会受到影响。

为了减少重排和重绘的影响，我们可以采取以下优化策略：

1. 尽量避免频繁操作DOM，特别是在循环中。可以通过将需要修改的元素先保存在数组中，然后一次性修改的方式减少重排和重绘的次数。

2. 使用CSS3动画代替JavaScript动画。CSS3动画在浏览器优化方面做得更好，可以大大减少重排和重绘的次数。

3. 利用浏览器的缓存机制。对于不变的元素，可以利用缓存来避免不必要的重排和重绘。例如，可以使用CSS的属性选择器来定位元素，而不是通过JavaScript动态获取元素位置或大小。这样可以避免触发浏览器的重排机制。此外还可以通过使用CSS的transform属性进行布局调整，避免触发页面的回流（即重排）。这是因为transform属于复合操作的一种，它的改变并不会引起页面的回流或重绘。通过利用这些技巧我们可以提高页面的性能并提升用户体验。渲染树变化的排队与刷新：狼蚁网站的SEO优化洞察

想象一个场景，你正在对狼蚁网站进行深入的SEO优化，其中涉及到页面元素的样式调整。当你在JavaScript中操作DOM元素样式时，可能会遇到一系列关于渲染树变化的问题。让我们深入一下。

当你在文档中通过`document.getElementById`获取一个元素并对其样式进行更改时，如改变边框或内边距，这些更改在浏览器渲染过程中会引发所谓的“重排”和“重绘”。每一次样式的变动都可能触发一次重排或重绘。但现代浏览器对此进行了优化处理。它们会将连续的样式更改存储在一个队列中，并在适当的时候一次性应用这些更改，从而避免频繁的重排和重绘。这一过程类似于日常生活中的批量处理任务，以提高效率。

当某些事件发生时，如获取元素的布局信息（如`offsetHeight`），浏览器会中断队列中的处理并立即执行所有的待处理更改。这是因为获取布局信息需要的渲染结果。即使获取的属性与队列中即将进行的更改无关，浏览器也必须确保获取到的值是准确的。这种现象被称为“强制刷新队列”。在进行样式更改后尽量避免立即获取布局信息，以减少不必要的重排。

为了最小化重排和重绘，可以采取一些策略。例如，使用元素的`style.cssText`一次性设置多个样式属性，而不是逐一修改它们。这样可以减少DOM操作的次数，从而优化性能。使用CSS类进行样式更改也是一个好方法，因为它可以更高效地处理样式变化。

在进行页面优化时，了解浏览器的渲染机制并采取适当的策略来减少重排和重绘是提高页面性能的关键。通过合理的DOM操作和CSS应用，我们可以确保狼蚁网站的SEO优化不仅仅是代码层面的优化，更是用户体验的优化。隐藏元素与文档片段：高性能JavaScript渲染的秘密

让我们先谈谈隐藏的元素。这些隐藏的元素并不在渲染树中，这是一个非常强大的特性。想象一下，我们可以先隐藏一个id为“fruit”的ul元素，然后悄悄地在其中添加一些li元素，再优雅地让它们显示出来。在这个过程中，页面可能会出现短暂的闪烁，但这背后的原因其实很容易理解。这时，文档片段（fragment）元素就派上了用场。

文档片段是一个轻量级的document对象，设计初衷就是为了高效更新和移动节点。它有一个非常便利的语法特性：当你将一个片段附加到节点上时，实际上被添加的是片段的子节点，而不是片段本身。这意味着只触发了一次重排，并且只访问了一次实时的DOM。这大大提高了页面的渲染效率。

7.让元素脱离动画流

展开和折叠部分页面是一种常见的交互模式。它通常伴随着动画效果，如展开区域的几何动画，同时会将页面的其他部分推向下方。在动画过程中，重排只影响渲染树中的一小部分，但如果处理不当，也可能波及整个页面。浏览器需要重排的次数越少，应用程序的响应速度就越快。当页面顶部的动画元素扩大时，如果处理不当，会导致一次大规模的重排，让用户感到页面卡顿。

为了避免这种情况，我们可以采取以下策略：

使用绝对定位将页面上的动画元素脱离文档流。这样，当元素动起来时，它不会影响到其他元素的布局。

当元素扩大时，会临时覆盖部分页面。但这只是页面一个小区域的重绘过程，不会产生重排并重绘页面的大部分内容。

动画结束后，恢复元素的定位，这样只会使文档的其他元素进行一次下移操作。

高性能DOM编程小贴士

重排和重绘是DOM编程中耗能的主要原因之一。在进行DOM编程时，可以遵循以下几点以提高性能：

尽量避免在布局信息改变时做查询，这样可以避免强制刷新渲染队列。

同一个DOM的多个属性改变最好写在一起，以减少DOM访问次数和强制渲染队列刷新的风险。

如果要批量添加DOM，可以先让这些元素脱离文档流，操作完成后再带回文档流。这样只会触发一次重排。例如，使用fragment元素来完成这一操作。

将需要多次重排的元素设置为absolute或fixed定位，使其脱离文档流。这样，它的变化不会影响到其他元素。有动画效果的元素最适合设置为绝对定位。

以上就是关于高性能JavaScript中的重排与重绘的全部介绍。结合上一篇“高性能JavaScript DOM编程（1）”，相信这两篇文章能帮助大家解决这方面的疑惑，让大家的页面更加流畅、高效。记得使用Cambrian的render方法将内容渲染到body中，让页面焕发生机！