JavaScript性能优化（上）

1. 减少 DOM 操作

减少 DOM 操作是优化 JavaScript 性能的重要方法，因为频繁的 DOM 操作会导致浏览器重绘和重排，从而影响性能。以下是一些具体的策略和技术，可以帮助有效减少 DOM 操作：

1.1. 批量更新 DOM

• 亲切与母体：将多个 DOM 更新合并为一个操作。例如，可以创建一个空的容器，先在内存中构建所有需要的子元素，最后一次性将这个容器添加到主 DOM 树中。

const fragment = document.createDocumentFragment();  // 假设我们要添加多个元素  
for (let i = 0; i < 100; i++) {  const newElement = document.createElement('div');  newElement.textContent = `Item ${i}`;  fragment.appendChild(newElement);  
}  document.getElementById('container').appendChild(fragment); // 一次性添加  

 

1.2. 使用文档片段（DocumentFragment）

• 文档片段 是一个轻量级的容器，用于存放要添加到 DOM 的元素。使用文档片段可以避免多次操作 DOM，因为它不会引起浏览器的重绘，直到片段被插入到 DOM 中。

const fragment = document.createDocumentFragment();  
// 构建元素  
for (let i = 0; i < 10; i++) {  const div = document.createElement('div');  div.textContent = 'Item ' + i;  fragment.appendChild(div);  
}  document.getElementById('parent').appendChild(fragment); // 插入 DOM  

 

1.3. 最小化 CSS 修改

• 合并样式更改：在对样式进行多次更改时，尽量将这些更改合并进行一次操作，以避免多次计算和重绘。

const element = document.getElementById('myElement');  // 不推荐：多次修改可能会导致多次计算和重绘  
element.style.width = '100px';  
element.style.height = '100px';  
element.style.backgroundColor = 'red';  // 推荐：合并设置  
element.style.cssText = 'width: 100px; height: 100px; background-color: red;';  

 

1.4. 使用 CSS 类切换

• 类替换：通过添加或删除 CSS 类来批量应用样式更改，而不是单独设置每个样式属性。这样可以提高性能，因为浏览器对类的应用通常比对每个属性的应用更高效。

const element = document.getElementById('myElement');  
element.classList.add('new-style');  

 

1.5. 延迟 DOM 操作

• 使用 requestAnimationFrame：对于动画和复杂的布局计算，可以在下一个重绘周期之前推迟 DOM 更改，避免在同一帧中进行多次修改。

requestAnimationFrame(() => {  // 在下一帧中更新 DOM  element.style.transform = 'translateY(100px)';  
});  

 

1.6. 减少不必要的查找

• 缓存 DOM 查询结果：如果需要多次访问同一 DOM 元素，建议将其缓存到变量中，避免重复查询。

const container = document.getElementById('container');  
// 使用 container 变量替代多次查找  
const items = container.getElementsByTagName('div');  

 

1.7. 使用虚拟 DOM（在框架中）

• 框架支持：像 React 这样的前端框架使用虚拟 DOM，把对 DOM 的操作批量合并，优化性能。虽然这种方式不是原生的 JavaScript 优化技术，但了解其原理可以帮助开发者更好地利用这些框架。

1.8.总结

减少 DOM 操作不仅可以提高页面性能，还能改善用户体验。通过批量更新、使用文档片段、最小化样式修改以及合理利用缓存等方法，你就可以显著提升应用的响应速度和执行效率。

2. 使用合适的数据结构

使用合适的数据结构是优化 JavaScript 性能的关键之一。选择合适的数据结构可以提高代码的执行效率、降低内存使用，甚至改善代码的可读性和可维护性。以下是一些常见的数据结构及其适用场景，帮助你在 JavaScript 中做出更好的选择。

2.1. 数组 (Array)

• 用途：用于存储有序的数据集合。

• 特性：支持按索引访问，插入和删除操作相对简单，但在中间插入或删除元素时可能较慢，因为需要移动元素。

