JavaScript性能直接关乎网页交互体验，优化工作涵盖代码结构规整、执行效率提升以及内存管理等方面，对提升页面流畅度极为关键。

7.1 优化代码结构

7.1.1 函数节流与防抖

在处理频繁触发的事件时，函数节流（Throttle）和防抖（Debounce）能有效减少不必要的函数调用，提升性能。

• 函数节流：设定一个固定的时间周期，在这个周期内，无论事件触发多少次，函数都只执行一次。

• 错误示范：在窗口滚动事件中实时获取滚动位置并执行复杂计算，没有使用节流函数，导致性能问题。

window.addEventListener('scroll', () => {// 执行复杂计算，如获取滚动位置并实时更新大量DOM元素const scrollTop = window.pageYOffset;const elements = document.getElementsByTagName('div');for (let i = 0; i < elements.length; i++) {elements[i].style.transform = `translateY(${scrollTop}px)`;}
});

• 正确示例：使用节流函数限制计算频率。

function throttle(func, limit) {let inThrottle;return function() {const args = arguments;const context = this;if (!inThrottle) {func.apply(context, args);inThrottle = true;setTimeout(() => inThrottle = false, limit);}};
}window.addEventListener('scroll', throttle(() => {const scrollTop = window.pageYOffset;const targetElement = document.getElementById('target - element');targetElement.style.transform = `translateY(${scrollTop}px)`;
}, 200));

• 函数防抖：在事件触发后，等待一定时间，如果在这段时间内事件再次触发，则重新计时，直到等待时间结束后才执行函数。

• 错误示范：在搜索框输入事件中，未使用防抖函数，导致用户每次输入都会立即发送搜索请求，造成网络资源浪费和性能问题。

<input type="text" id="search - input" oninput="search()">
<script>
function search() {const keyword = document.getElementById('search - input').value;// 发送搜索请求console.log('搜索关键词:', keyword);
}
</script>

• 正确示例：使用防抖函数，用户输入结束后再执行搜索请求。

function debounce(func, delay) {let timer;return function() {const context = this;const args = arguments;clearTimeout(timer);timer = setTimeout(() => func.apply(context, args), delay);};
}const searchInput = document.getElementById('search - input');
searchInput.addEventListener('input', debounce(() => {const keyword = searchInput.value;// 发送搜索请求console.log('搜索关键词:', keyword);
}, 300));

7.1.2 模块化与代码拆分

将代码拆分成独立的模块，不仅提高代码的可维护性和复用性，还能优化加载性能。在大型项目中，使用ES6模块系统或构建工具（如Webpack）进行代码拆分。

• ES6模块：通过 import 和 export 语句，将不同功能的代码封装在独立文件中。

• 错误示范：将所有代码写在一个文件中，没有进行模块化，导致代码混乱，难以维护。

// 所有代码混合在一个文件中
function add(a, b) {return a + b;
}function subtract(a, b) {return a - b;
}// 其他大量功能代码- 正确示例：将工具函数封装在 utils.js 文件中，通过 import 和 export 进行模块化管理。// utils.js
export function add(a, b) {return a + b;
}export function subtract(a, b) {return a - b;
}// main.js
import { add, subtract } from './utils.js';
const result1 = add(1, 2);
const result2 = subtract(5, 3);

• Webpack代码拆分：利用Webpack的 splitChunks 配置，可以将公共代码和异步加载的模块拆分出来，实现按需加载。

• 错误示范：没有配置Webpack代码拆分，所有代码打包在一个文件中，导致初始加载文件过大。

// webpack.config.js，没有配置代码拆分
module.exports = {//...
};

• 正确示例：配置 splitChunks 将公共代码和异步加载的模块拆分出来。

// webpack.config.js
module.exports = {//...optimization: {splitChunks: {chunks: 'all'}}
};

7.2 提升执行效率

7.2.1 避免全局变量

全局变量会增加命名空间冲突的风险，同时影响垃圾回收机制的效率。尽量将变量定义在函数内部或模块作用域内。

• 错误示例：

let globalVar;
function init() {globalVar = 10;//...
}

• 正确示例：

function init() {const localVar = 10;//...
}

7.2.2 优化循环操作

在循环中，减少不必要的计算和DOM操作，缓存循环长度，避免每次循环都进行计算。

• 优化前：

const list = document.getElementById('my - list');
const items = list.getElementsByTagName('li');
for (let i = 0; i < items.length; i++) {items[i].style.color ='red';// 其他复杂计算，如每次循环都重新计算一个复杂的数学表达式const complexResult = Math.sqrt(i * i + 10) * Math.sin(i);console.log(complexResult);
}

• 优化后：

const list = document.getElementById('my - list');
const items = list.getElementsByTagName('li');
const len = items.length;
for (let i = 0; i < len; i++) {items[i].style.color ='red';
}

7.3 内存管理

7.3.1 理解垃圾回收机制

JavaScript采用自动垃圾回收机制，通过标记清除（Mark - and - Sweep）算法回收不再使用的内存。当一个对象不再被任何变量引用时，它就会被标记为可回收，垃圾回收器会在适当的时候回收其占用的内存。

7.3.2 避免内存泄漏

内存泄漏是指不再使用的内存没有被及时回收，导致内存占用不断增加。闭包是导致内存泄漏的常见原因之一，下面着重介绍闭包相关的内存泄漏场景及解决办法。

