In Javascript, how would I make a function support multiple parameter types without it becoming deop-CodePudding

I want to make functions for vector operations which take in a typed array and an integer index. However, if I pass multiple different typed array types (e.g. Float32Array, Float64Array, etc.) into the same function over the course of the program's execution, the function would become deoptimised and run much slower. The following example should show this behaviour (if run with Chrome):

function Add(Array1, Index1, Array2, Index2){
  Array1[Index1 << 2 | 0]  = Array2[Index2 << 2 | 0];
  Array1[Index1 << 2 | 1]  = Array2[Index2 << 2 | 1];
  Array1[Index1 << 2 | 2]  = Array2[Index2 << 2 | 2];
  Array1[Index1 << 2 | 3]  = Array2[Index2 << 2 | 3];
}

const Int8 = new Int8Array(4194304);
const Int16 = new Int16Array(4194304);
const Int32 = new Int32Array(4194304);
const Float32 = new Float32Array(4194304);
const Float64 = new Float64Array(4194304);

const Iterations = 1;

let Start = window.performance.now();
for(let h = 0; h < Iterations;   h) for(let i = 0; i < 4194304;   i) Add(Int8, 0, Int8, i);
console.log("Int8: "   (window.performance.now() - Start));

Start = window.performance.now();
for(let h = 0; h < Iterations;   h) for(let i = 0; i < 4194304;   i) Add(Int16, 0, Int16, i);
console.log("Int16: "   (window.performance.now() - Start));

Start = window.performance.now();
for(let h = 0; h < Iterations;   h) for(let i = 0; i < 4194304;   i) Add(Int32, 0, Int32, i);
console.log("Int32: "   (window.performance.now() - Start));

Start = window.performance.now();
for(let h = 0; h < Iterations;   h) for(let i = 0; i < 4194304;   i) Add(Float32, 0, Float32, i);
console.log("Float32: "   (window.performance.now() - Start));

Start = window.performance.now();
for(let h = 0; h < Iterations;   h) for(let i = 0; i < 4194304;   i) Add(Float64, 0, Float64, i);
console.log("Float64: "   (window.performance.now() - Start));

When run on my computer with Chrome 108, the first test runs the fastest, the second to fourth tests run around twice as slow, and the fifth test runs nearly 20 times slower than the first.

To be clear, this difference in performance is most certainly not due to the different number types: rearranging the tests would yield roughly the same pattern of execution becoming slower.

While I understand why the function is being deoptimised, I am not sure what the best way around this is. I have tried a few different things, and unfortunately, the only way I have been able to fix this was by copying the same function for each typed array type I want to use it on:

function Add_i8(Array1, Index1, Array2, Index2){
  Array1[Index1 << 2 | 0]  = Array2[Index2 << 2 | 0];
  Array1[Index1 << 2 | 1]  = Array2[Index2 << 2 | 1];
  Array1[Index1 << 2 | 2]  = Array2[Index2 << 2 | 2];
  Array1[Index1 << 2 | 3]  = Array2[Index2 << 2 | 3];
}
function Add_i16(Array1, Index1, Array2, Index2){
  Array1[Index1 << 2 | 0]  = Array2[Index2 << 2 | 0];
  Array1[Index1 << 2 | 1]  = Array2[Index2 << 2 | 1];
  Array1[Index1 << 2 | 2]  = Array2[Index2 << 2 | 2];
  Array1[Index1 << 2 | 3]  = Array2[Index2 << 2 | 3];
}
function Add_i32(Array1, Index1, Array2, Index2){
  Array1[Index1 << 2 | 0]  = Array2[Index2 << 2 | 0];
  Array1[Index1 << 2 | 1]  = Array2[Index2 << 2 | 1];
  Array1[Index1 << 2 | 2]  = Array2[Index2 << 2 | 2];
  Array1[Index1 << 2 | 3]  = Array2[Index2 << 2 | 3];
}
function Add_f32(Array1, Index1, Array2, Index2){
  Array1[Index1 << 2 | 0]  = Array2[Index2 << 2 | 0];
  Array1[Index1 << 2 | 1]  = Array2[Index2 << 2 | 1];
  Array1[Index1 << 2 | 2]  = Array2[Index2 << 2 | 2];
  Array1[Index1 << 2 | 3]  = Array2[Index2 << 2 | 3];
}
function Add_f64(Array1, Index1, Array2, Index2){
  Array1[Index1 << 2 | 0]  = Array2[Index2 << 2 | 0];
  Array1[Index1 << 2 | 1]  = Array2[Index2 << 2 | 1];
  Array1[Index1 << 2 | 2]  = Array2[Index2 << 2 | 2];
  Array1[Index1 << 2 | 3]  = Array2[Index2 << 2 | 3];
}

