Run results for: Different method to write a TypedArray

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36 Edg/141.0.0.0

Browser: Chrome 141

Operating system: Windows

Device Platform: Desktop

Date tested: 8 months ago

Test name	Executions per second
For loop from direct data. Length 10	27901.1 Ops/sec
For loop from copied data. Length 10	27744.1 Ops/sec
For loop with flat. Length10	7197.3 Ops/sec
For loop using TypedArray. Length 10	12664.2 Ops/sec
For loop using set. Length 10	20138.7 Ops/sec
For loop using set with seperated array. Length 10	22127.6 Ops/sec
For loop using set with TypedArray. Length 10	11523.2 Ops/sec
For loop direct set. Length 10	30952.7 Ops/sec
For loop from direct data. Length 100	27635.0 Ops/sec
For loop from copied data. Length 100	24888.3 Ops/sec
For loop with flat Length.100	7100.8 Ops/sec
For loop using TypedArray. Length 100	28168.6 Ops/sec
For loop using set. Length 100	31756.6 Ops/sec
For loop using set with seperated array. Length 100	50935.8 Ops/sec
For loop using set with TypedArray. Length 100	36172.9 Ops/sec

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

const data = Array.from({ length: 1000 }, () => Array.from({ length: 10 }, () => Math.random()));
const data2 = Array.from({ length: 100 }, () => Array.from({ length: 100 }, () => Math.random()))

// We also need to take into account the overhead of creating arrays.
const createWholeArray = () => {
	const arr = new Array(1000);
  	data.forEach((v, i) => {
    	arr[i] = v.slice()
    });
  	return arr;
}

const createArray = (index) => {
	return data[index].slice();
}

const createTypedArray = (index) => {
	return new Float32Array(data[index]);
}

const createWholeArray2 = () => {
	const arr = new Array(100);
  	data.forEach((v, i) => {
    	arr[i] = v.slice();
    });
  	return arr;
}

const createArray2 = (index) => {
	return data2[index].slice();
}

const createTypedArray2 = (index) => {
	return new Float32Array(data[index]);
}

Tests:

For loop from direct data. Length 10
const arr = new Float32Array(10000); for (let i = 0; i < 1000; i++) { for (let j = 0; j < 10; j++) { arr[i * 10 + j] = data[i][j]; } }
For loop from copied data. Length 10
const arr = new Float32Array(10000); const copied = createWholeArray(); for (let i = 0; i < 1000; i++) { for (let j = 0; j < 10; j++) { arr[i * 10 + j] = copied[i][j]; } }
For loop with flat. Length10
const arr = new Float32Array(10000); const copied = createWholeArray().flat(); for (let i = 0; i < 10000; i++) { arr[i] = copied[i]; }
For loop using TypedArray. Length 10
const arr = new Float32Array(10000); for (let i = 0; i < 1000; i++) { const typed = createTypedArray(i); for (let j = 0; j < 10; j++) { arr[i * 10 + j] = typed[j]; } }
For loop using set. Length 10
const arr = new Float32Array(10000); const copied = createWholeArray(); for (let i = 0; i < 1000; i++) { arr.set(copied[i], i * 10); }
For loop using set with seperated array. Length 10
const arr = new Float32Array(10000); for (let i = 0; i < 1000; i++) { arr.set(createArray(i), i * 10); }
For loop using set with TypedArray. Length 10
const arr = new Float32Array(10000); for (let i = 0; i < 1000; i++) { arr.set(createTypedArray(i), i * 10); }
For loop direct set. Length 10
const arr = new Float32Array(10000); for (let i = 0; i < 1000; i++) { arr[i * 10] = data[i][0]; arr[i * 10 + 1] = data[i][1]; arr[i * 10 + 2] = data[i][2]; arr[i * 10 + 3] = data[i][3]; arr[i * 10 + 4] = data[i][4]; arr[i * 10 + 5] = data[i][5]; arr[i * 10 + 6] = data[i][6]; arr[i * 10 + 7] = data[i][7]; arr[i * 10 + 8] = data[i][8]; arr[i * 10 + 9] = data[i][9]; }
For loop from direct data. Length 100
const arr = new Float32Array(10000); for (let i = 0; i < 100; i++) { for (let j = 0; j < 100; j++) { arr[i * 100 + j] = data2[i][j]; } }
For loop from copied data. Length 100
const arr = new Float32Array(10000); const copied = createWholeArray2(); for (let i = 0; i < 100; i++) { for (let j = 0; j < 100; j++) { arr[i * 100 + j] = copied[i][j]; } }
For loop with flat Length.100
const arr = new Float32Array(10000); const copied = createWholeArray2().flat(); for (let i = 0; i < 10000; i++) { arr[i] = copied[i]; }
For loop using TypedArray. Length 100
const arr = new Float32Array(10000); for (let i = 0; i < 100; i++) { const typed = createTypedArray2(i); for (let j = 0; j < 100; j++) { arr[i * 100 + j] = typed[j]; } }
For loop using set. Length 100
const arr = new Float32Array(10000); const copied = createWholeArray2(); for (let i = 0; i < 100; i++) { arr.set(copied[i], i * 100); }
For loop using set with seperated array. Length 100
const arr = new Float32Array(10000); for (let i = 0; i < 100; i++) { arr.set(createArray2(i), i * 100); }
For loop using set with TypedArray. Length 100
const arr = new Float32Array(10000); for (let i = 0; i < 100; i++) { arr.set(createTypedArray2(i), i * 100); }
Set with flatted array. Length 10
const arr = new Float32Array(10000); const copied = createWholeArray().flat(); arr.set(copied, 0);
Set with flatted array. Length 100
const arr = new Float32Array(10000); const copied = createWholeArray2().flat(); arr.set(copied, 0);

Run results for: Different method to write a TypedArray

For loop from direct data. Length 10

For loop from copied data. Length 10

For loop with flat. Length10

For loop using TypedArray. Length 10

For loop using set. Length 10

For loop using set with seperated array. Length 10

For loop using set with TypedArray. Length 10

For loop direct set. Length 10

For loop from direct data. Length 100

For loop from copied data. Length 100

For loop with flat Length.100

For loop using TypedArray. Length 100

For loop using set. Length 100

For loop using set with seperated array. Length 100

For loop using set with TypedArray. Length 100

Set with flatted array. Length 10

Set with flatted array. Length 100