javascript - Mapbox GL JS图层动画低fps
问题描述
我使用以下 Javascript 代码为我的地图上的雷达图层设置动画：
function updateLayer() {
window.requestAnimationFrame(updateLayer);
var now = Date.now();
elapsed = now - then;
if (elapsed > fpsInterval) {
//fpsInterval being 1000 / 10 or 1000 / 60
then = now - (elapsed % fpsInterval);
updateLayerImage();
}
}
updateLayerImage() 以 5 分钟的步长循环显示过去 3 小时的雷达图像。
然而，这会导致动画非常缓慢（大约 1-2 fps）。以下是我所做的事情：
- 由于我直接从官方天气源加载雷达图像，每张图像大约 500 KB 到 3 MB，我认为这可能是每秒加载 60 次时的瓶颈。所以我写了一个独立的脚本，将最近 3 小时的雷达图像缓存在我自己的服务器上，这样可以提供更快的连接。结果只有一点点改善。
- 我更改了该缓存代码以将图像另外压缩到每个 300 KB 左右，这应该会使其更快，但没有太大帮助。
- 我不是 Javascript 方面的专家，也不知道如何在客户端浏览器中“缓存”图像，所以我执行以下操作：下载图像后，我将其添加为简单（隐藏）img src="" id ="" 标记。一旦我的 updateLayerImage() 循环回到同一个图像，我就不会从我的服务器再次加载它，而是实际上重用了图像。
- 然而，Mapbox GL JS 不支持更新图像源的图像，而只支持更新它的 url，这使得它可以再次下载它。因此，我下载了 Mapbox GL JS 代码并将图像源文件更改为具有以 HTMLImageElement 作为参数并将其分配给源的函数，而无需下载任何内容。Yarn 安装了代码并嵌入了我自己的 Mapbox GL JS 文件，然后，在所有图像都加载到 HTML 页面后，没有网络连接发生。实际上仍然没有更快。
我没有想法，因为我的图像相对较小，我不会多次从互联网上加载它们并重复使用它们。但是我的fps仍然很低。我开始认为这是 Mapbox GL JS 的限制......
如何提高我的fps？
编辑：
测量updateLayerImage()结果在 45 毫秒到 2 毫秒以下的不同持续时间的性能时间！在里面，updateLayerImage()我在 image_source.js 文件中调用 Mapbox GL JS 的函数来触发一个dataloading事件，我将我的新图像分配给它的图像变量，然后我调用 _finishLoadinig() 来触发一个data事件。一些图像渲染魔法——我认为——需要很多时间。有什么方法可以简单地重新分配图像变量并触发简单的重新绘制？