const i8 = new Int8Array(4194304);
const i16 = new Int16Array(4194304);
const i32 = new Int32Array(4194304);
const f32 = new Float32Array(4194304);
const f64 = new Float64Array(4194304);

const Iterations = 1;

let Start = window.performance.now();
for(let h = 0; h < Iterations;   h) for(let i = 0; i < 4194304;   i) Add_i8(i8, 0, i8, i);
console.log("Int8: "   (window.performance.now() - Start));

Start = window.performance.now();
for(let h = 0; h < Iterations;   h) for(let i = 0; i < 4194304;   i) Add_i16(i16, 0, i16, i);
console.log("Int16: "   (window.performance.now() - Start));

Start = window.performance.now();
for(let h = 0; h < Iterations;   h) for(let i = 0; i < 4194304;   i) Add_i32(i32, 0, i32, i);
console.log("Int32: "   (window.performance.now() - Start));

Start = window.performance.now();
for(let h = 0; h < Iterations;   h) for(let i = 0; i < 4194304;   i) Add_f32(f32, 0, f32, i);
console.log("Float32: "   (window.performance.now() - Start));

Start = window.performance.now();
for(let h = 0; h < Iterations;   h) for(let i = 0; i < 4194304;   i) Add_f64(f64, 0, f64, i);
console.log("Float64: "   (window.performance.now() - Start));

While this works, this clearly isn't ideal. I tried returning the function from another function, but all returned functions were deoptimised, even if each was only used on one typed array type. Surely, copying the functions manually isn't the only way of making the functions different from v8's point of view?

CodePudding user response：

Using the Function() constructor, you can achieve the desired performance optimization while keeping your source code DRY:

const fnBody = `array1[index1 << 2 | 0]  = array2[index2 << 2 | 0];
array1[index1 << 2 | 1]  = array2[index2 << 2 | 1];
array1[index1 << 2 | 2]  = array2[index2 << 2 | 2];
array1[index1 << 2 | 3]  = array2[index2 << 2 | 3];`;

const createAddFn = () => new Function("array1", "index1", "array2", "index2", fnBody);

const add_i8 = createAddFn();
const add_i16 = createAddFn();
const add_i32 = createAddFn();
const add_f32 = createAddFn();
const add_f64 = createAddFn();

const commonLength = 4194304;

const i8Array = new Int8Array(commonLength);
const i16Array = new Int16Array(commonLength);
const i32Array = new Int32Array(commonLength);
const f32Array = new Float32Array(commonLength);
const f64Array = new Float64Array(commonLength);

const iterations = 1;
let start;

const testData = [
  ["Int8", i8Array, add_i8],
  ["Int16", i16Array, add_i16],
  ["Int32", i32Array, add_i32],
  ["Float32", f32Array, add_f32],
  ["Float64", f64Array, add_f64],
];

for (const [name, typedArray, fn] of testData) {
  start = window.performance.now();

  for (let h = 0; h < iterations;   h) {
    for (let i = 0; i < commonLength;   i) {
      fn(typedArray, 0, typedArray, i);
    }
  }

  console.log(`${name}: `   (window.performance.now() - start));
}