Run results for: Different method to write a TypedArray

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:146.0) Gecko/20100101 Firefox/146.0

Browser: Firefox 146

Operating system: Windows

Device Platform: Desktop

Date tested: 4 months ago

Test name	Executions per second
For loop from direct data. Length 10	19063.3 Ops/sec
For loop from copied data. Length 10	7275.4 Ops/sec
For loop with flat. Length10	3425.5 Ops/sec
For loop using TypedArray. Length 10	3645.7 Ops/sec
For loop using set. Length 10	4449.2 Ops/sec
For loop using set with seperated array. Length 10	5773.1 Ops/sec
For loop using set with TypedArray. Length 10	5520.9 Ops/sec
For loop direct set. Length 10	35546.2 Ops/sec
For loop from direct data. Length 100	26449.7 Ops/sec
For loop from copied data. Length 100	4686.0 Ops/sec
For loop with flat Length.100	4012.5 Ops/sec
For loop using TypedArray. Length 100	9652.1 Ops/sec
For loop using set. Length 100	9343.9 Ops/sec
For loop using set with seperated array. Length 100	16771.6 Ops/sec
For loop using set with TypedArray. Length 100	35593.1 Ops/sec
Set with flatted array. Length 10	3788.5 Ops/sec
Set with flatted array. Length 100	3793.4 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