JavaScript高性能编程：DOM操作优化技巧与代码示例

JavaScript性能优化概述

本文主要梳理JavaScript高性能编程中的关键要点，旨在帮助开发者提升代码执行效率。


//高效简洁                     //低消能
children　　　　　　　　　　　　        //childNodes
childElementCount            //childNodes.length
firstElementChild              //firstChild
lastEelmentChild              //lastChild
nextElementSibling           //nextSibling
previousElementSibling       //previousSibling

高效DOM选择器的应用

在DOM操作中，选择器的使用直接影响性能。应优先采用高效的选择器方法，避免低效的遍历操作。


<div id="footer_bottom">
<a href="/AboutUS.aspx">本站</a><a href="/ContactUs.aspx">联系我们</a><a href="/about/ad.aspx">广告服务</a><a href="/about/job.aspx">人才服务</a>&copy;2006-2016 <a href="https://www.jb51.net/">本站</a>
</div>


var aArr1= document.querySelectorAll("#footer_bottom a");//简洁高效
var aArr2 = docuement.getElementById("footer_bottom").getElementsByTagName("a");//繁杂低效

//return 
<a href="/AboutUS.aspx">本站</a>,
<a href="/ContactUs.aspx">联系我们</a>,
<a href="/about/ad.aspx">广告服务</a>,
<a href="/about/job.aspx">人才服务</a>,

//选择第一个子节点
var a = document.querySelector("#footer_bottom a");
//return <a href="/AboutUS.aspx">本站</a>

//选择多个节点
var divs = document.querySelectorAll("div.footer,div.main,div.header");

需要注意的是，上述提到的部分属性在主流浏览器中均得到支持，但在IE6、IE7和IE8中，仅支持children属性，其他如firstElementChild等属性可能不可用，开发时需做好兼容性处理。

减少DOM重绘与回流的策略

为了优化性能，必须尽量减少DOM的重新渲染与排版（重绘和回流）。以下是三种常见的优化方式。

第一种方法：在修改元素前，先将目标元素隐藏（例如设置display为none），完成所有DOM操作后，再将其显示出来。这样可以避免中间过程引发的多次重排。

第二种方法：使用文档片段（DocumentFragment）。通过document.createDocumentFragment()创建一个轻量级的容器，将需要添加的节点先添加到片段中，最后一次性插入DOM树。这是官方推荐的高效做法。

第三种方法：克隆节点。将需要操作的元素克隆一个副本，对副本进行所有修改，操作完成后，用副本替换原始节点。这种方法适用于需要频繁修改已有元素内容的场景。

循环结构的性能优化

以下是针对上述内容的补充说明，重点在于循环结构的优化。

在编写循环时，应将循环对象的属性（如length）存储到局部变量中，避免每次迭代都重新计算对象属性。

优化前的代码示例如下：


var str = "nanananana";
for (var n = 0; n < str.length; n++) {}

优化后的代码示例如下：


　var str = "nanananana",
strLgth = str.length;
for (var n = 0; n < strLgth ; n++) {}

循环操作对性能消耗较大。将循环对象的关键属性（如字符串长度或数组长度）缓存到局部变量中，可以显著减少每次循环迭代时的对象属性访问和计算开销，从而提升执行速度。

最小化回流与重绘操作

除了选择器和循环，还需最小化DOM的回流（Reflow）和重绘（Repaint）。频繁修改样式会触发浏览器重新计算布局，应合并样式修改或批量处理。