发布于 由admin

JS `Deoptimization` 的各种触发场景与如何编写避免去优化的代码

各位观众老爷们，晚上好！ 今天咱们聊点刺激的——JavaScript 引擎的“叛逆期”，也就是“Deoptimization”（去优化）。别害怕，这玩意儿虽然听起来像什么科幻电影里的桥段，但其实就是JS引擎为了性能优化耍的一些小聪明，结果有时候聪明反被聪明误。

一、啥是 Deoptimization？JS 引擎的“人格分裂”

简单来说，JS 引擎为了让你的代码跑得飞快，会先对你的代码进行“优化”，就像给你开了个外挂。但是，如果你突然做了什么让引擎不爽的事情，它就会觉得：“算了，这代码太复杂了，我搞不定，还是用最笨的方法慢慢跑吧！” 这就是 Deoptimization。

你可以把 JS 引擎想象成一个厨师。

  • 优化状态: 厨师一开始信心满满，看到你点了“宫保鸡丁”，心想：“这菜我熟！”，于是他直接用上了预先切好的鸡丁、调好的酱汁，以及一套行云流水的操作，三下五除二就把菜炒好了。
  • 去优化状态: 结果你突然来了一句：“等等，我要把鸡丁换成牛肉，而且要加双倍辣椒！” 厨师瞬间懵逼：“WTF？这跟我预想的不一样啊！”，只好放下手头的半成品，重新拿出牛肉，现切现调，整个流程慢了好几倍。

Deoptimization 就是这个“放下手头半成品，重新开始”的过程。引擎会放弃之前优化过的代码，转而使用更通用的、更慢的执行路径。

二、Deoptimization 的“作案动机”：类型不稳定、函数参数变化等等

JS 引擎之所以会 Deoptimize，主要还是因为它太“聪明”了，它会根据代码的运行情况进行各种假设。一旦这些假设被打破，它就只能认怂。

常见的 Deoptimization 触发场景包括：

  1. 类型不稳定 (Type Instability):

    这是最常见的罪魁祸首。JS 是一门动态类型语言，这意味着变量的类型可以在运行时改变。如果引擎认为一个变量一直是某种类型（比如数字），并针对这种类型进行了优化，结果你突然给它赋了一个字符串，引擎就傻眼了。

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

add(1, 2); // 引擎：嗯，看起来 x 和 y 都是数字，我优化一下！
add("hello", "world"); // 引擎：卧槽，说好的数字呢？Deoptimize！

    如何避免： 尽量保持变量类型的一致性。如果你知道一个变量可能存储多种类型，就不要对其进行过于激进的优化。

    function add(x, y) {
  // 显式类型转换，保证类型一致性
  x = Number(x);
  y = Number(y);
  return x + y;
}

  2. 函数参数变化 (Arguments Object):

    在非严格模式下，JS 函数内部有一个 arguments 对象，它包含了函数的所有参数。但是，直接修改 arguments 对象会导致 Deoptimization。

    function foo(a, b) {
  arguments[0] = 10; // 修改 arguments 对象
  return a + b;
}

foo(1, 2); // Deoptimize！

    如何避免： 尽量避免直接修改 arguments 对象。如果需要使用参数列表，可以将其转换为数组。

    function foo(a, b) {
  const args = Array.from(arguments); // 将 arguments 转换为数组
  args[0] = 10;
  return a + b; // 注意：这里仍然使用原始的 a 和 b，而不是 args[0] 和 args[1]
}

  3. 使用 eval 和 with 语句:

    这两个语句会动态地改变代码的作用域，让引擎难以进行静态分析，因此会导致 Deoptimization。

    function evilFunction(str) {
  eval(str); // 动态执行代码，Deoptimize！
}

with (obj) { // 改变作用域，Deoptimize！
  // ...
}

    如何避免： 千万不要用！ 这两个语句在现代 JS 开发中几乎没有存在的必要。

  4. 隐藏类 (Hidden Classes) 的改变:

    JS 引擎会为对象创建“隐藏类”，用于记录对象的属性和类型。如果对象的属性结构发生改变（比如添加或删除属性），引擎就需要重新创建隐藏类，这也会导致 Deoptimization。

    function Point(x, y) {
  this.x = x;
  this.y = y;
}

const p1 = new Point(1, 2); // 创建一个 Point 对象
const p2 = new Point(3, 4); // 创建另一个 Point 对象

p1.z = 5; // 给 p1 添加一个属性，Deoptimize！

    如何避免： 尽量保持对象的属性结构一致。在创建对象时，就定义好所有的属性。

    function Point(x, y) {
  this.x = x;
  this.y = y;
  this.z = undefined; // 预先定义属性
}

const p1 = new Point(1, 2);
p1.z = 5; // 现在修改属性不会导致 Deoptimization

  5. 数组空洞 (Sparse Arrays):

    JS 数组可以包含空洞，也就是数组的某些索引没有值。对包含空洞的数组进行操作可能会导致 Deoptimization。

    const arr = new Array(10); // 创建一个包含 10 个空洞的数组
arr[0] = 1;
arr[9] = 10;

arr.forEach(item => { // 遍历数组，可能会 Deoptimize！
  console.log(item);
});

    如何避免： 尽量避免创建和使用包含空洞的数组。如果需要创建指定大小的数组，可以使用 Array.fill() 方法填充默认值。

    const arr = new Array(10).fill(null); // 创建一个包含 10 个 null 值的数组
