在 JavaScript 开发中，性能优化是一个至关重要的方面，它可以提升应用的响应速度、减少资源消耗，从而提供更好的用户体验。以下是从多个方面进行 JavaScript 性能优化的详细实战内容：
1. 代码加载优化
1.1 异步加载脚本
使用 async 和 defer 属性可以让脚本在不阻塞 HTML 解析的情况下加载。
※ async：脚本会异步加载，加载完成后立即执行，执行顺序可能与文档中出现的顺序不一致。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Async Script</title><script async src="script.js"></script>
</head>
<body><!-- 页面内容 -->
</body>
</html>
※defer：脚本会异步加载，在文档解析完成后、DOMContentLoaded 事件触发前按顺序执行。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Defer Script</title><script defer src="script.js"></script>
</head>
<body><!-- 页面内容 -->
</body>
</html>
1.2 动态加载脚本
根据需要动态加载脚本，避免一次性加载所有脚本。
function loadScript(src) {return new Promise((resolve, reject) => {const script = document.createElement('script');script.src = src;script.onload = resolve;script.onerror = reject;document.head.appendChild(script);});
}// 使用示例
loadScript('script.js').then(() => {console.log('脚本加载完成');}).catch((error) => {console.error('脚本加载失败', error);});
2. 算法和数据结构优化
2.1 选择合适的数据结构
根据具体需求选择合适的数据结构可以显著提高代码性能。例如，查找操作使用 Map 比使用普通对象更快。
// 使用普通对象
const obj = {key1: 'value1',key2: 'value2'
};
console.log(obj.hasOwnProperty('key1')); // 查找操作// 使用 Map
const map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');
console.log(map.has('key1')); // 查找操作更快
2.2 优化算法复杂度
避免使用复杂度高的算法，尽量使用复杂度低的算法。例如，在排序时，如果数据量较小，可以使用冒泡排序；如果数据量较大，使用快速排序。
// 冒泡排序
function bubbleSort(arr) {const len = arr.length;for (let i = 0; i < len; i++) {for (let j = 0; j < len - i - 1; j++) {if (arr[j] > arr[j + 1]) {[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];}}}return arr;
}// 快速排序
function quickSort(arr) {if (arr.length <= 1) {return arr;}const pivot = arr[0];const left = [];const right = [];for (let i = 1; i < arr.length; i++) {if (arr[i] < pivot) {left.push(arr[i]);} else {right.push(arr[i]);}}return [...quickSort(left), pivot, ...quickSort(right)];
}const arr = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
console.log(quickSort(arr));
3. DOM 操作优化
3.1 减少 DOM 操作次数
频繁的 DOM 操作会导致浏览器重排和重绘，影响性能。可以将需要操作的 DOM 元素先存储在变量中，避免多次查询。
// 不好的做法
for (let i = 0; i < 10; i++) {document.getElementById('myList').innerHTML += `<li>Item ${i}</li>`;
}// 好的做法
const list = document.getElementById('myList');
let html = '';
for (let i = 0; i < 10; i++) {html += `<li>Item ${i}</li>`;
}
list.innerHTML = html;
3.2 使用 DocumentFragment
DocumentFragment 是一个轻量级的 DOM 对象，它可以在内存中操作，最后一次性插入到真实 DOM 中，减少重排和重绘。
const fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {const li = document.createElement('li');li.textContent = `Item ${i}`;fragment.appendChild(li);
}
const list = document.getElementById('myList');
list.appendChild(fragment);
4. 事件处理优化
4.1 事件委托
事件委托是利用事件冒泡的原理，将事件处理程序绑定到父元素上，而不是每个子元素上，减少事件处理程序的数量。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Event Delegation</title>
</head>
<body><ul id="myList"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul><script>const list = document.getElementById('myList');list.addEventListener('click', (event) => {if (event.target.tagName === 'LI') {console.log('Clicked on:', event.target.textContent);}});</script>
</body>
</html>
4.2 节流和防抖
※ 节流：在一定时间内，只执行一次函数。适用于滚动加载、窗口 resize 等场景。
function throttle(func, delay) {let timer = null;return function() {if (!timer) {func.apply(this, arguments);timer = setTimeout(() => {timer = null;}, delay);}};
}window.addEventListener('scroll', throttle(() => {console.log('Scrolling...');
}, 200));
※ 防抖：在一定时间内，只有最后一次调用函数才会执行。适用于搜索框输入提示等场景。
function debounce(func, delay) {let timer = null;return function() {clearTimeout(timer);timer = setTimeout(() => {func.apply(this, arguments);}, delay);};
}const input = document.getElementById('searchInput');
input.addEventListener('input', debounce(() => {console.log('Searching...');
}, 300));
5. 内存管理优化
5.1 避免内存泄漏
※ 及时解除事件绑定，避免在元素移除后事件处理程序仍然存在。
const button = document.getElementById('myButton');
const clickHandler = () => {console.log('Button clicked');
};
button.addEventListener('click', clickHandler);// 移除元素前解除事件绑定
button.removeEventListener('click', clickHandler);
document.body.removeChild(button);
※ 避免循环引用，确保对象之间没有相互引用导致无法被垃圾回收。
5.2 手动释放内存
在不需要某些对象时，将其设置为 null，帮助垃圾回收机制回收内存。
let largeObject = {data: new Array(1000000).fill(0)
};
// 使用 largeObject
// ...
// 不再需要时释放内存
largeObject = null;
通过以上这些优化策略，可以显著提升 JavaScript 代码的性能，为用户提供更流畅的使用体验。
