从入门到精通 JavaScript 1000例实战开发专栏--第九章：性能优化

最新推荐文章于 2025-08-05 17:55:38 发布

小蘑菇二号

最新推荐文章于 2025-08-05 17:55:38 发布

阅读量860

点赞数 15

CC 4.0 BY-SA版权

分类专栏：入门到精通 JavaScript 1000例实战开发文章标签： javascript 性能优化开发语言

本文链接：https://blog.youkuaiyun.com/MHD0815/article/details/145786558

入门到精通 JavaScript 1000例实战开发专栏收录该内容

35 篇文章

订阅专栏

第九章：性能优化

章节简介

本章将深入讲解JavaScript和前端开发中的性能优化技巧，包括减少DOM操作的开销、图片懒加载与资源预加载、避免内存泄漏，以及如何使用性能测试工具来评估和优化应用性能。通过本章的学习，您将能够掌握提升网页性能的核心方法，并构建更加高效的应用。

1. 减少DOM操作的开销

1.1 DOM操作的性能问题

频繁的DOM操作会导致浏览器重新计算布局（reflow）和重绘（repaint），从而影响页面性能。

1.2 优化策略

批量操作：将多次DOM操作合并为一次，减少对DOM树的修改。

javascript

深色版本

const ul = document.createElement('ul');
for (let i = 0; i < 10; i++) {
    const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    ul.appendChild(li);
}
document.body.appendChild(ul);

使用文档片段（DocumentFragment）：在内存中构建DOM结构，最后一次性插入到页面中。

javascript

深色版本

const fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
    const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    fragment.appendChild(li);
}
document.querySelector('ul').appendChild(fragment);

避免频繁读写属性：如果需要多次读取或设置某个属性，可以将其缓存到变量中。
```
 
```
javascript
深色版本
```
const style = window.getComputedStyle(element);
const width = style.width;
const height = style.height;
```

2. 图片懒加载与资源预加载

2.1 图片懒加载

懒加载是一种延迟加载技术，只有当用户滚动到图片区域时才加载图片，从而减少初始页面加载时间。

实现方式：使用IntersectionObserver API监听元素是否进入视口。

javascript

深色版本

const images = document.querySelectorAll('img.lazy');

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            img.classList.remove('lazy');
            observer.unobserve(img);
        }
    });
});

images.forEach(img => observer.observe(img));

2.2 资源预加载

通过<link rel="preload">标签提前加载关键资源，提升用户体验。

html

深色版本

<link rel="preload" href="style.css" as="style">
<link rel="preload" href="script.js" as="script">

3. 避免内存泄漏

3.1 内存泄漏的常见原因

未释放的引用：全局变量或闭包中保留了对不再使用的对象的引用。
事件监听器未移除：绑定的事件监听器未被清除。
定时器未清理：setInterval或setTimeout未被正确清除。

3.2 解决方案

清理无用引用：确保在组件销毁时解除对DOM元素或其他对象的引用。

javascript

深色版本

let element = document.getElementById('myElement');
function cleanup() {
    element = null; // 清理引用
}

移除事件监听器：使用removeEventListener清理不再需要的事件监听器。

javascript

深色版本

const handler = () => console.log('Clicked');
element.addEventListener('click', handler);
element.removeEventListener('click', handler);

清理定时器：使用clearTimeout或clearInterval清理定时器。
```
 
```
javascript
深色版本
```
const timer = setInterval(() => console.log('Tick'), 1000);
clearInterval(timer);
```