DataView float

JavaScript performance comparison

Test case created by m-schuetz

Preparation code

<p>
DataView offers a standard and easy to use API to read float and integer values of various sizes from a binary buffer at arbitrary byte offsets.

Unfortunately, Firefox's DataView implementation seems to be two orders of magnitudes slower than that of Chrome. Reading 3D models from binary files or processing/transforming 3D data in binary buffers frequently requires the use of DataView. A widely used hack is to use a 4 byte Uint8Array buffer instead, copy the relevant 4 bytes from the source buffer into it, and then interpret this Uint8Array as a Float32Array to retrieve the value. While this is faster than DataView in Firefox, it is also considerably sloer than DataView in chrome. It is also a rather unfortunate and ugly hack.
</p>
      
<script>
Benchmark.prototype.setup = function() {
  function createTestData(size){
  
  	let buffer = new ArrayBuffer(4 * size);
  	let f32 = new Float32Array(buffer);
  
  	for(let i = 0; i < size; i++){
  		f32[i] = Math.random();
  	}
  
  	return buffer;
  }
  
  let n = 1_000_000;
  let buffer = createTestData(n);
  
  

};
</script>

Preparation code output

<p> DataView offers a standard and easy to use API to read float and integer values of various sizes from a binary buffer at arbitrary byte offsets. Unfortunately, Firefox's DataView implementation seems to be two orders of magnitudes slower than that of Chrome. Reading 3D models from binary files or processing/transforming 3D data in binary buffers frequently requires the use of DataView. A widely used hack is to use a 4 byte Uint8Array buffer instead, copy the relevant 4 bytes from the source buffer into it, and then interpret this Uint8Array as a Float32Array to retrieve the value. While this is faster than DataView in Firefox, it is also considerably sloer than DataView in chrome. It is also a rather unfortunate and ugly hack. </p>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
using DataView
let view = new DataView(buffer);

let sum = 0;
for(let i = 0; i < n; i++){
	let value = view.getFloat32(4 * i, true);
	sum += value;
}
let mean = sum / n;

console.log(`mean: ${mean}`);
pending…
using u8 array hack
let view = new Uint8Array(buffer);

let hackBuffer = new ArrayBuffer(4);
let hackU8 = new Uint8Array(hackBuffer);
let hackF32 = new Float32Array(hackBuffer);

let sum = 0;
for(let i = 0; i < n; i++){
	hackU8[0] = view[4 * i + 0];
	hackU8[1] = view[4 * i + 1];
	hackU8[2] = view[4 * i + 2];
	hackU8[3] = view[4 * i + 3];

	let value = hackF32[0];
	sum += value;
}
let mean = sum / n;

console.log(`mean: ${mean}`);
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments

DataView offers a standard and easy to use API to read float and integer values of various sizes from a binary buffer at arbitrary byte offsets. Unfortunately, Firefox's DataView implementation seems to be two orders of magnitudes slower than that of Chrome. Reading 3D models from binary files or processing/transforming 3D data in binary buffers frequently requires the use of DataView. A widely used hack is to use a 4 byte Uint8Array buffer instead, copy the relevant 4 bytes from the source buffer into it, and then interpret this Uint8Array as a Float32Array to retrieve the value. While this is faster than DataView in Firefox, it is also considerably sloer than DataView in chrome. It is also a rather unfortunate and ugly hack.