JavaScript优化性能的几个方法和技巧

利用最新JavaScript语法和特性

示例：可选链和空值合并运算符 webpack 用的是ES5语法，默认为了兼容浏览器的版本，并不支持可选链 ， Vite 支持

// 旧方式
const userName = user && user.info && user.info.name || 'Anonymous';
// 现代方式
const userName = user?.info?.name ?? 'Anonymous';

优点：代码更简洁，减少条件检查，提高性能

缺点：需要为旧浏览器进行转译

使用高效的数据结构

示例：使用Map替代Object

// 使用Object
const userRoles = {};
userRoles[userId] = 'admin';

// 使用Map
const userRoles = new Map();
userRoles.set(userId, 'admin');

优点：对于频繁增删操作，性能更佳，保留迭代顺序，更好地处理非字符串键

缺点：对于小数据集，内存使用略高

优化循环和迭代

示例：数组方法vs.传统for循环

// 使用数组方法
const doubledNumbers = numbers.map(num => num * 2);

// 使用for循环
const doubledNumbers = [];
for (let i = 0; i < numbers.length; i++) {
    doubledNumbers.push(numbers[i] * 2);
}

优点：数组方法更具表达性和声明性

缺点：在关键性能路径上，传统循环可能更快

利用动态导入，代码分割等方式优化性能

示例：使用Webpack的动态导入

// 动态导入
import('./heavyModule').then(module => {
    // 使用模块
});

优点：减少初始加载时间和资源消耗，提高用户感知性能

缺点：需要适当的配置和处理动态导入

最小化重绘和回流

示例：批量DOM操作

// 不好的做法
for (let i = 0; i < 1000; i++) {
    container.appendChild(document.createElement('div'));
}
// 优化后
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    fragment.appendChild(document.createElement('div'));
}
container.appendChild(fragment);

优点：减少布局抖动，提高渲染性能

缺点：对于复杂操作，可能不够直观

利用现代 性能优化工具

代码编译器（Webpack或Vite）优点：支持多种开箱即用的优化 缺点：配置可能较为复杂