JavaScript性能优化实战

在 JavaScript 开发中，性能优化是一个至关重要的方面，它可以提升应用的响应速度、减少资源消耗，从而提供更好的用户体验。以下是从多个方面进行 JavaScript 性能优化的详细实战内容：

1. 代码加载优化

1.1 异步加载脚本

使用 async 和 defer 属性可以让脚本在不阻塞 HTML 解析的情况下加载。

※ async：脚本会异步加载，加载完成后立即执行，执行顺序可能与文档中出现的顺序不一致。

java 复制代码

<!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 事件触发前按顺序执行。

java 复制代码

<!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 动态加载脚本

根据需要动态加载脚本，避免一次性加载所有脚本。

java 复制代码

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 比使用普通对象更快。

java 复制代码

// 使用普通对象
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 优化算法复杂度

避免使用复杂度高的算法，尽量使用复杂度低的算法。例如，在排序时，如果数据量较小，可以使用冒泡排序；如果数据量较大，使用快速排序。

java 复制代码

// 冒泡排序
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 元素先存储在变量中，避免多次查询。

java 复制代码

// 不好的做法
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 中，减少重排和重绘。

java 复制代码

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 事件委托

事件委托是利用事件冒泡的原理，将事件处理程序绑定到父元素上，而不是每个子元素上，减少事件处理程序的数量。

java 复制代码

<!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 等场景。

java 复制代码

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));

※ 防抖：在一定时间内，只有最后一次调用函数才会执行。适用于搜索框输入提示等场景。

java 复制代码

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 避免内存泄漏

※ 及时解除事件绑定，避免在元素移除后事件处理程序仍然存在。

java 复制代码

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，帮助垃圾回收机制回收内存。

java 复制代码

let largeObject = {
    data: new Array(1000000).fill(0)
};
// 使用 largeObject
// ...
// 不再需要时释放内存
largeObject = null;

通过以上这些优化策略，可以显著提升 JavaScript 代码的性能，为用户提供更流畅的使用体验。