Нtml2canvas ест память, что делать?

Question

[Диман Суворкин]

На сайте создается множество скринов экрана (долго объяснять, зачем) при помощи библиотеки htmlcanvas. Она с каждым скрином все больше и больше ест памяти. Утечки памяти в моем коде исключены, менял на пустой промисс - норм.

Вот код:

userLayout.querySelectorAll('.owl-item').forEach(function (item, i, arr) {
	var helpScreenBlock = document.createElement('div');
	helpScreenBlock.className = 'help-screen-block';
	helpScreenBlock.innerHTML = item.outerHTML;
	document.body.appendChild(helpScreenBlock);

	helpScreenBlock.querySelectorAll('.image-in-layout-slider img').forEach(function (item1, i1, arr1) {
		var imageIdBlock = document.createElement('div');
		imageIdBlock.className = 'image-inserted-id-block';
		imageIdBlock.innerHTML = parseInt(item1.getAttribute('data-file'));

		item1.closest('.slider__empty-block').appendChild(imageIdBlock);
	});

	html2canvas(helpScreenBlock).then(function (canvas) {
		var help = {};
		help.page = helpScreenBlock.querySelector('.slider-img-cont img').getAttribute('data-page');

		help.image = canvas.toDataURL('image/jpeg').replace('data:image/jpeg;base64,', '');
		images.push(help);
		help = null;
		canvas = null;
		$(helpScreenBlock).remove();
		helpScreenBlock = null;

		if (images.length === arr.length) {
			$.post(cabinetAjax.url, {
				'action': 'saveOrderImagesForPages',
				'images': JSON.stringify(images),
				'user_id': user_id
			}, function (data) {
				// if (data.length > 0) {
				// 	//maskaShow(data);
				// }
				//window.onbeforeunload = null;
				images = null;
				slideRes('sss');
			});
		}
	});
});

Comments

[marataziat]

Алах его знает, может хоть код покажешь?

Answer 1

[Владимир Проскурин]

Пришел момент научиться пользоваться вкладками Performance и Memory в инструментах разработчика хрома. https://developers.google.com/web/tools/chrome-dev...
https://habr.com/company/yandex/blog/195198/

Comments

[Диман Суворкин]

Понял, что больше всего память ест GC roots (режим Containment), там Detached HTMLDocument больше всего. Как узнать, откуда они были вставлены?

Answer 2

[Павло Пономаренко]

Ставлю на то, что где-то кешируется canvas. Может можно уменьшить утечки очень сильно каким-то таким трюком? После того, как сделали и сохранили скриншот - уменьшаем канвас до крайне маленьких размеров

canvas.width = 1;
canvas.height = 1;
canvas = null;