TypedArray Performance Comparison with Loop Unrolling in Javascript

Question

TypedArray Performance Comparison with Loop Unrolling in Javascript

When I set out to create my own WebGL 3D library for learning purposes, I followed documentation from various sources claiming that the set() function for Float32Array was touted as being "as fast as" memcpy in C and the fastest option according to html5rocks. However, upon testing, it appeared that this function was actually much slower compared to other techniques.

Upon further investigation, I looked into glMatrix, where the author had optimized their library by unrolling loops for speed. Even though this is a common practice for maximizing performance, I still believed that utilizing the set() function would provide me with the best results since I intended to work exclusively with TypedArray types.

To put my theory to the test, I created a jsperf benchmark. Surprisingly, not only did the set() function turn out to be significantly slower, but every other method I experimented with surpassed it in terms of speed. This led me to question why this supposedly efficient function was performing so poorly.

Ultimately, my question remains: Why is the set() function underperforming? Could it be an issue with my code, my browser (Firefox 24), or am I overlooking some key optimization strategy? Any insights or explanations on this unexpected outcome would greatly benefit my understanding.

javascript performance optimization webgl typed-arrays

Answer 1

Answer №1

Although dated, utilizing TypedArrays can be beneficial if aiming to optimize underperforming code. It is essential to grasp that TypedArray objects in JavaScript act as views representing a specific range of bytes within an ArrayBuffer. While the underlying ArrayBuffer holds the consecutive block of binary data for manipulation, using a view enables access and alteration of a window of this data.

Multiple distinct (and potentially overlapping) ranges in the same ArrayBuffer may be observed through various TypedArray objects. When two TypedArray objects share an ArrayBuffer, the set operation performs exceptionally quickly due to the contiguous memory allocation.

For instance, let's consider creating an ArrayBuffer of 32 bytes with two length-16 Uint8Array arrays representing separate halves:

var buffer = new ArrayBuffer(32);
var array1 = new Uint8Array(buffer,  0, 16);
var array2 = new Uint8Array(buffer, 16, 16);

Values can now be initialized in the first half of the buffer:

for (var i = 0; i < 16; i++) array1[i] = i;
console.log(array1); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
console.log(array2); // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,  0,  0,  0,  0,  0]

A highly efficient transfer of these 8 bytes from the first half to the second half of the buffer can be achieved:

array2.set(array1);
console.log(array1); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
console.log(array2); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

It can be verified that both arrays share the same buffer by examining it via another view, like a length-8 Uint32Array covering the entire 32 bytes:

var array3 = new Uint32Array(buffer)
console.log(array3); // [50462976, 117835012, 185207048, 252579084, 
                     //  50462976, 117835012, 185207048, 252579084]

A performance test demonstrates a significant enhancement in copy operations on the same buffer compared to traditional methods:

http://jsperf.com/typedarray-set-vs-loop/3

The performance boost is substantial on browsers like Chrome and Firefox, outstripping the efficiency of duplicating the initial half into the latter half using regular arrays. However, the tradeoff between cycles and memory must be considered. As long as there is a reference to any single view of an ArrayBuffer, the remaining buffer data cannot undergo garbage collection. The proposed ES7 Harmony function ArrayBuffer.transfer addresses this issue by enabling explicit memory release without relying on garbage collection, along with dynamic expansion capabilities for ArrayBuffers without mandatory copying.

Answer 2

Although dated, utilizing TypedArrays can be beneficial if aiming to optimize underperforming code. It is essential to grasp that TypedArray objects in JavaScript act as views representing a specific range of bytes within an ArrayBuffer. While the underlying ArrayBuffer holds the consecutive block of binary data for manipulation, using a view enables access and alteration of a window of this data.

Multiple distinct (and potentially overlapping) ranges in the same ArrayBuffer may be observed through various TypedArray objects. When two TypedArray objects share an ArrayBuffer, the set operation performs exceptionally quickly due to the contiguous memory allocation.

For instance, let's consider creating an ArrayBuffer of 32 bytes with two length-16 Uint8Array arrays representing separate halves:

var buffer = new ArrayBuffer(32);
var array1 = new Uint8Array(buffer,  0, 16);
var array2 = new Uint8Array(buffer, 16, 16);

Values can now be initialized in the first half of the buffer:

for (var i = 0; i < 16; i++) array1[i] = i;
console.log(array1); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
console.log(array2); // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0,  0,  0,  0,  0,  0]

A highly efficient transfer of these 8 bytes from the first half to the second half of the buffer can be achieved:

array2.set(array1);
console.log(array1); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
console.log(array2); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

It can be verified that both arrays share the same buffer by examining it via another view, like a length-8 Uint32Array covering the entire 32 bytes:

