我们正在开发一个 可视化 Web 应用程序 ，它使用 d3-force 在画布上绘制网络。

但现在我们在 iOS 浏览器上遇到了一个问题，在与界面进行几次交互后，进程崩溃了。 据我回忆，这不是旧版本（iOS12 之前）的问题，但我没有任何未更新的设备来确认这一点。

我认为此代码总结了问题：

const { range } = require('d3-array')

// create a 1MB image
const createImage = () => {
    const size = 512

    const canvas = document.createElement('canvas')
    canvas.height = size
    canvas.width = size

    const ctx = canvas.getContext('2d')
    ctx.strokeRect(0, 0, size, size)
    return canvas
}

const createImages = i => {
    // create i * 1MB images
    let ctxs = range(i).map(() => {
        return createImage()
    })
    console.log(`done for ${ctxs.length} MB`)
    ctxs = null
}

window.cis = createImages

然后在 iPad 和检查器中：

> cis(256)
[Log] done for 256 MB (main-a9168dc888c2e24bbaf3.bundle.js, line 11317)
< undefined
> cis(1)
[Warning] Total canvas memory use exceeds the maximum limit (256 MB). (main-a9168dc888c2e24bbaf3.bundle.js, line 11307)
< TypeError: null is not an object (evaluating 'ctx.strokeRect')

首先，我创建了 256 x 1MB 画布，一切顺利，但我又创建了一个，canvas.getContext 返回了一个空指针。 然后就无法创建另一个画布了。

该限制似乎与设备有关，因为在 iPad 上是 256MB，在 iPhone X 上是 288MB。

> cis(288)
[Log] done for 288 MB (main-a9168dc888c2e24bbaf3.bundle.js, line 11317)
< undefined
> cis(1)
[Warning] Total canvas memory use exceeds the maximum limit (288 MB). (main-a9168dc888c2e24bbaf3.bundle.js, line 11307)
< TypeError: null is not an object (evaluating 'ctx.strokeRect')

由于它是一个缓存，我应该能够删除一些元素，但我没有（因为将 ctxs 或 ctx 设置为 null 应该会触发 GC，但这并不能解决问题）。

我在这个问题上找到的唯一相关页面是 webkit 源代码页面： HTMLCanvasElement.cpp 。

我怀疑问题可能来自 webkit 本身，但在发布到 webkit 问题跟踪器之前，我想确定一下。

还有其他方法可以破坏画布上下文吗?

在此先感谢您的任何想法、指点……

更新

我发现这个 Webkit 问题（可能是）此错误的描述： https://bugs.webkit.org/show_bug.cgi?id=195325

为了添加一些信息，我尝试了其他浏览器。Safari 12 在 macOS 上也存在同样的问题，即使限制更高（计算机内存的 1/4，如 webkit 源中所述）。我也尝试使用最新的 webkit 版本 (236590)，但没有更多运气。 但代码适用于 Firefox 62 和 Chrome 69。

我改进了测试代码，因此可以直接从调试器控制台执行。如果有人可以在较旧的 Safari（例如 11）上测试代码，那将会非常有帮助。

let counter = 0

// create a 1MB image
const createImage = () => {
    const size = 512

    const canvas = document.createElement('canvas')
    canvas.height = size
    canvas.width = size

    const ctx = canvas.getContext('2d')
    ctx.strokeRect(0, 0, size, size)
    return canvas
}

const createImages = n => {
    // create n * 1MB images
    const ctxs = []

    for( let i=0 ; i<n ; i++ ){
        ctxs.push(createImage())
    }

    console.log(`done for ${ctxs.length} MB`)
}

const process = (frequency,size) => {
    setInterval(()=>{
        createImages(size)
        counter+=size
        console.log(`total ${counter}`)
    },frequency)
}


process(2000,1000)