• 闭包导致内存泄漏的原理：闭包是指函数可以访问并操作其外部作用域的变量，即使外部函数已经执行完毕。如果闭包引用的外部变量在闭包外不再使用，但闭包仍然存在，会导致该变量无法被回收。
• 错误示例1：事件监听器中的闭包内存泄漏

const element = document.getElementById('myElement');
function setupClickListener() {const largeData = new Array(1000000).fill(1);element.addEventListener('click', function clickHandler() {// clickHandler 形成闭包，largeData无法被回收console.log('Element clicked');});
}
setupClickListener();

在这个例子中， clickHandler 函数形成了闭包，它引用了 setupClickListener 函数作用域内的 largeData 。即使 setupClickListener 函数执行完毕， largeData 不再被外部使用，但由于 clickHandler 仍然存在（作为事件监听器）， largeData 无法被垃圾回收，从而导致内存泄漏。

• 错误示例2：返回函数形成的闭包内存泄漏

function outer() {const data = {value: new Array(500000).fill(42)};return function inner() {// inner 函数形成闭包，data无法被回收return data.value;};
}
const closureFunction = outer();
// 后续代码中，outer 函数作用域内的 data 不再被外部使用，但因闭包存在无法回收

这里 outer 函数返回的 inner 函数形成闭包，持续引用 data 对象。即使 outer 函数执行结束， data 在外部不再被使用，可因为 inner 函数的存在， data 不能被垃圾回收，造成内存泄漏。

• 解决办法：

• 及时移除事件监听器：在不需要事件监听器时，使用 removeEventListener 方法移除它，从而解除闭包对外部变量的引用。

const element = document.getElementById('myElement');
function setupClickListener() {const largeData = new Array(1000000).fill(1);const clickHandler = function() {console.log('Element clicked');};element.addEventListener('click', clickHandler);// 假设在某个条件下需要移除事件监听器setTimeout(() => {element.removeEventListener('click', clickHandler);// 此时 clickHandler 不再被引用，largeData 可以被回收}, 5000);
}
setupClickListener();

• 手动解除闭包引用：如果闭包不再需要使用，可以将闭包赋值为 null ，强制解除对外部变量的引用。

function outer() {const data = {value: new Array(500000).fill(42)};return function inner() {return data.value;};
}
let closureFunction = outer();
// 使用闭包
closureFunction();
// 不再需要闭包时
closureFunction = null;
// 此时 data 可以被垃圾回收

7.3.3 如何查看内存泄漏

• Chrome DevTools：

• 使用“Memory”面板拍摄快照对比：打开开发者工具的“Memory”面板，先点击“Take snapshot”获取页面初始状态的内存快照。然后进行一系列操作，比如频繁触发可能导致内存泄漏的函数或事件。操作完成后，再次点击“Take snapshot”获取新的内存快照。在快照对比界面，可以查看对象的数量变化，若某些对象数量持续增加且无合理原因，可能存在内存泄漏。例如在上述闭包导致内存泄漏的代码示例中，多次触发点击事件后，对比快照会发现 largeData 相关对象没有减少，反而不断增多。

• 使用“Record”功能记录内存变化：点击“Record”开始记录内存使用情况，在记录期间进行操作。完成操作后，点击“Stop”停止记录，此时会生成一个时间轴，展示内存使用随时间的变化趋势。如果在操作过程中内存持续上升且没有回落，可能存在内存泄漏。

• Performance API：通过 performance.memory 属性可以获取内存相关信息，包括当前的堆内存使用量等。可以在代码中合适的位置插入获取内存信息的代码，比如在某个函数执行前后，对比内存使用量的变化。

console.log('函数执行前内存使用量:', performance.memory.usedJSHeapSize);
// 执行可能导致内存泄漏的函数
someFunctionThatMayLeakMemory();
console.log('函数执行后内存使用量:', performance.memory.usedJSHeapSize);

如果执行后内存使用量大幅增加且后续没有下降，就需要进一步排查是否存在内存泄漏。

• Node.js环境下的排查工具：

• 使用 heapdump 模块：安装 heapdump 模块后，在代码中合适位置插入 heapdump.writeSnapshot() 方法来生成堆内存快照文件。例如：

const heapdump = require('heapdump');
// 执行一些操作后生成快照
setTimeout(() => {heapdump.writeSnapshot();
}, 5000);

然后使用 node - heapdump 等工具分析生成的快照文件，查看对象的引用关系和内存占用情况，找出可能导致内存泄漏的对象。

• 借助 process.memoryUsage() 方法：该方法可以获取当前Node.js进程的内存使用信息，包括RSS（resident set size，进程占用的物理内存大小）、heapTotal（V8堆的总大小）和heapUsed（V8堆中已使用的大小）等。可以在代码中定期调用该方法，观察内存使用趋势，判断是否有内存泄漏。

setInterval(() => {const memoryUsage = process.memoryUsage();console.log('RSS:', memoryUsage.rss);console.log('Heap Total:', memoryUsage.heapTotal);console.log('Heap Used:', memoryUsage.heapUsed);
}, 1000);

通过这些方法，可以有效避免闭包导致的内存泄漏，提升JavaScript代码的内存使用效率，进而优化整体性能。