画布总内存使用量超过了最大限制(Safari 12) [英] Total canvas memory use exceeds the maximum limit (Safari 12)

问题描述

我们正在开发可视化Web应用程序，该应用程序使用d3-force在画布上绘制网络. 由于每个节点都包含大量信息，并且为每一帧重绘所有内容都占用大量CPU，因此我们实现了一种缓存，其中每个节点在其画布上绘制(未链接到DOM)，每个缩放级别一次.然后将这些画布绘制在节点位置的主画布上(链接到DOM).

We are working on a visualization web application which use d3-force to draw a network on a canvas. As each node contains a lot of information and as it was CPU intensive to redraw everything for each frame, we implemented a sort of cache where each node is drawn on its canvas (not linked to the DOM), once for each zoom level. Those canvases are then drawn on the main canvas (linked to the DOM) at the position of the node.

我们对速度提高感到满意，即使现​​在的结果是占用大量内存(尤其是在hidpi显示器(视网膜)上，其中像素密度可以是2或3).

We are happy with the speed gain, even if the result is now memory intensive (especially on hidpi displays (retina), where pixel density can be 2 or 3).

但是现在我们在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, ...

要添加一些信息，我尝试了其他浏览器. Safari 12在macOS上也存在相同的问题，即使限制更高(如Webkit资料中所述，是计算机内存的1/4).我也尝试了最新的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)

这篇关于画布总内存使用量超过了最大限制(Safari 12)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！