dataZoom type inside bring unnecessary slow rendering in large data.

[100pah]

Version

5.1.2

Steps to reproduce

            const POINT_COUNT = 1e7;
            const dzStart = 10;
            const dzEnd = 60;

            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    animation: false
                    }
                },
                legend: {},
                dataZoom: [{
                    show: true,
                    realtime: true,
                    // showDataShadow: false,
                    start: dzStart,
                    end: dzEnd
                }, {
                    type: 'inside',
                    start: dzStart,
                    end: dzEnd,
                }],
                xAxis: [{
                    type: 'time'
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [],
                animation: false
            };

            var lineStyle = {
                normal: {
                    width: 2,
                    opacity: 1
                }
            };

            var oneDay = 24 * 3600 * 1000;
            var base = +new Date(1987, 9, 3);
            var y = Math.random() * 1000;
            var values = new Float64Array(POINT_COUNT * 2);
            var off = 0;
            for (var j = 0; j < POINT_COUNT; j++) {
                y += Math.round(10 + Math.random() * (-10 - 10));
                values[off++] = base += oneDay;
                values[off++] = y;
            }

            option.series.push({
                name: 'line',
                type: 'line',
                hoverAnimation: false,
                showSymbol: false,
                sampling: 'lttb',
                dimensions: ['date', 'value'],
                encode: {
                    x: 'date',
                    y: 'value'
                },
                data: values,
                lineStyle: lineStyle
            });

Drag dataZoom slider bar, the rendering time is OK. But pan on cartesian (that is, using dataZoom 'inside'), there is slow rendering, mainly caused on re-render of shadow in dataZoom slider (show in picture below, 289ms), which is unnecessary because it never changed.

What is expected?

The performance of dataZoom 'inside' should the same as dataZoom 'slider'.

[aahung]

I also experience more performance hit when zooming using "inside" compared to "slider."

The getShallow took significant amount of time:

[pissang]

I'm not sure but it seems because slider zoom have throttle but inside zoom doesn't

[aahung]

I am happy to be reached out if more info is needed when you start to investigate this issue. The zooming and panning are pretty laggy when more than ~1000 points in the window.