Как сделать webkit свободной контекстной памятью холста, когда холст уничтожен - PullRequest
Новая
       5

Как сделать webkit свободной контекстной памятью холста, когда холст уничтожен

3 голосов
/ 03 февраля 2011

Приведенный ниже код вызывает утечку памяти с довольно тревожной скоростью в веб-наборе (mobile safari & konqueror). Я понимаю, что тестовый пример можно переписать для повторного использования холста вместо создания нового, но мне интересно, почему нижеприведенное также не работает. Любое понимание будет оценено. 

<html>
<head>
<script>
function draw() { 
    var holder = document.getElementById("holder");
    holder.innerHTML = "<canvas id=cnv height=250 width=250>"; 
    var ctx = document.getElementById("cnv").getContext("2d");
    ctx.beginPath();
    ctx.moveTo(50,50);
    ctx.lineTo(Math.random()*100,Math.random()*100);
    ctx.stroke();
}

function start() {
    setInterval(draw, 100);
}
</script>
</head>
<body onload="start()">
<div id="holder"></div>
</body>
</html>

Ответы [ 2 ]

3 голосов
/ 03 февраля 2011

Эта проблема возникает в Webkit даже при изменении SRC изображения, поэтому я не удивляюсь, если это случится и при обработке canvas.

В Chrome была заполнена ошибка (из-за которой они заполняли ошибку в Webkit), и мы надеемся, что это будет исправлено в ближайшее время, так как многие расширения Chrome не будут использоваться.

ссылки http://code.google.com/p/chromium/issues/detail?id=36142 https://bugs.webkit.org/show_bug.cgi?id=23372

В любом случае, приведенные выше предложения должны смягчить это.

1 голос
/ 03 февраля 2011

Не

  • Создайте элемент <canvas> с .innerHTML
  • Создайте <canvas> в каждом интервале

У

  • использовать var cv = document.createElement('canvas'); cv.setAttribute('height', '250'); // ...
  • кэшируйте ссылку cv в некоторой точке инициализации и используйте ее снова! 
    <script>
            var holder = document.getElementById("holder"),
            var cv = document.createElement('canvas');
                cv.setAttribute('id', 'cnv');
                cv.setAttribute('height', '250');
                cv.setAttribute('width', '250');
                holder.appendChild(cv);

            function draw() {                     
                var ctx = cv.getContext("2d");
                ctx.beginPath();
                ctx.moveTo(50,50);
                ctx.lineTo(Math.random()*100,Math.random()*100);
                ctx.stroke();
            }

            function start() {
                setInterval(draw, 100);
            }
    </script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...