Невозможно удалить элементы холста из памяти, которые созданы, но никогда не добавляются на страницу

Question

Я создаю элемент canvas следующим образом:

var canvas = document.createElement('canvas');

Я использую этот объект canvas, чтобы получить контекст, и оттуда использую информацию из контекста для дальнейшей логики.

var context = canvas.getContext('2d');

...

// More logic

Я никогда не добавляю элемент canvas к документу или любому другому элементу, но, используя safari devtools -> вкладку Canvas, я вижу, что элементы canvas постоянно создаются при каждом запуске этого кода. Они имеют размер около 200 КБ каждый, и могут быть сотни, тысячи этих элементов холста, созданных за один сеанс. Если страница перезагружается, они удаляются из памяти и больше не отображаются на вкладке холста.

Однако, если страница не перезагружается и холст создается, вы можете увидеть снижение производительности.

Итак, как я могу удалить эти элементы холста из памяти, если они никогда не добавлялись на страницу?

См. Ниже изображение вкладки холста (работает только в Safari как более новые версииChrome и Firefox не поддерживают его). Ожидается первый объект canvas, остальные я бы хотел удалить. Я использую JavaScript и JQuery.

Answer 1

Проблема возникает из-за самого canvas dev-tool .
Это единственный виновник, который будет хранить ссылки на эти элементы canvas и мешать сборщику мусора правильно выполнять свою работу.

В качестве доказательства попробуйте запустить следующий фрагмент кода, сначала с закрытыми инструментами разработчика, а затем с открытым на вкладке «холст».

var canvas, context;
for (let i=0; i<100; i++) {
  canvas = document.createElement( 'canvas' );
  canvas.width = canvas.height = 5000;
  context = canvas.getContext( '2d' );
}
console.log( 'done' );

Когда инструменты разработчика закрыты, он без проблем запускается в Safari.
Если открыть его после появления сообщения «выполнено», будет показано, что активен один холстстраницы.

Однако при открытых инструментах разработчика он будет заикаться, пока в консоли не появится какое-либо сообщение.

"[Предупреждение] Общее использование памяти холста превышает максимальный предел ..."

И на панели холста у нас будут все сгенерированные, прежде чем это сообщение появится, помеченные какactive.

---

Поэтому, чтобы избежать этого, избегайте создания большого количества холстов, пока этот инструмент открыт.