优化JavaScript性能的五个技巧_js性能优化-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_79987150/article/details/145711616

优化JavaScript性能的五个技巧

JavaScript是现代Web开发中不可或缺的语言，随着Web应用程序的复杂性不断增加，性能优化变得尤为重要。无论是为了提高用户体验，还是为了降低服务器负担，优化JavaScript代码的执行效率都至关重要。本文将介绍五个常见且有效的JavaScript性能优化技巧，帮助开发者在构建高效、流畅的Web应用时少走弯路。

一、减少DOM操作

DOM操作是Web开发中的瓶颈之一，频繁的DOM访问和修改会导致页面渲染的延迟，影响性能。因此，优化DOM操作是提升Web应用性能的一个重要环节。

优化方法：

批量操作DOM：每次DOM操作都涉及到页面的重新渲染，如果在多个地方操作DOM，浏览器会多次重排和重绘页面。可以使用documentFragment或将操作封装在requestAnimationFrame中，尽量减少DOM操作的次数。
```
const fragment = document.createDocumentFragment();
// 执行多次DOM操作
fragment.appendChild(newElement);
fragment.appendChild(anotherElement);
document.body.appendChild(fragment);  // 最后一次插入DOM
```
避免频繁的Reflow和Repaint：Reflow是浏览器根据DOM树重新计算元素的几何属性，Repaint是浏览器重新绘制元素。频繁的Reflow和Repaint会消耗大量性能。可以通过classList添加/删除类、使用visibility代替display: none等技巧来避免不必要的重排和重绘。
```
// 使用visibility: hidden替代display: none
element.style.visibility = 'hidden'; 
element.style.visibility = 'visible';
```

二、减少内存泄漏

内存泄漏是性能下降的一个常见原因，它会导致浏览器的内存使用量持续增长，进而影响JavaScript执行的效率。尤其是在单页面应用（SPA）中，内存泄漏的影响尤为显著。

优化方法：

避免全局变量：全局变量可能会在页面加载后一直存在，无法被垃圾回收器回收。尽量使用局部变量，或将变量放入闭包中，以确保它们的生命周期短且不会泄漏。
```
(function() {
    var localVar = 'I am local';
    // 使用localVar进行操作
})();
```

清理事件监听器：在单页面应用中，事件监听器如果没有正确移除，会导致对象无法被垃圾回收。确保在元素不再需要时，手动移除事件监听器。

const element = document.getElementById('myButton');
function handleClick() {
    console.log('Button clicked');
}
element.addEventListener('click', handleClick);

// 移除事件监听器
element.removeEventListener('click', handleClick);

三、延迟加载和懒加载

延迟加载和懒加载是提高Web应用性能的有效方式，特别是当页面包含大量的资源（如图片、脚本等）时，延迟加载可以减少初始加载时间，提升用户体验。

优化方法：

图片懒加载：在用户滚动页面时再加载图片，减少初始加载时的网络请求和页面渲染压力。可以通过原生的loading="lazy"属性，或者使用JavaScript动态加载图片。

<img src="image.jpg" loading="lazy" alt="Lazy loaded image">

或者使用JavaScript：

const images = document.querySelectorAll('img.lazy');
const config = {
    rootMargin: '0px 0px 256px 0px',
    threshold: 0
};

const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;  // 将data-src中的图片路径赋给src
            img.classList.remove('lazy');
            observer.unobserve(img);
        }
    });
}, config);

images.forEach(image => {
    observer.observe(image);
});

JavaScript懒加载：通过async和defer属性，或者使用动态导入（import()）来延迟加载JavaScript文件，确保只有在需要时才加载和执行。

<script src="script.js" async></script>  <!-- 异步加载 -->
<script src="script.js" defer></script>  <!-- 延迟执行 -->

或者使用动态导入：

if (needFeature) {
    import('./featureModule.js').then(module => {
        // 使用导入的模块
    });
}

四、优化循环性能

循环操作是JavaScript中常见的性能瓶颈，尤其是在处理大量数据时，如何高效地编写循环，避免不必要的计算和操作，是提升性能的关键。

优化方法：

缓存数组长度：在循环中，访问数组的length属性每次都需要重新计算，特别是在大数组中，可能会影响性能。将length值缓存到局部变量中可以减少不必要的计算。
```
const arr = [1, 2, 3, 4, 5];
const len = arr.length;
for (let i = 0; i < len; i++) {
    console.log(arr[i]);
}
```
使用for而非forEach：在性能要求较高的场合，for循环通常比forEach性能更好，尤其是在需要提前退出循环时。
```
for (let i = 0; i < arr.length; i++) {
    if (arr[i] === 3) break;  // 允许提前退出循环
}
```

五、避免频繁的闭包创建

闭包是JavaScript中强大的特性，它能够访问函数外部的变量。然而，频繁创建闭包可能会导致内存占用增大，特别是当闭包引用了大量外部变量时，会影响性能。

优化方法：

减少不必要的闭包：在某些场景下，可以通过将函数参数传递给外部作用域的方式来减少闭包的使用，尤其是当不再需要闭包引用时，可以避免创建不必要的闭包。
```
function setupButton() {
    const button = document.getElementById('myButton');
    button.addEventListener('click', () => {
        // 用闭包引用外部变量
        console.log('Button clicked');
    });
}
```
这个例子中，如果没有必要引用外部变量，尽量避免创建闭包。可以直接在事件处理函数内写逻辑，减少闭包的生成。