总画布内存使用超过最大限制 (Safari 12)

2022-01-17 00:00:00 webkit javascript html5-canvas safari mobile-safari

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

We are working on a visualization web application which use d3-force to draw a network on a canvas.

但现在我们遇到了 iOS 浏览器的问题，即进程在与界面进行几次交互后崩溃.回想起来，这在旧版本(iOS12 之前)没有问题，但我没有任何未更新的设备来确认这一点.

But now we’ve got a problem with browsers on iOS, where the process crashes after few interactions with the interface. To my recollection, this was not a problem with older version (prior to iOS12), but I don’t have any not-updated-device to confirm this.

我认为这段代码总结了问题:

I think this code summarizes the problem :

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 和检查器中:

Then on an iPad and in the inspector :

> 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 返回一个空指针.这样就不可能再创建一个画布了.

Being, I create 256 x 1MB canvas, everything goes well, but I create one more and the canvas.getContext returns a null pointer. It is then impossible to create another canvas.

限制似乎与设备相关，因为在 iPad 上为 256MB，在 iPhone X 上为 288MB.

The limit seems to be device related as on the iPad its is 256MB and on an iPhone X it is 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，但这并不能解决问题).

As it is a cache I should be able to delete some elements, but I’m not (as setting ctxs or ctx to null should trigger the GC, but it does not solve the problem).

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

The only relevant page I found on this problem is a webkit source code page: HTMLCanvasElement.cpp.

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

I suspect the problem could come from webkit itself, but I’m would like to be sure before posting to webkit issue tracker.

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

Is there another way to destroy the canvas contexts ?

提前感谢您的任何想法，指针，...

Thanks in advance for any idea, pointer, ...

更新

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

I found this Webkit issue which is (probably) a description of this bug: https://bugs.webkit.org/show_bug.cgi?id=195325

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

To add some informations, I tried other browsers. Safari 12 has the same problem on macOS, even if the limit is higher (1/4 of the computer memory, as stated in webkit sources). I also tried with the latest webkit build (236590) without more luck. But the code works on Firefox 62 and Chrome 69.

我改进了测试代码，因此可以直接从调试器控制台执行.如果有人可以在较旧的 safari(如 11)上测试代码，那将非常有帮助.

I refined the test code, so it can be executed directly from the debugger console. It would be really helpful if someone could test the code on an older safari (like 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)

推荐答案

有人发布了一个答案，显示了一个解决方法.这个想法是在删除画布之前将高度和宽度设置为 0.这不是一个真正合适的解决方案，但它可以在我的缓存系统中工作.

Someone posted an answer, that showed a workaround for this. The idea is to set height and width to 0 before deleting the canvases. It is not really a proper solution, but it will work in my cache system.

我添加了一个小示例，它创建画布直到抛出异常，然后清空缓存并继续.

I add a small example that creates canvases until an exception is thrown, then empties the cache and continues.

感谢发布此答案的匿名人士.

Thank to the now anonymous person who posted this answer.

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 = nbImage => {
    // create i * 1MB images
    const canvases = []

    for (let i = 0; i < nbImage; i++) {
        canvases.push(createImage())
    }

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

const deleteCanvases = canvases => {
    canvases.forEach((canvas, i, a) => {
        canvas.height = 0
        canvas.width = 0
    })
}

let canvases = []
const process = (frequency, size) => {
    setInterval(() => {
        try {
            canvases.push(...createImages(size))
            counter += size
            console.log(`total ${counter}`)
        }
        catch (e) {
            deleteCanvases(canvases)
            canvases = []
        }
    }, frequency)
}


process(2000, 1000)

相关文章