性能优化 - 解决使用data range intensity在大批量数据下渲染性能缓慢

[314513535]

背景
项目中需要基于百度地图在一屏绘制大量栅格图形，数据量大概在几千到4万不等。同时需要对多边形的不同count值才用渐变色的分级着色（data range intensity）功能。之前只在Chrome浏览器上测试过，发现性能还行。但最近随着Chrome升级到V76版本后，性能暴降，于是做了几轮测试，发现
在V76及之后的Chrome版本上，绘制大概18000个栅格，需要消耗平均10~13秒。在其他浏览器，比如IE 11, Edge, Firefox上也要消耗至少10秒的时间，说明慢的原因不在于浏览器本身，Chrome升级后应该是把原先内置的某种优化废弃了。使用的option如下：
{
size: 20,
fillStyle: 'rgba(100, 100, 100, 0.9)',
max: 49,
maxSize: 35,
minSize: 0,
min: 0,
globalAlpha: 0.7,
context: '2d',
draw: 'intensity',
gradient: {
"0": " rgba(8,108,162,0.9)",
"0.01": " rgba(0, 187, 63, 0.9)",
"0.25": " rgba(255, 198, 0, 0.9)",
"0.5": " rgba(255, 146, 0, 0.9)",
"0.75": " rgba(255, 40, 0, 0.9)"
}
}

原因分析
仔细查看代码后发现了在渲染时BaseLayer会调用processData方法。该方法中会遍历data，在我的case中就是循环18000次。由于使用了intensity，每一次都会调用其getColor方法
`processData(data) {
var self = this;
var draw = self.options.draw;
if (draw == 'bubble' || draw == 'intensity' || draw == 'category' || draw == 'choropleth' || draw == 'simple') {

        for (var i = 0; i < data.length; i++) {
            var item = data[i];

            if (self.options.draw == 'bubble') {
                data[i]._size = self.intensity.getSize(item.count);
            } else {
                data[i]._size = undefined;
            }

            var styleType = '_fillStyle';

            if (data[i].geometry.type === 'LineString' || self.options.styleType === 'stroke') {
                styleType = '_strokeStyle';
            }

            if (self.options.draw == 'intensity') {
                data[i][styleType] = self.intensity.getColor(item.count);
            } else if (self.options.draw == 'category') {
                data[i][styleType] = self.category.get(item.count);
            } else if (self.options.draw == 'choropleth') {
                data[i][styleType] = self.choropleth.get(item.count);
            }
        }

    }
}`

而在getColor方法中，会调用this.paletteCtx.getImageData 来获得ColorSet。正是这个地方造成性能的缓慢。

`Intensity.prototype.getColor = function (value) {

var imageData = this.getImageData(value);

return "rgba(" + imageData[0] + ", " + imageData[1] + ", " + imageData[2] + ", " + imageData[3] / 256 + ")";

}

Intensity.prototype.getImageData = function (value) {

var imageData = this.paletteCtx.getImageData(0, 0, 256, 1).data;

if (value === undefined) {
    return imageData;
}

var max = this.max;
var min = this.min;

if (value > max) {
    value = max;
}

if (value < min) {
    value = min;
}

var index = Math.floor((value - min) / (max - min) * (256 - 1)) * 4;

return [imageData[index], imageData[index + 1], imageData[index + 2], imageData[index + 3]];

}`

解决方案
这个ColorSet显然与传入的value无关，可以提取到data 循环的外部
`Intensity.prototype.getColorSet = function () {
return this.paletteCtx.getImageData(0, 0, 256, 1).data;
};
Intensity.prototype.getColorFromColorSet = function (value, colorSet) {
var imageData = this.getImageDataFromColorSet(value, colorSet);
return "rgba(" + imageData[0] + ", " + imageData[1] + ", " + imageData[2] + ", " + imageData[3] / 256 + ")";
};

Intensity.prototype.getImageDataFromColorSet = function (value, colorSet) {
if (value === undefined) {
return colorSet;
}
var max = this.max;
var min = this.min;
if (value > max) {
value = max;
}
if (value < min) {
value = min;
}
var index = Math.floor((value - min) / (max - min) * (256 - 1)) * 4;
return [colorSet[index], colorSet[index + 1], colorSet[index + 2], colorSet[index + 3]];
};
然后在循环内使用预先准备好的ColorSetprocessData(data) {
var self = this;
var draw = self.options.draw;
if (draw == 'bubble' || draw == 'intensity' || draw == 'category' || draw == 'choropleth' || draw == 'simple') {
var colorSet = self.intensity.getColorSet();
for (var i = 0; i < data.length; i++) {
var item = data[i];
if (self.options.draw == 'bubble') {
data[i]._size = self.intensity.getSize(item.count);
} else {
data[i]._size = undefined;
}
var styleType = '_fillStyle';
if (data[i].geometry.type === 'LineString' || self.options.styleType === 'stroke') {
styleType = '_strokeStyle';
}
if (self.options.draw == 'intensity') {
data[i][styleType] = self.intensity.getColorFromColorSet(item.count, colorSet);
} else if (self.options.draw == 'category') {
data[i][styleType] = self.category.get(item.count);
} else if (self.options.draw == 'choropleth') {
data[i][styleType] = self.choropleth.get(item.count);
}
}
}
}`

测试后发现在新版Chrome及其他主流浏览器下，同样渲染18000个栅格仅需要1~2秒，问题解决。
望能采纳该意见及早进行修复。