JavaScript编程

JavaScript优化

优化技术

高层优化

• 算法优化（数学分析）：通过选择更高效的算法减少计算复杂度。
• 简化：重构代码以减少不必要的操作和复杂度。

低层优化

• 循环展开（Loop Unrolling）：减少循环迭代次数，直接操作数据块。
• 强度削弱（Strength Reduction）：将耗时操作替换为等效但更高效的操作。
• Duff's Device：通过展开循环和减少分支来提高效率。
• 优化循环结构（Clean Loops）：通过简化和合并循环结构提高性能。

外部工具与库

• 使用代码压缩工具如 UglifyJS 或 Terser 进行优化。
• 借助性能分析工具（如 Lighthouse、Chrome DevTools）定位瓶颈并优化代码。

---

常见错误与误解

字符串拼接

JavaScript中的字符串是不可变对象，因此每次修改字符串都会创建一个新的字符串对象。这种特性在循环中大量拼接字符串时会导致性能问题。

示例1：低效的拼接方式

var s1 = "the original string";
var s2 = "";

for (i = 0; i < s1.length; i++) {
  s2 += rot13(s1.charAt(i));
}

问题：每次循环迭代都会复制整个字符串并追加一个字符，在较旧的浏览器（如IE6）中运行速度极慢。

示例2：优化方式1 - 使用数组存储字符

通过将字符存储在数组中，然后在循环结束后使用 join() 拼接成字符串，可以提高效率。

var s1 = "the original string";
var a2 = new Array(s1.length);
var s2 = "";

for (i = 0; i < s1.length; i++) {
  a2[i] = rot13(s1.charAt(i));
}
s2 = a2.join('');

示例3：优化方式2 - 分块拼接

将拼接分成小块，减少大字符串的复制次数。例如，以空格作为分隔符：

var s1 = "the original string";
var c;
var st = "";
var s2 = "";

for (i = 0; i < s1.length; i++) {
  c = rot13(s1.charAt(i));
  st += c;
  if (c == " ") {
    s2 += st;
    st = "";
  }
}
s2 += st;

示例4：优化方式3 - 避免重复计算数组长度

在循环中，array.length 会在每次迭代时重新计算，特别是在大循环中会显著影响性能。

低效代码：

for (x = 0; x < myArray.length; x++) {
  // 执行操作
}

优化代码：

for (x = 0, l = myArray.length; x < l; x++) {
  // 执行操作
}

性能对比：

• 低效版本需要进行 myArray.length 的5000次计算，总计15001次操作。
• 优化版本只计算一次 myArray.length，总计10002次操作。

最终优化后的代码：

var s1 = "the original string";
var c;
var st = "";
var s2 = "";

for (i = 0, l = s1.length; i < l; i++) {
  c = rot13(s1.charAt(i));
  st += c;
  if (c == " ") {
    s2 += st;
    st = "";
  }
}
s2 += st;

---

关键建议

1. 减少全局变量的使用：局部变量比全局变量访问速度快。
2. 避免不必要的DOM操作：将频繁访问的DOM节点缓存到变量中。
3. 事件委托：在父元素上处理子元素的事件，提高效率。
4. 使用原生方法：尽量使用原生方法替代库方法，例如 Array.prototype.forEach。
5. 避免内存泄漏：确保事件监听器和动态创建的对象在不需要时被清理。

通过结合算法优化和代码结构优化，可以显著提升JavaScript代码的执行效率。