什么是 `Deoptimization` (去优化)？列举导致 `JavaScript` 代码去优化的常见原因及其避免策略。

哟，各位！今天咱们来聊聊JavaScript引擎里的“反悔药”——去优化(Deoptimization)。 听起来挺玄乎，其实就是引擎觉得之前的优化策略用错了，赶紧撤回，重新来过。别担心，这不是你的代码写得烂，只是引擎有时候也会“看走眼”。

开场白：引擎的纠结

想象一下，你是一位经验丰富的厨师。你看到顾客点了一份宫保鸡丁，心想：“这玩意儿我熟！鸡胸肉切丁，花生米炸脆，辣椒酱一勺……”。然后，你开始飞速操作，效率极高。 这就是引擎的“优化”阶段，它根据你代码的“表面现象”做出快速决策，生成优化后的机器码，让代码跑得飞快。

但是，如果顾客突然说：“等一下！我过敏！不要花生米！辣椒酱换成甜面酱！还要加腰果！”，你怎么办？ 只能停下手里的活儿，把已经做好的半成品扔掉，重新开始。 这就是“去优化”。 引擎发现之前的优化策略不再适用，不得不放弃已经生成的优化代码，回到解释执行的状态，重新分析代码，寻找新的优化机会。

正餐：去优化的常见原因和应对策略

去优化就像感冒，虽然不是什么大病，但是会影响性能。 咱们来看看有哪些常见的“感冒病毒”，以及如何增强代码的“免疫力”。

1. 类型突变(Type Instability)

这是去优化最常见的原因。 JavaScript 是一门动态类型语言，变量的类型可以随时改变。 这给引擎的优化带来了很大的挑战。

• 例子：

function add(x, y) {
  return x + y;
}

add(1, 2); // 第一次调用，引擎认为 x 和 y 都是数字
add("hello", "world"); // 第二次调用，引擎懵了，x 和 y 变成字符串了

• 解释：

第一次调用 add(1, 2) 时，引擎会根据传入的参数类型，将 add 函数编译成针对数字类型优化的机器码。 引擎会假设 x 和 y 总是数字，然后进行加法运算。 这样可以避免每次都进行类型检查，提高执行效率。

但是，第二次调用 add("hello", "world") 时，x 和 y 变成了字符串。 引擎发现之前的假设是错误的，不得不放弃已经编译好的机器码，回到解释执行的状态。 这样会导致性能下降。

• 避免策略：

  • 保持类型一致： 尽量保证变量的类型在整个生命周期内保持不变。
  • 使用类型注解(TypeScript/Flow)： 虽然 JavaScript 本身没有类型注解，但是可以使用 TypeScript 或 Flow 等工具来添加类型信息，帮助引擎进行优化。
  • 避免在循环中改变变量类型：

// 不好的例子
function processArray(arr) {
  for (let i = 0; i < arr.length; i++) {
    if (i % 2 === 0) {
      arr[i] = arr[i] * 2; // 数字
    } else {
      arr[i] = "hello"; // 字符串
    }
  }
}

// 好的例子
function processArray(arr) {
  const numbers = [];
  const strings = [];

  for (let i = 0; i < arr.length; i++) {
    if (i % 2 === 0) {
      numbers.push(arr[i] * 2);
    } else {
      strings.push("hello");
    }
  }

  // 处理 numbers 和 strings 数组
}

• 小技巧：如果实在无法避免类型突变，可以考虑使用多个函数来处理不同类型的数据。 这样可以避免单个函数因为类型突变而导致去优化。

2. 函数参数数量不匹配(Arity Mismatch)

JavaScript 允许函数调用时传入的参数数量与函数定义时的参数数量不一致。 这也会导致去优化。

• 例子：

function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("Alice"); // 正常调用
greet("Bob", "Smith"); // 传入了多余的参数
greet(); // 缺少参数

• 解释：

引擎会根据函数定义时的参数数量进行优化。 如果函数调用时传入的参数数量与函数定义时的参数数量不一致，引擎就需要进行额外的处理，这会导致去优化。

• 避免策略：

  • 保持参数数量一致： 尽量保证函数调用时传入的参数数量与函数定义时的参数数量一致。
  • 使用默认参数： 如果函数允许缺少参数，可以使用默认参数来避免 undefined 造成的类型问题。
  • 使用剩余参数(Rest Parameters)： 如果函数需要接收不定数量的参数，可以使用剩余参数语法。

function greet(name = "Guest") { // 默认参数
  console.log("Hello, " + name + "!");
}

function sum(...numbers) { // 剩余参数
  let total = 0;
  for (const number of numbers) {
    total += number;
  }
  return total;
}

3. try...catch 语句

try...catch 语句会增加代码的复杂性，影响引擎的优化。

• 例子：

function riskyOperation() {
  try {
    // 可能抛出异常的代码
    return JSON.parse(someString);
  } catch (error) {
    // 处理异常
    console.error("Error parsing JSON:", error);
    return null;
  }
}

• 解释：

