本文深入解析 JavaScript 性能优化的关键领域，涵盖数据访问、DOM 操作及循环处理三大核心环节。通过优化脚本加载位置、减少全局变量查询、缓存 DOM 引用、利用 innerHTML 批量更新及采用事件委托等技术手段，显著降低页面加载时间并提升运行效率。文章提供具体代码对比与实战建议，帮助开发者构建更流畅的用户体验。
引言：性能优化的必要性
在项目开发中，页面加载缓慢是常见痛点，直接损害用户体验。尽管网络波动可能导致延迟，但前端代码缺乏优化往往是主因。基于资料调研与实践经验，本文梳理了提升性能的关键策略，欢迎指正交流。
数据访问优化策略
1、数据访问
1、将 script 标签置于 body 底部，以最小化对页面整体加载流程的干扰。
2、尽量减少全局变量的使用。变量在作用域链中的层级越深，访问耗时越长。局部变量位于作用域链首层，而全局变量位于末端，因此访问全局变量效率最低。
3、规避全局查询。若函数内需多次引用全局变量，建议将其赋值给局部变量，从而缩短作用域链的查询深度。
function addTotrackData(){
var allChildrenNode=getAllChildrenDepartmentNodes();
for (var i = 0; i < allChildrenNode.length; i++) {
for (var j=0,len=track.length;j<len;j++) {
if (trackNode[j]["userId"] == allChildrenNode[i]) {
trackNode[j]["isOnMap"] = true;
}
}
}
}
上述逻辑可优化为以下代码形式
function addTotrackData(){
var allChildrenNode=getAllChildrenDepartmentNodes();
var track=trackNode;
for (var i = 0; i < allChildrenNode.length; i++) {
for (var j=0,len=track.length;j<len;j++) {
if (track[j]["userId"] == allChildrenNode[i]) {
track[j]["isOnMap"] = true;
}
}
}
}
4、将集合的 length 属性缓存至局部变量，并在迭代过程中复用该变量。
for (var j=0,len=track.length;j<len;j++) 5、避免使用 with 表达式，因其会延长作用域链。同时需谨慎使用 try-catch 的 catch 子句，其具有类似的性能影响。
6、属性或方法在原型链中的层级越深，访问速度越慢。
7、声明变量时，建议合并声明以节省内存空间。
var a;
var b;
var c;
//推荐
var a,b,cDOM 操作性能提升技巧
2、Dom操作
DOM（文档对象模型）是独立于语言的 API，用于操作 XML 和 HTML 文档。在浏览器环境中，该接口由 JavaScript 实现。可将 DOM 与 JavaScript 视为两座岛屿，通过一座“收费桥”连接，建议尽量在 JavaScript 侧完成操作以减少开销。
1、优先使用 innerHTML 替代频繁的 DOM 操作，通过减少操作次数来优化 JavaScript 性能。
//dom方式
var str=""
var dom=document.getElementById("test");
var start1=new Date();
for(var j=0;j<100000;j++){
var div=document.createElement("div");
div.innerText="test";
dom.append(div);
}
var end1=new Date();
console.log("dom方式:"+(end1-start1));//dom方式:356
//inerHTML方式
var content="";
var start=new Date();
for(var i=0;i<10000;i++){
content=content+"<div>test</div>";
}
document.getElementById("test").innerHTML=content;
var end=new Date();
console.log("innerHTML方式:"+(end-start));//innerHTML方式:35
2、若同一 DOM 元素或集合需多次访问，建议使用局部变量缓存该引用。在循环中使用局部变量缓存集合及其元素，可显著提升执行速度。
3、遍历 children 属性比 childNodes 更快。因 children 不包含注释节点和空文本节点，处理效率更高。
4、使用 element.cloneNode(bool) 复制节点。bool 为 false 时执行浅复制（仅当前节点），为 true 时执行深复制（包含子节点）。此方式比 document.createElement() 速度更快。
5、利用 document.querySelector 和 document.querySelectorAll("div.warning,div.notice") 进行快速查找。它们返回 NodeList（类数组对象），而非 HTMLCollection，从而避免了后者固有的性能与逻辑问题。querySelectorAll 还支持联合查询。
6、修改样式时，可通过 div.style.cssText 批量修改，或使用类名管理（更利于维护）。
var el = document.getElementById('mydiv');
//修改3次Dom
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
el.style.padding = '5px'；
//推荐只需要修改1次Dom
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;'
7、尽量避免在 HTML 标签中内联 Style 属性，使用外联样式表更便于维护与修改。
8、避免图片和 iframe 的空 Src 属性。空 Src 会导致当前页面重新加载，严重影响速度与效率。
9、采用事件委托。直接为元素绑定事件句柄会影响性能，利用事件冒泡机制进行委托可减少绑定数量。事件挂接通常发生在 onload 或 DOMContentReady 事件中。
循环结构性能优化
3、循环
1、for-in 是四种循环方式中速度最慢的，通常用于遍历对象（需区分自身属性与原型属性）。不建议用于数组循环。除非需迭代属性未知的对象，否则一般避免使用 for-in。
2、调整循环条件的顺序以提升性能。
//推荐
for(var i=items.length;i--;){
//todo
}
//不推荐
for(var i=0,len=items.length;i<len;i++){
//todo
}
3、通过精简循环体内容来优化整体性能。
以上为 JavaScript 性能提升的详解整合，旨在提供帮助。如有疑问请留言，小编将及时回复。感谢支持！