经验证的 JavaScript 性能优化技术可提高 Web 应用速度

JavaScript 性能优化对于创建快速响应的 Web 应用程序至关重要。作为一名开发人员，我发现实施这些策略可以显着提高 JavaScript 代码的速度和效率。

最小化 DOM 操作是优化 JavaScript 性能的关键因素。文档对象模型 (DOM) 是网页 HTML 结构的表示，操作它的计算成本可能很高。为了减少 DOM 操作的影响，我总是尝试批量更新并使用文档片段。

以下是如何使用文档片段来最小化 DOM 操作的示例：

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    const element = document.createElement('div');
    element.textContent = `Item ${i}`;
    fragment.appendChild(element);
}
document.body.appendChild(fragment);

通过使用文档片段，我们可以在内存中执行所有 DOM 操作，然后通过一次操作将片段追加到 DOM，从而减少回流和重绘的次数。

实现延迟加载是提高 JavaScript 性能的另一个有效策略。该技术涉及仅在需要时加载资源并执行脚本，而不是预先加载所有内容。这种方法可以显着缩短初始加载时间，特别是对于大型应用程序。

这是延迟加载图像的简单示例：

function lazyLoadImage(img) {
    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                img.src = img.dataset.src;
                observer.unobserve(img);
            }
        });
    });
    observer.observe(img);
}

document.querySelectorAll('img[data-src]').forEach(lazyLoadImage);

此代码使用 Intersection Observer API 仅在图像进入视图时加载图像，从而减少了初始页面加载时间。

利用 Web Workers 是提高 JavaScript 性能的强大策略，尤其是对于计算密集型任务。 Web Workers 允许我们在后台线程中运行脚本，保持主线程响应并防止 UI 冻结。

这是使用 Web Worker 执行繁重计算的示例：

// main.js
const worker = new Worker('worker.js');
worker.onmessage = function(event) {
    console.log('Result:', event.data);
};
worker.postMessage({ number: 1000000 });

// worker.js
self.onmessage = function(event) {
    const result = fibonacci(event.data.number);
    self.postMessage(result);
};

function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

在此示例中，我们将大型斐波那契数的计算卸载给 Web Worker，防止其阻塞主线程。

优化循环和迭代对于提高 JavaScript 执行速度至关重要。使用适当的数组方法并避免不必要的迭代可以在性能上产生显着的差异。

考虑这个优化循环的示例：

// Unoptimized
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}

// Optimized
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);

优化版本使用reduce方法，通常比传统的for循环更快、更简洁。

实现缓存机制是提高 JavaScript 性能的另一个有效策略。通过将经常访问的数据存储在内存或本地存储中，我们可以减少服务器请求的数量并加快我们的应用程序的速度。

这是一个简单的缓存机制的示例：

const cache = new Map();

async function fetchData(url) {
    if (cache.has(url)) {
        return cache.get(url);
    }
    const response = await fetch(url);
    const data = await response.json();
    cache.set(url, data);
    return data;
}

此函数在发出网络请求之前检查请求的数据是否在缓存中，从而可能节省时间和资源。

利用浏览器开发人员工具对于识别和解决 JavaScript 应用程序中的性能问题至关重要。这些工具提供了有关执行时间、内存使用情况和潜在瓶颈的宝贵见解。

例如，使用 Chrome DevTools Performance 选项卡，我们可以记录性能概况并分析我们的代码在哪里花费最多时间：

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    const element = document.createElement('div');
    element.textContent = `Item ${i}`;
    fragment.appendChild(element);
}
document.body.appendChild(fragment);

通过用 console.time 和 console.timeEnd 包装我们的函数，我们可以在浏览器控制台中测量其执行时间。

使用代码分割是优化 JavaScript 性能的强大技术，尤其是在大型应用程序中。通过将 JavaScript 包分成更小的块并仅加载每个路由或功能所需的代码，我们可以显着减少初始加载时间。

这是我们如何使用动态导入在 React 应用程序中实现代码拆分的示例：

function lazyLoadImage(img) {
    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                img.src = img.dataset.src;
                observer.unobserve(img);
            }
        });
    });
    observer.observe(img);
}

document.querySelectorAll('img[data-src]').forEach(lazyLoadImage);

在此示例中，LazyComponent 仅在渲染 MyComponent 时加载，从而减少了初始包大小。

这些策略为优化 JavaScript 性能奠定了坚实的基础，但重要的是要记住性能优化是一个持续的过程。随着我们的应用程序的成长和发展，我们需要不断监控和改进我们的代码以确保最佳性能。

我发现特别有效的一个策略是使用记忆化来进行昂贵的计算。记忆化涉及缓存函数调用的结果，并在相同的输入再次出现时返回缓存的结果。这可以显着加快使用相同参数频繁调用的函数的速度。

这是一个记忆函数的示例：

