我多年来编码总结的8个JavaScript性能优化技巧

JavaScript

嘿，大家好！！我想分享这些JavaScript性能技巧，我觉得每个人都应该知道，因为对我来说，学习这些技巧花费了很多时间和精力。所以，这八条性能建议在我的项目中真正发挥了作用。记得把这些技巧收藏起来，以后用得着。

在 JavaScript 中启用严格模式可以捕捉常见的编码失误，防止使用未声明的变量，还能让你的代码运行更快。

如何开启严格模式。

function myFunction() {  
    // 请在这里编写你的代码  
}

“use strict;” 可以让浏览器在严格模式下运行，从而提升性能。

在 JavaScript 中，直接操作 DOM 是最慢的操作之一；因此，减少直接操作 DOM 的次数可以显著提升性能。

代替：

const list = document.getElementById('myList');
const items = ['Item 1', 'Item 2', 'Item 3'];

items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    list.appendChild(li); // 将li添加到list中
});

使用文档片段,

const list = document.getElementById('myList');
const items = ['Item 1', 'Item 2', 'Item 3'];
const fragment = document.createDocumentFragment();

你可以通过使用文档片段来批处理DOM更新，这比单独更新要高效得多。

个人笔记: 切换到动态列表中的文档片段（fragments）后，我注意到渲染时间显著减少，尤其是在处理大量数据时。

将事件监听器附加到多个DOM元素上可能效率较低。事件委托是一种技术，允许你更高效地处理事件，而无需直接将事件监听器附加到多个DOM元素上。你可以在DOM的更靠近根节点的层级处理事件。

而不是：

    const buttons = document.querySelectorAll('.myButton');
    buttons.forEach(button => {
        button.addEventListener('click', function() {
            // 处理点击
        });
    });

试试用事件代理。

     document.body.addEventListener('click', function(event) {  
        if (event.target.classList.contains('myButton')) {  
            // 处理点击  
        }  
    });

这样一来，你为父元素添加一个事件监听器，从而节省内存和提升性能。

个人笔记: 使用事件委托让我的代码更清晰，更易于维护，特别是当动态添加新元素时，这让我的代码更易于维护。

内存泄漏问题可能会让你的应用变慢甚至崩溃，要特别注意闭包和不必要的引用，这会影响垃圾回收。

常见误区:

let 元素 = document.getElementById('myElement');  
元素.addEventListener('click', function() {  
    console.log('点击！');  
});  
// 在后面的代码中  
元素 = null; // 这不会移除点击事件监听器

正确的清理方法:

    let element = document.getElementById('myElement');
    function handleClick() {
        console.log('Clicked!'); // 输出点击信息
    }
    element.addEventListener('click', handleClick); // 添加事件监听器
    // 代码后面的某处
    element.removeEventListener('click', handleClick); // 移除事件监听器
    element = null; // 清空元素

通过及时删除不再需要的事件监听器，你可以防止内存泄漏。

个人笔记: 在注意到我的应用程序随着时间慢慢变慢后，我才发现我没有做好事件监听器的清理工作。修复这个问题使性能有了显著提升。

循环可能会拖慢性能；一些简单的调整可以让它们运行得更顺畅。

不用说:

    for (let i = 0; i < array.length; i++) {  
        // 处理 array[i]  
    }

缓存长度值：

    for (let i = 0, len = array.length; i < len; i++) {  
        // 处理一下 array[i]  
    }

或者使用像 for...of 和数组方法（例如 forEach）这样的现代方法，这些方法已经被优化。

个人笔记： 在一个性能关键的程序中，在循环中缓存数组的长度明显缩短了执行时间。

对于那些经常被调用的函数，比如调整窗口大小或滚动，可以使用防抖或节流以限制它们的运行频率。

去抖示例1:

    function debounce(func, delay) {  
        let timeout;  
        return function() {  
            clearTimeout(timeout);  
            timeout = setTimeout(func, delay);  
        }  
    }  

    window.addEventListener('resize', debounce(function() {  
        // 处理窗口大小变化  
    }, 250));

节流示例:

    function throttle(func, limit) {  
        let inThrottle;  
        return function() {  
            if (!inThrottle) {  
                func();  
                inThrottle = true;  
                setTimeout(() => inThrottle = false, limit);  
            }  
        }  
    }  
    window.addEventListener('scroll', throttle(function() {  
        // 处理滚动事件，防止频繁触发  
    }, 250));

个人笔记： 在窗口大小调整事件处理程序中实现防抖处理解决了延迟问题，使界面感觉更加流畅。

非阻塞代码能使你的应用程序保持响应性。可以使用异步编程特性，例如 async / await 和 Promises。

例子

     async function fetchData() {  
        try {  
            const response = await fetch('https://api.example.com/data');  
            const data = await response.json();  
            // 一些数据处理  
        } catch (error) {  
            console.error(error);  
        }  
    }

通过异步处理操作，你可以避免主线程被阻塞。

个人备注: 使用 async/await 让我的代码更简洁，并且通过避免在获取数据时卡住 UI 来提升性能。

缓存资源能大大提升加载速度。通过在服务器上设置合适的缓存头，并利用服务工作者进行更高级的缓存来实现。

服务工作示例

    self.addEventListener('install', function (event) {
        event.waitUntil(
            caches.open('v1').then(function (cache) {
                return cache.addAll([
                    '/index.html',
                    '/styles.css',
                    '/script.js',
                ]);
            })
        );
    });

通过缓存静态资源，可以减少网络请求次数，从而提升性能。

注: 实现了服务工作者后，我的网页应用程序在后续访问时几乎可以瞬间加载，提升了用户的体验感受。

最后的感想:

• 更改后的测试: 始终在优化前后对应用程序进行基准测试，以确保优化有效果。
• 保持技术更新: JavaScript 和 web 技术发展迅速。持续学习以掌握新功能和最佳实践。

如果你有关于JavaScript性能的小技巧或经验，请在下面的评论区分享。

编码愉快！

感谢你一直帮我到最后！如果你喜欢这些内容的话，并想支持我的工作，最好的方式有以下几种：

• 关注我在 Medium 上的文章。
• 在我的 LinkedIn 上联系我。