V8 如何使用隐藏类和内联缓存优化代码

Question

最近我遇到了 V8 使用隐藏类和内联缓存来优化 js 代码的概念。很酷。

我了解对象在内部表示为隐藏类。并且两个对象可能具有相同的属性但不同的隐藏类（取决于分配属性的顺序）。

V8 也使用内联缓存概念直接检查偏移量来访问对象的属性，而不是使用对象的隐藏类来确定偏移量。

代码 -

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

function processPoint(point) {
    // console.log(point.x, point.y, point.a, point.b);
    // let x = point;
}

function main() {
    let p1 = new Point(1, 1);
    let p2 = new Point(1, 1);
    let p3 = new Point(1, 1);
    const N = 300000000;
    p1.a = 1;
    p1.b = 1;
    p2.b = 1;
    p2.a = 1;
    p3.a = 1;
    p3.b = 1;
    let start_1 = new Date();
    for(let i = 0; i< N; i++ ) {
        if (i%4 != 0) {
            processPoint(p1);
        } else {
            processPoint(p2)
        }
    }
    let end_1 = new Date();
    let t1 = (end_1 - start_1);
    let start_2 = new Date();
    for(let i = 0; i< N; i++ ) {
        if (i%4 != 0) {
            processPoint(p1);
        } else {
            processPoint(p1)
        }
    }
    let end_2 = new Date();
    let t2 = (end_2 - start_2);
    let start_3 = new Date();
    for(let i = 0; i< N; i++ ) {
        if (i%4 != 0) {
            processPoint(p1);
        } else {
            processPoint(p3)
        }
    }
    let end_3 = new Date();
    let t3 = (end_3 - start_3);
    console.log(t1, t2, t3);
}

(function(){
    main();
})();

我期望结果会像 t1 > (t2 = t3) 因为：

第一个循环 : V8 会在运行两次后尝试优化，但很快就会遇到不同的隐藏类，因此会去优化。

第二个循环：一直调用同一个对象，因此可以使用内联缓存。

第三个循环：与第二个循环相同，因为隐藏的类是相同的。

但结果并不令人满意。我得到了（类似的结果一次又一次地运行）-

3553 4805 4556

问题：

1. 为什么结果不符合预期？我的假设哪里出错了？

2. 如何更改此代码以演示隐藏类和内联缓存性能改进？

3. 我是不是一开始就搞错了？

4. 隐藏类是否只是为了提高内存效率而让对象共享它们？

5. 还有其他网站提供一些简单的性能改进示例吗？

我正在使用节点 8.9.4 进行测试。提前致谢。

来源：

1. https://blog.sessionstack.com/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code-ac089e62b12e

2. https://draft.li/blog/2016/12/22/javascript-engines-hidden-classes/

3. https://richardartoul.github.io/jekyll/update/2015/04/26/hidden-classes.html

还有更多..

Answer 1

V8 开发人员在这里。总结是：微基准测试很难，不要做。

首先，在发布您的代码后，我看到380 380 380 作为输出，这是意料之中的，因为function processPoint 是空的，所以无论哪个循环都执行相同的工作（即没有工作）您选择的点对象。

测量单态和 2 路多态内联缓存之间的性能差异很困难，因为它并不大，因此您必须非常小心您的基准测试正在做什么。例如，console.log 太慢了，以至于会影响其他所有内容。

您还必须小心内联的影响。当你的 benchmark 有很多迭代时，代码会得到优化（在运行 waaaay 两次以上之后），优化编译器会（在某种程度上）内联函数，这可以允许后续优化（特别是：消除各种东西），从而可以显着改变你正在测量的东西。编写有意义的微基准很难；您将无法检查生成的程序集和/或对您正在调查的 JavaScript 引擎的实现细节了解很多。

要记住的另一件事是内联缓存在哪里，以及随着时间的推移它们会处于什么状态。不考虑内联，像 processPoint 这样的函数不知道也不关心它是从哪里调用的。一旦它的内联缓存是多态的，它们将保持多态，即使稍后在您的基准测试中（在本例中，在第二和第三个循环中）类型稳定。

在尝试隔离效果时要记住的另一件事是，长时间运行的函数将在它们运行时在后台编译，然后会在某个时候在堆栈上被替换（“OSR”），这增加了各种噪音对您的测量。但是，当您使用不同的循环长度调用它们进行预热时，它们仍会在后台编译，并且无法可靠地等待该后台作业。您可以诉诸用于开发的命令行标志，但您将不再测量常规行为。

无论如何，以下是尝试制作与您的测试类似的测试，该测试会产生合理的结果（在我的机器上大约是 100 180 280）：

function Point() {}

// These three functions are identical, but they will be called with different
// inputs and hence collect different type feedback:
function processPointMonomorphic(N, point) {
  let sum = 0;
  for (let i = 0; i < N; i++) {
    sum += point.a;
  }
  return sum;
}
function processPointPolymorphic(N, point) {
  let sum = 0;
  for (let i = 0; i < N; i++) {
    sum += point.a;
  }
  return sum;
}
function processPointGeneric(N, point) {
  let sum = 0;
  for (let i = 0; i < N; i++) {
    sum += point.a;
  }
  return sum;
}

let p1 = new Point();
let p2 = new Point();
let p3 = new Point();
let p4 = new Point();

const warmup = 12000;
const N = 100000000;
let sum = 0;
p1.a = 1;
p2.b = 1;
p2.a = 1;
p3.c = 1;
p3.b = 1;
p3.a = 1;
p4.d = 1;
p4.c = 1;
p4.b = 1;
p4.a = 1;
processPointMonomorphic(warmup, p1);
processPointMonomorphic(1, p1);
let start_1 = Date.now();
sum += processPointMonomorphic(N, p1);
let t1 = Date.now() - start_1;

processPointPolymorphic(2, p1);
processPointPolymorphic(2, p2);
processPointPolymorphic(2, p3);
processPointPolymorphic(warmup, p4);
processPointPolymorphic(1, p4);
let start_2 = Date.now();
sum += processPointPolymorphic(N, p1);
let t2 = Date.now() - start_2;

processPointGeneric(warmup, 1);
processPointGeneric(1, 1);
let start_3 = Date.now();
sum += processPointGeneric(N, p1);
let t3 = Date.now() - start_3;
console.log(t1, t2, t3);