<tfoot id='L1TfF'></tfoot>

    <legend id='L1TfF'><style id='L1TfF'><dir id='L1TfF'><q id='L1TfF'></q></dir></style></legend>

    <small id='L1TfF'></small><noframes id='L1TfF'>

      • <bdo id='L1TfF'></bdo><ul id='L1TfF'></ul>
    1. <i id='L1TfF'><tr id='L1TfF'><dt id='L1TfF'><q id='L1TfF'><span id='L1TfF'><b id='L1TfF'><form id='L1TfF'><ins id='L1TfF'></ins><ul id='L1TfF'></ul><sub id='L1TfF'></sub></form><legend id='L1TfF'></legend><bdo id='L1TfF'><pre id='L1TfF'><center id='L1TfF'></center></pre></bdo></b><th id='L1TfF'></th></span></q></dt></tr></i><div id='L1TfF'><tfoot id='L1TfF'></tfoot><dl id='L1TfF'><fieldset id='L1TfF'></fieldset></dl></div>

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

        时间:2023-06-20
        <legend id='gK6uq'><style id='gK6uq'><dir id='gK6uq'><q id='gK6uq'></q></dir></style></legend>

        <tfoot id='gK6uq'></tfoot>
              <bdo id='gK6uq'></bdo><ul id='gK6uq'></ul>

              • <i id='gK6uq'><tr id='gK6uq'><dt id='gK6uq'><q id='gK6uq'><span id='gK6uq'><b id='gK6uq'><form id='gK6uq'><ins id='gK6uq'></ins><ul id='gK6uq'></ul><sub id='gK6uq'></sub></form><legend id='gK6uq'></legend><bdo id='gK6uq'><pre id='gK6uq'><center id='gK6uq'></center></pre></bdo></b><th id='gK6uq'></th></span></q></dt></tr></i><div id='gK6uq'><tfoot id='gK6uq'></tfoot><dl id='gK6uq'><fieldset id='gK6uq'></fieldset></dl></div>
                  <tbody id='gK6uq'></tbody>

                  <small id='gK6uq'></small><noframes id='gK6uq'>

                  本文介绍了总画布内存使用超过最大限制 (Safari 12)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

                  问题描述

                  我们正在开发一个可视化网络应用程序,它使用 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)
                  

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

                  上一篇:具有 HTML5 画布的更高 DPI 图形 下一篇:为什么 box-sizing 不适用于画布元素上的宽度/高度属性?

                  相关文章

                  1. <small id='vZYz7'></small><noframes id='vZYz7'>

                    • <bdo id='vZYz7'></bdo><ul id='vZYz7'></ul>
                    <tfoot id='vZYz7'></tfoot>
                  2. <legend id='vZYz7'><style id='vZYz7'><dir id='vZYz7'><q id='vZYz7'></q></dir></style></legend>
                    1. <i id='vZYz7'><tr id='vZYz7'><dt id='vZYz7'><q id='vZYz7'><span id='vZYz7'><b id='vZYz7'><form id='vZYz7'><ins id='vZYz7'></ins><ul id='vZYz7'></ul><sub id='vZYz7'></sub></form><legend id='vZYz7'></legend><bdo id='vZYz7'><pre id='vZYz7'><center id='vZYz7'></center></pre></bdo></b><th id='vZYz7'></th></span></q></dt></tr></i><div id='vZYz7'><tfoot id='vZYz7'></tfoot><dl id='vZYz7'><fieldset id='vZYz7'></fieldset></dl></div>