Don't store normal arrays of numbers in Indexed DB - use UInt8Array instead

January 25, 2024 [JavaScript, Performance, Tech]

Following on from Keep your Indexed DB keys and values small if you want good performance!, here is another thing I've learned about Indexed DB performance (in July 2024):

Update: Thanks to richvdh, we now know UInt8Array is much better than base64!

If you have a long list of numbers to store, don't put them in a JavaScript array - instead put them into a UInt8Array. Even encoding them to base64 strings is better than normal arrays.

Here are the numbers:

Graph showing that arrays of numbers are much slower to count than the same numbers encoded as base64, and UInt8Arrays are even better, in Firefox.

On Firefox, storing the same set of numbers as an array is much slower than encoding them as base64, and both are easily beaten by UInt8Arrays.

Graph showing that arrays of numbers are much slower to count than the same numbers encoded as base64, and UInt8Arrays are even better, in Chromium.

On Chromium, storing the same set of numbers as an array is much slower than encoding them as base64, and both are easily beaten by UInt8Arrays.

These graphs show that in both Firefox and Chromium (at time of writing), it is much faster to count the records in an Indexed DB store if the list of numbers inside each record is encoded as a base64 string instead of being included directly as a JavaScript array, but the best performance comes from using a UInt8Array.

The interactive 3D(!) graphs are here: artificialworlds.net/indexed-db-perf/arrays.html and the source code is at codeberg.org/andybalaam/indexed-db-perf.

See also: Keep your Indexed DB keys and values small if you want good performance! and Deleting an Indexed DB store can be incredibly slow on Firefox.