// main.js
const worker = new Worker('worker.js');
worker.onmessage = function(event) {
    console.log('Result:', event.data);
};
worker.postMessage({ number: 1000000 });

// worker.js
self.onmessage = function(event) {
    const result = fibonacci(event.data.number);
    self.postMessage(result);
};

function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

JavaScript 性能优化的另一个重要方面是高效的内存管理。 JavaScript 使用自动垃圾收集，但如果不小心，我们仍然可能会遇到内存泄漏。内存泄漏的一个常见原因是忘记事件侦听器。

为了防止这种情况，我们应该在不再需要事件监听器时删除它们：

// Unoptimized
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}

// Optimized
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);

该函数添加了一个事件监听器，触发一次后会自动删除自身，防止其在内存中徘徊。

处理大型数据集时，使用适当的数据结构可以显着提高性能。例如，对于大型集合，使用 Set 而不是 Array 来检查成员资格可以更快：

const cache = new Map();

async function fetchData(url) {
    if (cache.has(url)) {
        return cache.get(url);
    }
    const response = await fetch(url);
    const data = await response.json();
    cache.set(url, data);
    return data;
}

Set 操作通常要快得多，特别是对于大型数据集。

我发现的另一种有用的技术是去抖动或限制函数调用，特别是对于可能频繁触发的事件处理程序（例如滚动或调整大小事件）。去抖动确保函数仅在自上次调用以来经过一定时间后才被调用，而限制则限制调用函数的频率。

这是去抖动函数的示例：

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    const element = document.createElement('div');
    element.textContent = `Item ${i}`;
    fragment.appendChild(element);
}
document.body.appendChild(fragment);

此去抖动功能只会记录“调整大小！”窗口停止调整大小 250 毫秒后。

在处理异步操作时，与基于回调的方法相比，使用 Promises 或 async/await 可以生成更具可读性和可维护性的代码。但是，正确处理错误以防止未处理的承诺拒绝非常重要，这可能会导致性能问题：

function lazyLoadImage(img) {
    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                img.src = img.dataset.src;
                observer.unobserve(img);
            }
        });
    });
    observer.observe(img);
}

document.querySelectorAll('img[data-src]').forEach(lazyLoadImage);

此函数可以正确处理获取操作中的潜在错误，防止它们在应用程序的其他地方引起问题。

处理大型列表或表格时，实现虚拟滚动可以显着提高性能。虚拟滚动只涉及渲染当前在视口中可见的项目，这可以大大减少 DOM 元素的数量并提高滚动性能：

类 VirtualList {
    构造函数（容器，itemHeight，renderItem）{
        this.container = 容器；
        this.itemHeight = itemHeight;
        this.renderItem = renderItem;
        this.items = [];
        this.scrollTop = 0;
        this.visibleItems = [];

        this.container.addEventListener('scroll', this.onScroll.bind(this));
    }

    设置项目（项目）{
        this.items = 项目；
        this.container.style.height = `${items.length * this.itemHeight}px`;
        this.render();
    }

    onScroll() {
        this.scrollTop = this.container.scrollTop;
        this.render();
    }

    使成为（） {
        const startIndex = Math.floor(this.scrollTop / this.itemHeight);
        const endIndex = Math.min(this.items.length - 1, startIndex Math.ceil(this.container.clientHeight / this.itemHeight));

        this.visibleItems = [];
        for (让 i = startIndex; i ; 
    `<div>



<p>这种虚拟滚动的实现可以处理包含数千个项目的列表，同时保持平滑的滚动性能。</p>
<p>总之，优化 JavaScript 性能是一个多方面的过程，需要关注代码和应用程​​序架构的各个方面。通过实施这些策略并持续监控和改进我们的代码，我们可以创建快速、高效、响应灵敏的 JavaScript 应用程序，从而提供出色的用户体验。请记住，性能优化是一个持续的过程，保持最新的最佳实践和工具的更新对于维护高性能 JavaScript 应用程序至关重要。</p>


<hr>

<h2>
  
  
  我们的创作
</h2>

<p>一定要看看我们的创作：</p>

<p><strong>投资者中心</strong> | <strong>智能生活</strong> | <strong>时代与回响</strong> | <strong>令人费解的谜团</strong> | <strong>印度教</strong> | <strong>精英开发</strong> | <strong>JS学校</strong></p>


<hr>

<h3>
  
  
  我们在媒体上
</h3>

<p><strong>科技考拉洞察</strong> | <strong>时代与回响世界</strong> | <strong>投资者中央媒体</strong> | <strong>令人费解的谜团</strong> | <strong>科学与时代媒介</strong> | <strong>现代印度教</strong></p>


          </div>

            
        

以上是经验证的 JavaScript 性能优化技术可提高 Web 应用速度的详细内容。更多信息请关注PHP中文网其他相关文章！