try...catch 语句会创建一个新的执行上下文，并且会阻止引擎进行一些优化，例如内联。 因为引擎需要时刻准备着处理可能抛出的异常，这会影响性能。

• 避免策略：

  • 尽量避免在性能关键的代码中使用 try...catch： 如果可能，尽量在代码的边缘使用 try...catch，而不是在核心逻辑中使用。
  • 将 try...catch 放在单独的函数中： 这样可以减小 try...catch 语句对其他代码的影响。
  • 使用更可靠的输入验证： 避免因为无效的输入而导致异常。

// 好的例子
function parseJSON(jsonString) {
  try {
    return JSON.parse(jsonString);
  } catch (error) {
    console.error("Error parsing JSON:", error);
    return null;
  }
}

function processData(data) {
  // 核心逻辑，没有 try...catch
  console.log("Processing data:", data);
}

const data = parseJSON(someString);
if (data) {
  processData(data);
}

4. eval() 和 with 语句

这两个语句是 JavaScript 的“黑魔法”，但是也会导致严重的性能问题。

• eval()： 动态执行字符串中的 JavaScript 代码。

• with： 将一个对象添加到作用域链的顶部。

• 解释：

eval() 和 with 语句会改变代码的作用域，使得引擎无法在编译时确定变量的类型和位置。 这会阻止引擎进行任何优化。

• 避免策略：

  • 永远不要使用 eval() 和 with 语句！ 它们是性能杀手，并且会带来安全风险。
  • 使用更安全和可预测的替代方案： 例如，使用 JSON.parse() 解析 JSON 字符串，使用对象解构来访问对象的属性。

5. 内联缓存(Inline Caching)失效

内联缓存是 JavaScript 引擎的一种优化技术，它可以缓存对象属性的访问结果。 如果对象的结构发生变化，内联缓存就会失效，导致去优化。

• 例子：

function getProperty(obj, propertyName) {
  return obj[propertyName];
}

const obj1 = { x: 1, y: 2 };
getProperty(obj1, "x"); // 第一次调用，引擎会缓存 obj1.x 的访问结果

const obj2 = { a: 3, b: 4 };
getProperty(obj2, "a"); // 第二次调用，obj2 的结构与 obj1 不同，内联缓存失效

• 解释：

第一次调用 getProperty(obj1, "x") 时，引擎会缓存 obj1.x 的访问结果。 这样，下次访问 obj1.x 时，引擎就可以直接从缓存中读取结果，而不需要重新查找对象的属性。

但是，第二次调用 getProperty(obj2, "a") 时，obj2 的结构与 obj1 不同。 obj1 有 x 和 y 属性，而 obj2 有 a 和 b 属性。 这会导致内联缓存失效，引擎需要重新查找对象的属性，这会降低性能。

• 避免策略：

  • 保持对象结构一致： 尽量保证对象的结构在整个生命周期内保持不变。
  • 使用相同的属性顺序： 对象的属性顺序也会影响内联缓存。 尽量保证对象的属性顺序一致。
  • 避免动态添加或删除属性： 动态添加或删除属性会导致对象的结构发生变化，影响内联缓存。

// 好的例子
function createPoint(x, y) {
  return { x: x, y: y }; // 总是以相同的顺序创建属性
}

const point1 = createPoint(1, 2);
const point2 = createPoint(3, 4);

总结：增强代码的免疫力

去优化是 JavaScript 引擎为了保证代码的正确性而采取的一种策略。 虽然去优化会影响性能，但是我们可以通过一些技巧来避免它。

原因	避免策略
类型突变	保持类型一致，使用类型注解，避免在循环中改变变量类型
函数参数数量不匹配	保持参数数量一致，使用默认参数，使用剩余参数
try...catch 语句	尽量避免在性能关键的代码中使用 try...catch，将 try...catch 放在单独的函数中，使用更可靠的输入验证
eval() 和 with 语句	永远不要使用 eval() 和 with 语句！
内联缓存失效	保持对象结构一致，使用相同的属性顺序，避免动态添加或删除属性

记住，编写高性能的 JavaScript 代码就像做菜一样。 你需要了解食材的特性(JavaScript 语言的特性)，掌握烹饪技巧(优化策略)，才能做出美味佳肴(高性能的代码)。

课后甜点：如何检测去优化

Chrome 开发者工具可以帮助你检测代码中是否存在去优化。

1. 打开 Chrome 开发者工具。
2. 选择 "Performance" 面板。
3. 点击 "Record" 按钮开始录制。
4. 运行你的 JavaScript 代码。
5. 停止录制。
6. 在 "Bottom-Up" 或 "Call Tree" 视图中，查找 "deoptimize" 或 "unoptimized" 等关键词。

如果发现有去优化，可以根据上面提到的原因和策略进行优化。

好了，今天的讲座就到这里。 希望大家能够掌握去优化的相关知识，写出更高效的 JavaScript 代码！ 记住，代码优化是一个持续的过程，需要不断学习和实践。 祝大家编程愉快！