Improve Heatmap rendering performance when zsmooth is false

[lvlte]

The idea is to use the zsmooth="fast" rendering method, which is currently faster than without smoothing (imageData pixel array vs fillRect), whenever possible, and tell the browser to not interpolate when zsmooth is false.

The condition is that all bricks should be uniform (ie. linear axes, linear scales, no gaps), so the proposition doesn't come as a replacement for the fillRect loop.

Here is a codepen that illustrates what I mean.

The performance gain becomes significant when used with sliders, as discussed here, and here.

[alexcjohnson]

Thanks @lvlte - this is a great idea, the main constraint here is we need to detect whether the browser supports image-rendering: pixelated - all current browsers do seem to support this, but we generally aim to support at least 7-year-old browsers and some of them only got this 2-3 years ago.

[lvlte]

@alexcjohnson I'm about to submit a PR but yes I should have started with this (the browser support detection is not part of the PR yet - and I hope the detection is feasible without all of this ending too hackish).

Do you know if there is a browser feature detection utility used somewhere in the project, something that i could reuse ? Or is the idea already too hackish ?

[EDIT] : In fact this trick is already used for image traces, the image-rendering capability is not really tested, there is just a quick browser test :

var unsupportedBrowsers = Lib.isIOS() || Lib.isSafari() || Lib.isIE();

var supportsPixelatedImage = !(unsupportedBrowsers || gd._context._exportedPlot);

var realImage = (
    ((trace.zsmooth === 'fast') || (trace.zsmooth === false && supportsPixelatedImage)) &&
    !trace._hasZ && trace._hasSource && xa.type === 'linear' && ya.type === 'linear'
);
trace._realImage = realImage;

var style = (trace.zsmooth === false) ? constants.pixelatedStyle : '';

image3.attr('style', style);

And a list of values to apply : constants.pixelatedStyles.

I was thinking about something a bit more specific, maybe using CSS.support() ?