To go into this a bit further: I have a piece of code for rendering scatterplots in Canvas. For big data-sets it starts out slow, but after one or two renders the JIT kicks in and it really speeds it up[0]. However, I recently noticed that when I switch between input data a lot, rendering slows down again tremendously.

I suspect the main reason is the following: the input data (for x/y coordinates, color, etc) can be any of the various TypedArrays. I figured that all else being equal, using the most compact array type possible would give the best cache benefits. However, this means the shape of the array changes based on the data used as input, prompting de-opts in the plotting functions, undoing the JIT-benefits.

So now my thinking is that maybe, the best option is refactoring the plotting function into a pre-processing function that converts the input data to arrays of consistent type (Float32Arrays, for example), and the actual plotting code that always receives the same type of array.

Furthermore, I wonder how much of a difference it would make if one copies the same function once for each array type, and use a "type switch" to ensure that the hidden class for the input of each of these functions is constant:

    function funcFactory(){
      return (arr) => {
        // do stuff here
      };
    }
    
    const uint8Func = funcFactory();
    const uint16Func = funcFactory();
    const float32Func = funcFactory();
    const arrayFunc = funcFactory();
    
    function process(arr){
      switch (arr.constructor) {
        case Uint8Array:
          return uint8Func(arr);
        case Uint16Array:
          return uint16Func(arr);
        case Float32Array:
          return float32Func(arr);
        default:
          // Remaining array types
          return arrayFunc(arr);
      }
    }

[0] https://i.imgur.com/Xfzsb2B.png

[1] https://stackoverflow.com/a/36332700/3211791

Similarly, one reason I'm using canvas instead of WebGL is because it's very easy to have hundreds of canvas elements on a page (for example when plotting hundreds of little barplots).

WebGL, afaik, does not expect you to open more than one WebGL view, and requires some trickery to work around this. For example, this regl-in-idyll example opens one "transparent" WebGL overlay over the whole screen and "scrolls" along with the actual webpage:

http://idyll-lang.org/idyll-regl-component/

Which, admittedly, is a really cool hack! However, if you then take into account that my employees like to print their webpages, it turns into a pain again...