arr[0] = 1;
arr[9] = 10;

arr.forEach(item => {
  console.log(item); // 遍历数组，性能更好
});

  6. 内联缓存 (Inline Caches) 失效:

    JS 引擎会使用内联缓存来加速属性访问。如果对象的属性结构发生改变，或者访问的属性不存在，内联缓存就会失效，导致 Deoptimization。

    function getX(obj) {
  return obj.x;
}

const p1 = { x: 1, y: 2 };
getX(p1); // 引擎会缓存 p1.x 的访问

const p2 = { y: 3, z: 4 };
getX(p2); // p2 没有 x 属性，内联缓存失效，Deoptimize！

    如何避免： 尽量保持对象的属性结构一致，并确保访问的属性存在。

  7. 使用 debugger 语句:

    虽然 debugger 语句在调试时非常有用，但它也会导致 Deoptimization，因为它会中断代码的执行，让引擎重新进行优化。

    如何避免： 在发布生产环境的代码时，一定要删除所有的 debugger 语句。

三、如何编写避免 Deoptimization 的代码：防患于未然

总的来说，避免 Deoptimization 的关键在于：

  • 保持类型一致性： 尽量避免变量类型在运行时发生改变。使用 TypeScript 等静态类型检查工具可以帮助你更好地管理类型。
  • 避免修改 arguments 对象： 如果需要使用参数列表，将其转换为数组。
  • 远离 eval 和 with 语句： 这两个语句是性能杀手。
  • 保持对象属性结构一致： 在创建对象时，就定义好所有的属性。
  • 避免创建和使用包含空洞的数组： 使用 Array.fill() 方法填充默认值。
  • 注意内联缓存的失效： 保持对象属性结构一致，并确保访问的属性存在。
  • 发布生产环境代码时，删除所有的 debugger 语句。

下面是一些具体的代码示例：

  1. 类型一致性：

    // 不好的例子：
function processData(data) {
  if (typeof data === 'number') {
    return data * 2;
  } else if (typeof data === 'string') {
    return parseInt(data) * 2;
  }
  return 0;
}

// 更好的例子：
function processData(data) {
  const num = Number(data); // 强制转换为数字类型
  return num * 2;
}

  2. 对象属性结构一致：

    // 不好的例子：
function createObject(type) {
  const obj = {};
  if (type === 'A') {
    obj.x = 1;
    obj.y = 2;
  } else if (type === 'B') {
    obj.name = 'test';
    obj.age = 30;
  }
  return obj;
}

// 更好的例子：
function createObject(type) {
  const obj = {
    x: undefined,
    y: undefined,
    name: undefined,
    age: undefined
  };
  if (type === 'A') {
    obj.x = 1;
    obj.y = 2;
  } else if (type === 'B') {
    obj.name = 'test';
    obj.age = 30;
  }
  return obj;
}

  3. 避免数组空洞：

    // 不好的例子：
const arr = new Array(100);
for (let i = 0; i < 100; i++) {
  if (i % 2 === 0) {
    arr[i] = i;
  }
}

// 更好的例子：
const arr = new Array(100).fill(undefined);
for (let i = 0; i < 100; i++) {
  if (i % 2 === 0) {
    arr[i] = i;
  }
}

// 或者使用 filter 方法：
const arr2 = Array.from({ length: 100 }, (_, i) => i % 2 === 0 ? i : undefined).filter(x => x !== undefined);

四、如何检测 Deoptimization：火眼金睛找“叛徒”

虽然我们可以通过编写更规范的代码来尽量避免 Deoptimization，但有时候还是难以避免。那么，如何检测 Deoptimization 呢？

  1. Chrome DevTools:

    Chrome DevTools 提供了强大的性能分析工具，可以帮助你检测 Deoptimization。

    • 打开 Chrome DevTools: 按 F12 或右键选择“检查”。
    • 切换到 Performance 面板: 点击 "Performance" 选项卡。
    • 录制性能分析: 点击 "Record" 按钮开始录制。
    • 运行你的代码: 执行你想要分析的代码。
    • 停止录制: 点击 "Stop" 按钮停止录制。
    • 分析结果: 在火焰图中查找黄色的 "Function Deoptimization" 事件。这些事件表示代码发生了 Deoptimization。

    你可以点击这些事件，查看 Deoptimization 的原因和发生的位置。

  2. V8 引擎的 --trace-opt 和 --trace-deopt 标志:

    如果你想更深入地了解 V8 引擎的优化和去优化过程，可以使用 --trace-opt 和 --trace-deopt 标志。这些标志会在控制台输出详细的优化和去优化信息。

    node --trace-opt your_script.js  # 跟踪优化
node --trace-deopt your_script.js # 跟踪去优化

    注意：这些标志会产生大量的输出，所以只在调试时使用。

五、总结：与 Deoptimization “斗智斗勇”

Deoptimization 是 JS 引擎为了性能优化而采取的一种策略，但有时候会导致性能下降。通过了解 Deoptimization 的触发场景，并编写更规范的代码，我们可以尽量避免 Deoptimization，提高代码的性能。

记住，优化是一场持久战，需要不断学习和实践。 就像跟 JS 引擎谈恋爱一样，你得了解它的脾气，才能更好地相处。

好了，今天的讲座就到这里。 感谢各位观众老爷的收听！ 如果有什么问题，欢迎提问。 祝大家写代码 Bug Free！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注