DOM 更快了，ES2018 带我们提升性能
当我们在网页上操作 DOM 元素时，我们经常会发现性能问题。DOM 是文档对象模型，在网页中可以通过操作 DOM 元素实现页面的动态效果和交互功能。然而，频繁地对 DOM 进行修改会影响页面性能，使用户体验下降。幸运的是，我们可以使用 ES2018 中的一些新功能来提升我们的前端性能。本文将介绍一些这些新功能，以及如何使用它们来更有效地操作 DOM 元素。
- 使用 document.createDocumentFragment()
document.createDocumentFragment() 是一个 DOM API，可以创建一个空白的文档片段。我们可以把文档片段看做一个容器，用它来存储待插入 DOM 元素，最后一次性将其插入到文档中。这种方法可以减少重绘和重排的次数，从而提高性能。以下是一个示例代码：
-- -------------------- ---- ------- ----- -------- - ---------------------------------- ------- - - -- - - ----- ---- - ----- -- - ----------------------------- -------------- - ----- ---- - - -- ------------------------- - ---------------------------------------------------------
在这段代码中，我们创建了一个包含 1000 个列表项的文档片段，并将其一次性插入到 DOM 中。这比每次插入一个列表项要快得多。
- 使用 classList 属性
classList 是一个元素的一个只读属性，返回一个类名的实时 DOMTokenList。我们可以使用 classList 属性来添加、删除或切换元素的类名。这种方法比直接操作 className 属性要更快。以下是一个示例代码：
const elem = document.querySelector('.my-elem');
elem.classList.add('active');
elem.classList.remove('inactive');
elem.classList.toggle('open');在这段代码中，我们可以看到 classList 的几个常用方法。这些方法比修改 className 属性更快，并且让我们的代码更易读。
- 使用 Element.matches() 方法
Element.matches() 是一个元素的方法，用来测试一个选择器是否匹配给定的元素。这个方法可以帮助我们快速地选择特定的元素，而不需要遍历整个 DOM 树。以下是一个示例代码：
const elems = document.querySelectorAll('input[type="text"]:focus');
for (let i = 0; i < elems.length; i++) {
if (elems[i].matches(':focus')) {
// 这个元素处于 focus 状态
}
}在这段代码中，我们使用 matches() 方法来检测一个元素是否处于 focus 状态。这种方法非常快速，并且可以帮助我们更有效地操作 DOM 元素。
- 使用 requestAnimationFrame() 方法
requestAnimationFrame() 方法是一个浏览器提供的 API，用来请求浏览器在下一次重绘之前执行一个指定的函数。这个方法可以帮助我们避免多余的重绘和重排，从而优化我们的页面性能。以下是一个示例代码：
function update() {
// 更新 DOM 元素
requestAnimationFrame(update);
}
requestAnimationFrame(update);在这段代码中，我们使用 requestAnimationFrame() 方法来循环更新某个 DOM 元素，这比使用 setInterval() 要更精确并且更高效。
总结
通过使用 document.createDocumentFragment()、classList、Element.matches() 以及 requestAnimationFrame() 方法，我们可以更快地操作 DOM 元素，从而提高我们的前端性能。我们应该牢记这些技巧，并积极地应用它们到我们的项目中，以让我们的代码更出色！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6454d069968c7c53b0891be1