将巨大数组传递给webworker时不断增加内存使用

Question

我目前正在使用babylonjs进行一些3D建模。我需要从特定点的给定压力创建压力图。我正在使用IDW。然而，这意味着即使我的地图大小为70x90，我也需要一个25200的数组（每个像素有4个rgba值）。然后这个缓冲区被传递给一个RawTexture用于将它分配给一个物体，它覆盖在物体上

我正在使用网络工作者，因为我必须每隔100ms更新一次压力值，而且我不想阻止主线程。当我从服务工作者返回该数组（在calculate函数中创建）时发生该问题。

由于某些原因，内存使用量不断增加而不停止。它最终会达到大约1.5千兆字节，我必须杀死它。

问题：有没有什么办法可以防止这种情况，以及可能导致如此高的内存使用情况？

工人：

// @flow 
import { find, propEq, both } from 'ramda'; 
import { colorFromValue } from './color'; 
import { inverseDistance, distanceValues } from './math'; 

const findPoint = (x: number, y: number) => 
    find(both(propEq('x', x), propEq('y', y))); 

const distanceDict = {}; 

/* eslint-disable */ 
function calculate(options: Object, pList: Array<*>) { 
    const points = pList || []; 
    const { height, width } = options; 
    const gridWidth = width * 4; 
    const grid = new Uint8Array(options.width * options.height * 4); 

    for (let y = 0; y < height; y += 1) { 
    const rW = y * gridWidth; 
    for (let i = 0; i < gridWidth; i += 4) { 
     const index = i + rW; 
     const x = i/4; 
     const dictKey = `${x}--${y}`; 
     let bottoms = distanceDict[dictKey]; 

     if (bottoms === undefined) { 
     bottoms = distanceValues(points, x, y); 
     distanceDict[dictKey] = bottoms; 
     } 
     const point = findPoint(x, y)(points); 

     const value = point !== undefined && point !== null ? 
     point.value : inverseDistance(points, bottoms); 
     const color = colorFromValue(value); 
     grid[index] = color[0]; 
     grid[index + 1] = color[1]; 
     grid[index + 2] = color[2]; 
     grid[index + 3] = 255; 
    } 
    } 
    return grid; 
} 

self.onmessage = (e) => { 
    const { points, options } = e.data; 
    const grid = calculate(options, points); 
    self.postMessage(grid.buffer, [grid.buffer]); 
}; 

绘画：

modifyNodes = (points: Array<*>) => new Promise((res, rej) => { 
    this.worker.onmessage = (e) => { 
    this._texture.update(new Uint8Array(e.data)); 
    res(); 
    } 
    const data = { 
    options: this._options, 
    points, 
    }; 
    this.worker.postMessage(data); 
}) 

Answer 1

这么看来这个问题是在被memoized的colorFromValue功能。由于这些值的小数点很少，因此可以创建多达9个！新的条目进入缓存，所以它驱动了内存使用...