以下是一些 JavaScript 性能优化的方法:
1. 减少全局变量的使用
全局变量会增加作用域链查找的时间,并且可能引发命名冲突。尽量使用局部变量。
// 不好的做法
var globalVar = 10;
function test() {
console.log(globalVar);
}
// 好的做法
function test() {
var localVar = 10;
console.log(localVar);
}
2. 缓存 DOM 查询结果
多次查询同一个 DOM 元素会影响性能,应该将查询结果缓存起来。
// 不好的做法
for (var i = 0; i < 10; i++) {
document.getElementById('myElement').style.color = 'red';
}
// 好的做法
var myElement = document.getElementById('myElement');
for (var i = 0; i < 10; i++) {
myElement.style.color = 'red';
}
3. 避免频繁的 DOM 操作
DOM 操作是比较昂贵的,尽量批量操作 DOM。
// 不好的做法
for (var i = 0; i < 10; i++) {
var newElement = document.createElement('div');
document.body.appendChild(newElement);
}
// 好的做法
var fragment = document.createDocumentFragment();
for (var i = 0; i < 10; i++) {
var newElement = document.createElement('div');
fragment.appendChild(newElement);
}
document.body.appendChild(fragment);
4. 节流和防抖
对于一些高频触发的事件(如滚动、窗口大小改变等),使用节流和防抖技术可以减少不必要的函数调用。
// 防抖函数
function debounce(func, delay) {
let timer;
return function() {
const context = this;
const args = arguments;
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(context, args);
}, delay);
};
}
// 节流函数
function throttle(func, limit) {
let inThrottle;
return function() {
const context = this;
const args = arguments;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}
5. 优化循环
避免在循环中进行复杂的计算,尽量减少循环次数。
// 不好的做法
var arr = [1, 2, 3, 4, 5];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
// 好的做法
var arr = [1, 2, 3, 4, 5];
var len = arr.length;
for (var i = 0; i < len; i++) {
console.log(arr[i]);
}