var array3 = new Uint32Array(buffer)
console.log(array3); // [50462976, 117835012, 185207048, 252579084, 
                     //  50462976, 117835012, 185207048, 252579084]

A performance test demonstrates a significant enhancement in copy operations on the same buffer compared to traditional methods:

http://jsperf.com/typedarray-set-vs-loop/3

The performance boost is substantial on browsers like Chrome and Firefox, outstripping the efficiency of duplicating the initial half into the latter half using regular arrays. However, the tradeoff between cycles and memory must be considered. As long as there is a reference to any single view of an ArrayBuffer, the remaining buffer data cannot undergo garbage collection. The proposed ES7 Harmony function ArrayBuffer.transfer addresses this issue by enabling explicit memory release without relying on garbage collection, along with dynamic expansion capabilities for ArrayBuffers without mandatory copying.

Answer 3

Answer №2

When it comes to the `set` function, its semantics are not as straightforward in V8. After some careful consideration and analysis (as seen here), it ultimately ends up executing a similar loop to what other methods are doing directly in the first place (as shown here).

It's important to remember that JavaScript gets compiled into highly optimized machine code when done correctly (as demonstrated by all the tests). Therefore, there's no need to excessively praise certain methods simply because they are considered "native".

Answer 4

When it comes to the `set` function, its semantics are not as straightforward in V8. After some careful consideration and analysis (as seen here), it ultimately ends up executing a similar loop to what other methods are doing directly in the first place (as shown here).

It's important to remember that JavaScript gets compiled into highly optimized machine code when done correctly (as demonstrated by all the tests). Therefore, there's no need to excessively praise certain methods simply because they are considered "native".

Answer 5

Answer №3

In my recent investigations, I've delved into the performance of set() and found that for smaller blocks (like the 16 indices utilized by the original poster), set() is still approximately 5 times slower than a comparable unrolled loop – even when working on a continuous block of memory.

I ran some modifications to the initial jsperf test here. From what I observed, it's safe to conclude that for minor block transfers such as these, set() falls short in comparison to the efficiency of unrolled index assignments. On the other hand, with larger block transfers (as highlighted in sbking's trial), set() shows better performance. However, when pitted against a daunting one million array index operations, it seems unreasonable not to be able to outperform them with just a single instruction.

Through testing, I noticed that using a contiguous buffer with set() yields slightly improved results compared to utilizing a separate buffer with set(). Nevertheless, the advantage in performance at this transfer size remains negligible.

Answer 6

In my recent investigations, I've delved into the performance of set() and found that for smaller blocks (like the 16 indices utilized by the original poster), set() is still approximately 5 times slower than a comparable unrolled loop – even when working on a continuous block of memory.

I ran some modifications to the initial jsperf test here. From what I observed, it's safe to conclude that for minor block transfers such as these, set() falls short in comparison to the efficiency of unrolled index assignments. On the other hand, with larger block transfers (as highlighted in sbking's trial), set() shows better performance. However, when pitted against a daunting one million array index operations, it seems unreasonable not to be able to outperform them with just a single instruction.

Through testing, I noticed that using a contiguous buffer with set() yields slightly improved results compared to utilizing a separate buffer with set(). Nevertheless, the advantage in performance at this transfer size remains negligible.

TypedArray Performance Comparison with Loop Unrolling in Javascript

Answer №1

Answer №2

Answer №3

Similar questions

Troubles with setting up node modules in a Windows 10 environment

Is there a way to determine if a user has already been timed out in Discord?

The 'disabled' property is not found in the 'MatButton' type, however, it is necessary in the 'CanDisable' type

Jupyter notebook does not support the visualization of D3 graphics

Adding elements to an array using JavaScript

Generate an array of checked inputs to be used when posting to a REST API

Achieving asynchronous results in the parent function with TypeScript: a guide

JavaScript function to display the anchor tag's title attribute in a modal when clicked

Executing an asynchronous action without linking promises to subsequent actions

Capturing user-selected option from dropdown menu using npm

Guide to setting up a datePicker in a cellEditorSelector

What makes jQuery objects inherently one-of-a-kind?

"Stellar.js fails to function properly when applied to elements loaded dynamically through AJAX requests

What is the reason that textContent assignment does not function properly when used with HTML tags?

Utilize esbuild to monitor for any modifications, recompile the code, and automatically restart the express server

Constantly retrieving AngularJS JSON data on the details page

Implementing a Comment Section on Your Website with HTML and JavaScript

Update button text in real-time using JavaScript

Role Based Routing in React allows for different paths and components

What is the best way to run JavaScript using nodriver in Python?