const arr = [1, 2, 3, 4];  
arr.push(5);        // 添加元素  
arr.splice(2, 1);  // 删除元素  
console.log(arr);  // 输出: [1, 2, 4, 5]  

 

2.2. 对象 (Object)

• 用途：用于存储键值对，不保证键的顺序。

• 特性：适合存储属性和关系型数据，可以通过对象的属性快速访问和修改值。

const person = {  name: 'Alice',  age: 30  
};  
console.log(person.name); // 输出: Alice  
person.age = 31;          // 修改属性  

 

2.3. Map

• 用途：用于存储键值对，支持任意类型的键。

• 特性：与对象相比，Map 保持插入的顺序，并且可以更高效地进行查找、添加和删除操作。

const map = new Map();  
map.set('name', 'Alice');  
map.set('age', 30);  
console.log(map.get('name')); // 输出: Alice  

 

2.4. Set

• 用途：用于存储唯一值的集合。

• 特性：适合需要去重的场景，支持任意类型的值，且保持插入顺序。Set 的内存占用通常比数组要小。

const set = new Set();  
set.add(1);  
set.add(2);  
set.add(2); // 重复的值不会被添加  
console.log(set.has(1)); // 输出: true  

 

2.5. WeakMap

• 用途：与 Map 类似，但键是弱引用。

• 特性：适用于需要管理内存的场景，因为当键不再被引用时，WeakMap 中能自动清理这些条目。

const weakMap = new WeakMap();  
let obj = {};  
weakMap.set(obj, 'data');  
console.log(weakMap.get(obj)); // 输出: data  
obj = null;  // obj 不再存在，WeakMap 也能释放内存  

 

2.6. WeakSet

• 用途：与 Set 类似，但值是弱引用。

• 特性：适合存储需要被垃圾回收的对象，能够帮助管理内存，提高性能

const weakSet = new WeakSet();  
let obj = {};  
weakSet.add(obj);  
console.log(weakSet.has(obj)); // 输出: true  
obj = null;  // obj 不再存在，WeakSet 也能释放内存  

 

2.7. 链表 (Linked List) 和自定义数据结构

• 用途：适合频繁进行插入和删除操作的场景。

• 特性：相较于数组，链表在中间插入和删除元素的效率更高，但随机访问性能较差。不常用，但在特定场景下非常有效。

