chrome使用getImageData耗时

问题

最近在实现一个鼠标滑动读取ol图层原始RGB颜色的功能。根据ol的示例，采取了监听图层的postrender事件，在事件对象中获取到了canvas context。在context上使用getIamgeData()函数时，在移动地图时会出现明显的卡顿现象。参考的ol示例如下:,参考的stackoverflow帖子。

相同的代码在firefox上运行是很流畅的，所以可以证明是chrome存在一定的性能问题。关于这个问题可以从下面这个帖子中探知一二，https://news.ycombinator.com/item?id=22267547。下面的图片对问题描述非常具体。

解决方案

1.拖拽跳过getImageData

在拖拽时不触发getImageData()方法。实验结果：只要开始触发过getImageData方法，即使后面在拖拽时不触发getImageData()方法，页面也会有卡顿，通过Performance查看是paint时间究极长的缘故。但只要重头到尾不触发getIamgeData(),就会很流畅。所以方案不通过，而且都多了一个疑问…

2.使用forEachLayerAtPixel()

原来针对获取值这个操作,ol中有专门的方法进行操作，具体的使用方式很简单而且页面不会卡顿，也有开源贡献者对getImageData()进行了专门的优化。详见：https://github.com/openlayers/openlayers/issues/10597

3.直接copy第二种方法中的优化

4.使用web worker

最后

后面两种方法我本人并没有实践，只是在解决问题时提出的提前构想，因为第二种就很完美了，所以也没必要搞了。第一次适配chrome也是别样的感受。