class Node {  constructor(data) {  this.data = data;  this.next = null;  }  
}  class LinkedList {  constructor() {  this.head = null;  }  insert(data) {  const newNode = new Node(data);  newNode.next = this.head;  this.head = newNode; // 头部插入  }  
}  const list = new LinkedList();  
list.insert(1);  
list.insert(2);  

选择合适的数据结构的考虑因素

1. 操作类型：根据需要进行的操作（如添加、删除、查找）选择数据结构。
2. 性能需求：不同数据结构在不同操作下的性能表现会有所不同，选择适合的可以减少性能瓶颈。
3. 内存使用：在内存使用方面，Set 和 Map 等结构通常更高效，尤其是在处理大量数据时。
4. 语义：选择有助于理解和维护代码的结构，使代码更具可读性。

2.8.总结

选择合适的数据结构可以显著提高 JavaScript 应用的性能。根据具体的使用场景，考虑操作性能、内存效率和代码可读性来选择最适合的数据结构。

3. 减少内存使用

减少内存使用是 JavaScript 性能优化的重要方面，尤其对于需要处理大量数据或运行在资源有限环境中的应用程序等场景。以下是一些减少 JavaScript 中内存使用的具体策略：

3.1. 避免内存泄漏

内存泄漏是指不再需要的对象仍被引用，导致它们无法被垃圾回收。为避免内存泄漏，可以采取以下策略：

• 解除引用：确保不再使用的对象的引用被解除，特别是在事件处理器中。

function setup() {  const element = document.getElementById('myElement');  element.addEventListener('click', () => {  // 处理点击事件  });  // 离开时，要移除事件监听  return () => {  element.removeEventListener('click', handler);  };  
}  

使用弱引用：使用 WeakMap 和 WeakSet 来存储对象，这样当对象不再被使用时，内存可以自动释放。

const weakMap = new WeakMap();  function storeData(obj, data) {  weakMap.set(obj, data);  
}  function clearData(obj) {  weakMap.delete(obj); // 解除引用，允许回收  
}  

 

3.2. 限制全局变量

• 尽量减少全局变量：全局变量在 JavaScript 中生命周期较长，容易导致内存泄漏和命名冲突。可以将变量封装在函数内部或使用模块化的方式。

(function() {  const myVariable = 'local value'; // 局部变量  
})(); // 立即执行函数，封闭变量  

 

3.3. 优化数据结构

• 选择合适的数据结构：如前所述，使用适当的数据结构（如 Set、Map 等），可以减少不必要的数据存储，节省内存负担。

• 避免不必要的数组和对象：如果只需要存储简单类型，尽量避免使用复杂的对象或数组。

3.4. 使用数组和对象的原型

• 减少重复对象：对于重复使用的对象，可以复用同一个实例，而不是每次都创建新实例。

const sharedInstance = { prop: 'value' };  
const dataArray = [sharedInstance, sharedInstance]; // 复用对象实例  

 利用原型链：通过方式将方法放在对象的原型上，而不是每个实例中，减少内存占用。

function MyObject() {}  
MyObject.prototype.method = function() {  // 方法实现  
};  const instance1 = new MyObject();  
const instance2 = new MyObject();  
// method 共享而不会重复存储  

3.5. 避免过大的数据集

• 分页加载：避免一次加载大量数据，采用分页或懒加载的方式，以降低内存使用。

• 优化数据存储：使用数据压缩基础库（如 lz-string）来减少存储使用的内存，适合大数据集的场景。

 

3.6. 控制闭包

• 限制闭包的使用：闭包会保留其外部环境，确保不被使用的闭包不再引用外部变量。尽量不要在长期存在的数据结构中保存长时间运行的闭包。

function createCounter() {  let count = 0;  return function() {  count++;  return count;  };  
}  const counter = createCounter(); // 适当使用闭包  

 

3.7. 定期清理不再使用的资源

• 手动清理：对于大型应用程序，能够手动清理不再需要的对象（如终止数据处理、清除缓存、解除事件监听等）可以有效降低内存使用。

• 使用浏览器的开发者工具：定期监控内存使用情况，使用 Chrome DevTools 的 Memory 面板分析内存快照，查找潜在的内存泄漏。

3.8. 优化算法和逻辑

• 避免重复计算：使用缓存或记忆化来保存计算的结果。减少重复计算既能提升性能，也能降低内存使用。

const cache = {};  
function memoizedFunction(arg) {  if (cache[arg]) return cache[arg];  const result = computeHeavy(arg);  cache[arg] = result;  return result;  
}  

 

3.9. 适当关闭连接

• 关闭不必要的连接：在网络请求、数据库连接等场景中，及时关闭连接，以避免不必要的资源占用。

3.10总结

通过执行上述策略，可以有效减少 JavaScript 的内存使用并提升应用的性能。管理内存是优化应用的关键，需要持续关注和监控，以确保应用在不同环境下运行良好。

4. 异步编程

异步编程是 JavaScript 中处理任务的一种方式，允许代码在等待某些操作（如网络请求、文件读取、定时器等）完成时继续执行其他代码。这种方式能够提高应用的响应性和性能，使得用户体验更加流畅。以下是有关 JavaScript 异步编程的详细说明。

4.1. 什么是异步编程？

异步编程允许在执行某个操作时不阻塞其他代码的执行。这意味着您可以在等待某些任务完成时，执行其他任务。常见的异步操作包括：

• 网络请求（AJAX）
• 文件读取
• 定时器（setTimeout 和 setInterval）

4.2. 异步编程的传统方式

在 JavaScript 中，最早的异步编程是通过 回调函数（Callbacks） 来实现的。回调函数是当某个操作完成时调用的函数。

2.1 使用回调

function fetchData(callback) {  setTimeout(() => {  // 模拟异步操作  const data = { message: 'Hello, World!' };  callback(data);  }, 2000); // 2秒后执行回调  
}  fetchData((data) => {  console.log(data.message); // 输出: Hello, World!  
});  

缺点：这种方式容易导致“回调地狱”，代码结构变得混乱，难以维护。 

4.3. Promise

为了解决回调地狱的问题，JavaScript 引入了 Promise，它表示一个可能在未来某个时间完成的操作。

3.1 使用 Promise

function fetchData() {  return new Promise((resolve, reject) => {  setTimeout(() => {  const data = { message: 'Hello, World!' };  resolve(data); // 任务成功时调用 resolve  }, 2000);  });  
}  fetchData()  .then((data) => {  console.log(data.message); // 输出: Hello, World!  })  .catch((error) => {  console.error('Error:', error); // 处理错误  });  

 

3.2 Promise 的链式调用

Promise 支持链式调用，可以链式处理多个异步操作：

function fetchUser() {  return new Promise((resolve) => {  setTimeout(() => {  resolve({ id: 1, name: 'Alice' });  }, 1000);  });  
}  function fetchPosts(userId) {  return new Promise((resolve) => {  setTimeout(() => {  resolve([  { userId, id: 1, title: 'Post 1' },  { userId, id: 2, title: 'Post 2' },  ]);  }, 1000);  });  
}  fetchUser()  .then((user) => {  console.log('User:', user);  return fetchPosts(user.id); // 获取用户的帖子  })  .then((posts) => {  console.log('Posts:', posts);  })  .catch((error) => {  console.error('Error:', error);  });  

 

4.4. async/await 语法

async/await 是基于 Promise 的更简化的异步编程方法，使代码更具可读性。async 修饰函数，使其返回一个 Promise；await 用于等待 Promise 完成。

4.1 使用 async/await

async function fetchData() {  return new Promise((resolve) => {  setTimeout(() => {  resolve({ message: 'Hello, World!' });  }, 2000);  });  
}  async function main() {  const data = await fetchData(); // 等待 Promise 完成  console.log(data.message); // 输出: Hello, World!  
}  main();  

 

4.5. 错误处理

使用 Promise 和 async/await 时，处理异步操作中的错误是很重要的。

5.1 用 Promise 处理错误

fetchData()  .then((data) => {  console.log(data.message);  })  .catch((error) => {  console.error('Failed to fetch data:', error);  });  

5.2 用 async/await 处理错误 

async function main() {  try {  const data = await fetchData();  console.log(data.message);  } catch (error) {  console.error('Failed to fetch data:', error);  }  
}  main();  

 

4.6. 并发处理

可以使用 Promise.all 来同时处理多个异步操作。

async function fetchData() {  // 模拟多个异步操作  const userPromise = fetchUser();  const postsPromise = fetchPosts(1);  const [user, posts] = await Promise.all([userPromise, postsPromise]);  console.log('User:', user);  console.log('Posts:', posts);  
}  fetchData();  

4.7. 小结

异步编程在 JavaScript 中至关重要，适当地使用回调、Promise 和 async/await 可以提高应用的性能和用户体验。每种方法都有其优缺点，选择合适的异步编程风格可以减少代码复杂性，提高可读性。

 

5. 减少网络请求

减少网络请求是优化网页应用性能的一个重要方面。这不仅能提高加载速度，还能降低服务器负载和用户的带宽使用，最终改善用户体验。以下是一些减少网络请求的有效策略和技巧：

5.1. 合并请求

1.1 合并 CSS 和 JavaScript 文件

• 将多个 CSS 文件合并为一个文件，这样可以减少请求数量。例如，将所有样式文件（style1.css、style2.css 等）合并成一个 main.css 文件。
• 将多个 JavaScript 文件合并为一个文件，如将所有脚本文件（script1.js、script2.js 等）合并成一个 main.js 文件。

<!-- 之前的方式： -->  
<link rel="stylesheet" href="style1.css">  
<link rel="stylesheet" href="style2.css">  
<script src="script1.js"></script>  
<script src="script2.js"></script>  <!-- 合并后： -->  
<link rel="stylesheet" href="main.css">  
<script src="main.js"></script>  

 

1.2 合并图像

• 使用 CSS Sprites：将多个小图像合并为一个大图像，通过 CSS 背景定位来显示所需的部分，这样只需要一个请求来加载所有图像。

.sprite {  background-image: url('sprite.png');  width: 50px; /* 单个图像的宽度 */  height: 50px; /* 单个图像的高度 */  
}  
.icon1 {  background-position: 0 0; /* 第一个图像的位置 */  
}  
.icon2 {  background-position: -50px 0; /* 第二个图像的位置 */  
}  

 

5.2. 使用内容分发网络（CDN）

• 将静态资源托管在 CDN 上。CDN 是分布在多个地理位置的服务器网络，可以更快速地提供用户所需的静态资源（如图像、CSS、JavaScript），从而减少请求延迟并提高加载速度。

 

5.3. 延迟加载资源

3.1 惰性加载

• 只在需要时加载资源。用于图像、视频等非首次可见的内容，直到用户滚动到这些元素为止，可以显著减少初始网络请求。

<img data-src="image.jpg" class="lazy" alt="Lazy Loaded Image">  

 

const lazyImages = document.querySelectorAll('.lazy');  
const observer = new IntersectionObserver((entries) => {  entries.forEach(entry => {  if (entry.isIntersecting) {  const img = entry.target;  img.src = img.dataset.src; // 设置实际的 src  img.classList.remove('lazy');  observer.unobserve(img); // 停止观察  }  });  
});  lazyImages.forEach(image => {  observer.observe(image); // 观察每个懒加载图像  
});  

3.2 使用 Preload

• 预加载关键资源。可以通过 <link rel="preload"> 标签来告诉浏览器优先加载重要的资源。

 

<link rel="preload" href="important-script.js" as="script">  

 

5.4. 缓存策略

• 利用浏览器缓存：通过 HTTP 头（如 Cache-Control 和 Expires）来配置资源的缓存策略，能够减少重复请求。

//http
Cache-Control: max-age=3600  // 资源可以被缓存 1 小时  

• ETag 和 Last-Modified：使用 ETag 和 Last-Modified 头部，让浏览器在请求资源时能验证是否可以使用缓存内容。

 

5.5. 使用合适的请求方法

• 选择 GET 和 POST 等的合适方法，对于一些不需要修改服务器状态的请求，可以使用 GET，这样可以利用浏览器缓存。
• 简化请求参数，尽可能减少 URL 中的查询参数数量，以减少请求大小。

5.6. 避免重复请求 

• 检查不会重复发送的请求：在必要时，使用状态变量来确保请求只有在所需时才会发送。

let isFetching = false;  function fetchData() {  if (isFetching) return;  isFetching = true;  fetch('/api/data')  .then(response => response.json())  .then(data => {  // 处理数据  })  .finally(() => {  isFetching = false; // 请求完成，允许新的请求  });  
}  

 

5.7. 使用 GraphQL

• 使用 GraphQL：GraphQL 允许客户端请求所需的数据，而不是获取整个数据集，可以减少不必要的数据传输。

5.8. 采用现代前端框架

• 使用 React、Vue 或 Angular 等框架，它们通常会有优化网络请求的机制，如自动批量请求和状态管理工具，让异步数据请求更高效和简化。

5.9总结

减少网络请求不仅能加快页面加载速度，还能提高用户体验。采用合并请求、CDN、懒加载、缓存策略等方法，你将能够有效优化应用的性能。