Браузер не может отрисовать очень большую таблицу. А нужно. Что делать?

Question

[Андрей Сверлин]

Здравствуйте.
Помогите пожалуйста. Есть необходимость разместить на странице таблицу 1200х1200 ячеек. Естественно для её создания я использую скрипт. Вот он:

<script type="text/javascript">
	$(document).ready(function() {
		for(var r = 0; r < 1201; r++){		
			$('table#coords').append('<tr>');			
			for(var d = 0; d < 1200; d++){$('table#coords tr:nth-child('+r+')').append('<td></td>');}			
			$('table#coords').append('</tr>');	
		}
	})
</script>

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

Вопрос такой, может я прошу слишком многого? И браузеры просто не в силах справиться с такой задачей? Хотя вроде ж в 21м веке живём.

Или может я что-то не правильно делаю? Если у вас есть решение, буду очень признателен за помощь.

P.S. Браузеры пробовал разные (все популярные) - результат один и тот же (т.е. никакой).

Answer 1

[Сергей delphinpro]

Вы на каждое добавление ячейки обновляете весь DOM/
Собирайте таблицу в виде строки, потом вставляйте ее целиком. или используйте DocumentFragment
Здесь подробнее https://learn.javascript.ru/multi-insert


UPD

Comments

[Андрей Сверлин]

Спасибо. Сейчас буду ковырять в эту сторону

[Дмитрий]

DOM обновляется один раз в конце завершения кода. Просто миллион ячеек действительно слишком много для браузера.

[Дмитрий]

Со вставкой строки можете поэкспериментировать с

function doIt(count) {
   var arr = [];
   for(var i = 0; i < count; i++)  {
      var row = [];
      arr.push(row);
      for(var j = 0; j < count; j++) {
         row.push(j);
      }
   }
   
   var html = arr.map(row=>'<tr><td>' + row.join('</td><td>') + '</td></tr>').join('');
   
   tbl.innerHTML = html;
}

doIt(count);

те же жуткие тормоза. Естественно на этапе вставки, строка в 17 миллионов символов собирается моментально.

[Дмитрий]

Андрей Сверлин, Не стоит, ковыряйте в сторону подгрузки данных при скроллинге

[Сергей delphinpro]

dimoff66, Да, вы правы. на таком количестве ячеек захлебывается даже готовая разметка. Про js и говорить нечего.

[Андрей Сверлин]

dimoff66, так а что подгружать при скролле, если таблица не создана?

[Дмитрий]

Андрей Сверлин, Создавайте только видимую часть + например 10 колонок, при прокрутке вправо добавляйте интерактивно. То же самое со строками.
Если очень много прокручено-добавлено - удаляйте колонки и строки с начала.

А все данные держите в массиве в js.

[Андрей Сверлин]

dimoff66, всё усложняется тем, что таблица повёрнута на 45 градусов... кошмар )

[Сергей delphinpro]

Андрей Сверлин, Хоть намекните, зачем такая большая таблица.
Ее реально необходимо в DOM отрисовывать?
Я к тому, что может быть на Canvas отрисовать, если там что-то типа схемы или карты...

[Андрей Сверлин]

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

Как Вы уже наверное догадались, я делаю карту. Она состоит из 30401-го изображения. И было бы замечательно сделать подгрузку и для этих изображений. А то сейчас они все грузятся разом, что естественно очень долго. Весит всё это дело порядка двух гигабайт.

[Андрей Сверлин]

Сергей delphinpro, да, это карта. Из игры )))
Я написал кликер, который за ночь нафигачил мне 30к скриншотов, затем нужно было всё это склеить. Программы для склейки панорам не подходили. И я решил написать скрипт, который бы размещал эти скриншоты в нужном порядке. Всё как бы норм, не считая конского размера всего этого дела.
И раз я всё это сделал в формате web-страницы, то было бы неплохо добавить туда ещё и навигацию, подумал я. Для этого мне нужны ячейки с координатами...

[Сергей delphinpro]

Андрей Сверлин, Все-таки карта.

Карту лучше наверное рисовать на канве. Но можно и элементами. В любом случае общий принцип будет примерно одинаковый.

Карта делится на тайлы, допустим квадраты 10*10 игровых полей (ячеек). При загрузке проверяется размер области просмотра и определяется сколько тайлов вмещается первоначально. Пусть 3*2. Загружаем эти шесть тайлов по 10*10=100 ячеек в каждом, и сразу же загружаем окружающие тайлы (вокруг этого прямоугольника), получается область 5*4 тайла.
По мере прокрутки карты в определенном направлении подгружаем тайлы, попадающие в область видимости. И выгружая ненужные.
Примерно так работают все картографические сервисы, и все знакомые мне игры.

[Андрей Сверлин]

Сергей delphinpro, ну как бы вот оно - lss.format23.ru (чтобы посмотреть надо будет немного подождать ))

[Андрей Сверлин]

Сергей delphinpro, а Вы не могли бы подсказать как можно реализовать эту подгрузку. Просто моих знаний для этого определённо будет недостаточно. Или хотя бы где найти информацию по этой теме. Просто гугл выдаёт результаты чисто для ленивой загрузки стандартных страниц блогов и тому подобное. А тут-то случай явно нестандартный. Перемещение происходит в двух плоскостях.

И так же вопрос про добавление всех этих элементов. Я там использовал почти такой же механизм как и с таблицей. Но возможно он не самый оптимальный. Вот код добавления картинок с заданным смещением:

var coordX = 0,
			coordY = 30300,
			image = '0000';
		

		for(var i = 0; i < 30400; i++){			
			
			image = parseInt(image.replace(/\D+/g,"")); // переводим строку в число, чтобы отобросить лишние нули
			image = image.toString();					// переводим число в строку, чтобы посчитать коёёличество оставшихся символов.
			var len = image.length;		                // считаем количество символов
			
			if (len == 1) {image = '000'+image;}
			if (len == 2) {image = '00'+image;}
			if (len == 3) {image = '0'+image;}
			
			if (i % 301 == 0){
				coordX = 0+600*(i/301);
				coordY = 30300-300*(i/301);
			}
			
			$('body').append('<img src="screens/Image_'+image+'.jpg" style="left: '+coordX+'px; top: '+coordY+'px;">');
			coordX = coordX+200;
			coordY = coordY+100;
			
			
			
			image = parseInt(image.replace(/\D+/g,"")); // переводим строку в число, чтобы можно было прибавить единицу
			image = image+1;                            // +1
			image = image.toString();					// переводим число в строку, чтобы подготовить к следующему циклу

		}

[Дмитрий]

а Вы не могли бы подсказать как можно реализовать эту подгрузку.

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

и уж простите за навязчивость

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

[Андрей Сверлин]

dimoff66,

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

Спасибо что вы так написали. ) Я просто немного смущаюсь. Каждый раз боюсь, что мою просьбу о помощи сочтут наглостью, а меня посчитают лентяем, который "не умеет пользоваться гуглом".

Опубликовал пример в ответах, посмотрите пожалуйста.

Посмотрел. Опять-таки благодарю за то что Вы потратили своё время, чтобы помочь мне. Но я вчера так и не мог успокоиться, не решив эту задачу. Я не ел и не спал сутки )), хотелось победить её и успокоиться ))) Я перепробовал множество вариантов, но в результате всех этих мук я пришёл к тому, что таблица в любом её исполнении сильно тормозит без того тяжёлую страницу. Там ведь ещё цикл на добавление 30401 скриншота написан, он сам по себе долгий.

В определённый момент я переключился на другую важную проблему - загрузку только видимых скриншотов, чтобы не грузить на страницу все 2Гб изображений. И несколько часов спустя, мне это вроде бы удалось. Посмотрите пожалуйста пример в действии - lss.format23.ru - теперь он не такой тяжёлый ))

Однако, я подозреваю, что скрипт написанный мной далёк от идеала. Так, для определения видимой области происходит проверка по всем объектам, а их реально много. В результате страница может и грузится быстрее, но работает медленнее. Навигация по карте перетаскиванием стала затруднительным занятием (я использовал для этих целей плагин dragscroll.js). Но самое фиговое, что теперь страница перестала грузиться с мобильных устройств.

Могу ли я попросить Вас посмотреть на мой код и подсказать, может его можно как-то оптимизировать?

$(document).ready(function() {

	// код добавления изображений
	var coordX = 0,             // устанавливаем позицию для первого скрина (отступ слева)
		coordY = 30300,         // отступ сверху
		image = '0000',         // имя первого изображения		
		gamecorX = 0,           // переменные для добавления к изображениям игровых координат (в атрибут title)
		gamecorY = 1212,  		
		map = $('<div/>');      // создаём div для добавления в него всех элементов

		map.addClass('map');    // добавляем ему класс, чтобы он не был безымянным


	// запускаем цикл для перебора всех изображений
	for(var i = 0; i < 30400; i++){					
		// так как имена файлов у нас в формате Image_0000 придётся заморочиться с ними
		image = parseInt(image.replace(/\D+/g,"")); // переводим строку в число, чтобы отбросить лишние нули
		image = image.toString();					// переводим число в строку, чтобы посчитать количество оставшихся символов.
		var len = image.length;		                // считаем количество символов

		if (len == 1) {image = '000'+image;}
		if (len == 2) {image = '00'+image;}
		if (len == 3) {image = '0'+image;}

		// реализуем переход на следующий ряд (в одном ряду должно быть 301 изображение)
		if (i % 301 == 0){
			coordX = 0+600*(i/301);
			coordY = 30300-300*(i/301);	
			gamecorY = gamecorY-12;	
			gamecorX = 0;
		}

		// добавляем изображение в div.map 
		map.append('<img data-src="screens/Image_'+image+'.jpg" style="left: '+coordX+'px; top: '+coordY+'px;" alt="Please wait. I\'m will load soon. ;)" title="'+gamecorX+' : '+gamecorY+'">');
		coordX = coordX+200;    // задаём смещение по оси Х
		coordY = coordY+100;    // по оси Y
		gamecorX = gamecorX+4;  // изменяем игровые координаты для title			

		// снова заморачиваемся с именем файла
		image = parseInt(image.replace(/\D+/g,"")); // переводим строку в число, чтобы можно было прибавить единицу
		image = image+1;                            // +1
		image = image.toString();					// переводим число в строку, чтобы подготовить к следующему циклу
	}

	$('body').append(map); // добавляем наш блок с картинками в body
});


// определяем область видимости
$(document).scroll(function() {
	function inWindow(s){
		var scrollTop = $(window).scrollTop();
		var scrollLeft = $(window).scrollLeft();
		var windowHeight = $(window).height();
		var windowWidth = $(window).width();
		var currentEls = $(s);
		var result = [];

		currentEls.each(function(){			
			var el = $(this);
			var offset = el.offset();				
			if (scrollTop-1000 <= offset.top && (el.height() + offset.top) < (scrollTop + windowHeight+1000) && scrollLeft-1000 <= offset.left && (el.width() + offset.left) < (scrollLeft + windowWidth+1000)) result.push(this);
		});
		return $(result);
	}		
	var boxesInWindow = inWindow("img"); 

	// меняем атрибут data-src у всех видимых изображений
	var imgEl = boxesInWindow;
	for (var i=0; i<imgEl.length; i++) {
		if(imgEl[i].getAttribute('data-src')) {
		   imgEl[i].setAttribute('src',imgEl[i].getAttribute('data-src'));
		   imgEl[i].removeAttribute('data-src');
		}
	}
});

Кстати, возвращаясь к координатам, уже под утро меня осенило, что таблица там эта и вовсе не нужна. Вполне достаточно выводить координаты на которых были сделаны эти скриншоты. Реализовал я это за пять минут просто дописав атрибут title к каждому изображению.

[Сергей delphinpro]

Андрей Сверлин, Работайте с данными. Не создавайте 30к img — создайте массив данных на 30к элементов

[{
  src: '',
  coords: {x:1, y:1}
}, {
  src: '',
  coords: {x:1, y:1}
},
 // …
]

Картинок создайте столько, сколько их помещается во вьюпорт (только видимые). При смещении карты добавляйте картинки и удаляйте скрывающиеся.

[Андрей Сверлин]

Сергей delphinpro, спасибо за совет. Но для меня это что-то новое в JS. Я к тому что раньше я писал только что-то, что нужно для элементарной вёрстки сайтов. Ну там корзину заказов мог сделать, калькулятор собрать, такое всё. А вот массивы данных, определения вьюпорта и т.д. - это для меня пока тяжело.

Не могли бы Вы написать Ваш пример, чтобы он был применим к моей ситуации как есть?
Я обещаю во всём разобраться и изучить вопрос. Но блин, карта эта нужна уже завтра. )) В выходные сражения. А я её делал как раз для разведки )))

[Сергей delphinpro]

Андрей Сверлин, Мог бы, почему нет. Ничего сложного https://codepen.io/anon/pen/JewGPE?editors=0011

[Дмитрий]

Кстати, возвращаясь к координатам, уже под утро меня осенило, что таблица там эта и вовсе не нужна. Вполне достаточно выводить координаты на которых были сделаны эти скриншоты.

Да, можно задать блок фиксированного размера, при прокрутке проверять scrollTop и scrollWidth и подгружать по необходимости картинки. Но все равно это может тормозить, если подгрузится много картинок, лучше все-таки отображать только видимую часть.

И по поводу кода: с image вы немного перемудрили, не принципиально, но все же на будущее:

imageNum = 0;
for(var i = 0; i < N; i++) {
    imageNum++;
    imageStr = ('0000' + imageNum).substr(-4);
}

и все, никаких переводов в строку и обратно

[Андрей Сверлин]

Сергей delphinpro,
Это офигенно! Спасибо огромное! Код по большей части мне не очень понятен, но то как он работает впечатляет. Всё грузится моментально и не тупит при перетаскивании. Супер! Я сначала очень обрадовался, потом обрадовался чуть меньше.

Сначала заметил, что добавляемые элементы накладываются сверху тех, чтобы были загруженны до этого, т.е. имеют бОльший z-index. А это как бы не очень прикольно, потому что скриншоты делались из расчёта, что правая часть с иконками будет перекрываться следующим слоем. Немного поковыряв Ваш код, я смог это поправить так:

images.forEach(image => {
			let key = makeKey(image);
			if (!imgs[key]) {
			  const img = document.createElement('img');
			  loader.show();
			  img.classList.add('tile');
			  img.style.left = image.x + 'px';
			  img.style.top = image.y + 'px';
			  
			  img.onload = () => loader.hide();
			  img.src = imagesPath + imagePrefix + image.src;

			  // устанавливаем правильный z-index для каждой картинки
			  var zindex = img.src.substring(35);
			  zindex = parseInt(zindex.replace(/\D+/g,"")); 
			  img.style.zIndex = zindex;	  
				
			  imgs[key] = img;
			  tiles.appendChild(img);
			  statCounter++;
			}
		  });

Следующим моментом, который меня немного расстроил было то, что страница не двигается на мобильном. Там перемещение не работает совсем. Опять таки поковырявшись, я понял, что виной тому "overflow: hidden;" у блока #map. Поменял на scroll - заработало перемещение на мобильном.

Ну а сейчас я залип на проблеме, которую сам решить я вряд ли смогу. Дело в том, что карта рисуется не полностью (( Точнее может и полностью, но очень странным образом. Куски карты отрисовываются в разных местах, не там, где они должны быть.

Вот как эта карта должна выглядеть в этом месте

Вот тут я понимаю, что я бессилен, и как это исправить я понятия не имею, поэтому рискну попросить у Вас помощи ещё раз.

Здесь реализован Ваш код - lss.format23.ru
А здесь мой код (который медленный) - lss.format23.ru/state92.php - но тут можно увидеть как должна выглядеть карта эта.

И еще момент. Я не смог реализовать добавление атрибута title с игровыми координатами. Там вроде бы не сложно должно быть, но я заметил, что скрины не реагируют на наведение из-за "pointer-events: none;". Понимаю, что это нужно для навигации перетаскиванием, но подсветка координат скриншота тоже как бы нужна. Нет ли способа совместить все эти приятности?

[Сергей delphinpro]

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

Сами тайтлы добавить вроде несложно, проблема видимо в pointer-events. Тут фигня в том, что картинки начинают перетаскиваться дефолтным механизмом браузера. Можно отключить pointer-events, картинк заменить на дивы с бэкграундом. Проблема решена.

с z-index проблему вроде решили, но можно наверное просто ставить в качестве его значения imageIndex.

[Сергей delphinpro]

по поводу косяков с неправильным отображением я тоже заметил

Заметил, когда писал код удаления скрытых частей. Изначально индексом выступали просто имена картинок xxxx.jpg/ Но оказалось, что картинка с одним и тем же именем по вашей формуле может иметь разные координаты (т.е. располагается в двух местах). И у меня всегда карта очищалась при начале перетаскивания.
Не знаю, может я накосячил, может недопонял ваш код.

[Андрей Сверлин]

Сергей delphinpro,

Заметил, когда писал код удаления скрытых частей. Изначально индексом выступали просто имена картинок xxxx.jpg/ Но оказалось, что картинка с одним и тем же именем по вашей формуле может иметь разные координаты (т.е. располагается в двух местах).

Такого по идее быть не должно. Я имею в виду, что одной картинки в двух местах быть не должно.
Карта представляет из себя ромб. Скриншоты идут ряд за рядом, начиная с самого правого угла. Там находится файл Image_0000.jpg. Его координаты 0х30300 - это левая сторона середины всей карты по вертикали. Каждый следующий скрин смещается на 200px вправо и на 100px вниз. Получается диагональный ряд слева-вниз, величиной в 301 скриншот. Затем начинается следующий ряд, его первая картинка располагается над самым первым скрином со смещением +600pх вправо и -300px вверх. И так ряд за рядом. Рядов получилось 101... Таким образом, первый скрин последнего ряда располагается по центру в самом верху страницы.

Т.е. повторяющихся файлов там не планировалось.

[Андрей Сверлин]

Сергей delphinpro, Я просто реально не осилю Ваш код. Он для меня почти как китайский.)))
В хорошем смысле ))

[Андрей Сверлин]

Сергей delphinpro, Я себя недооценивал ))) Точнее своё упорство. ))
Я всё таки одолел Ваш код и смог исправить все описанные нюансы! Я счастлив как слон. ))))

Карта рисовалась не правильными кусками потому что количество скриншотов было ограничено именами содержащими только четыре цифры. За это отвечала вот эта строчка:
const leadingZero = n => ('0000' + n).substr(-4);
Т.е. мы не могли получить имя файла больше 9999. А их там 30400.
Я вернул в код свои манипуляции с нулями и все заработало! )))

for (let imageIndex = 0; imageIndex < 30400; imageIndex++) {
	image = parseInt(image.replace(/\D+/g,"")); // переводим строку в число, чтобы отобросить лишние нули
	image = image.toString();					// переводим число в строку, чтобы посчитать количество оставшихся символов.
	var len = image.length;		                // считаем количество символов

	if (len == 1) {image = '000'+image;}
	if (len == 2) {image = '00'+image;}
	if (len == 3) {image = '0'+image;}

	if (imageIndex % 301 == 0) {
	  coordX = 0 + 600 * (imageIndex / 301);
	  coordY = 30300 - 300 * (imageIndex / 301);	
	}

	data.push({
	  src: image + '.jpg',
	  x: coordX,
	  y: coordY
	});

	coordX += 200;
	coordY += 100;

	maxX = Math.max(maxX, coordX);
	maxY = Math.max(maxY, coordY);

	image = parseInt(image.replace(/\D+/g,"")); // переводим строку в число, чтобы можно было прибавить единицу
	image = image+1;                            // +1
	image = image.toString();					// переводим число в строку, чтобы подготовить к следующему циклу 
}

Единственное, что я не смог сделать, это добавить игровые координаты gamecorX и gamecorY в атрибут title каждого блока. Но я поменял img на div, как Вы посоветовали, что позволило включить pointer-events. И это обеспечило отображение координат. Их теперь просто видно на самом скриншоте (блок при наведении меняет z-index и становится виден полностью, чтобы эти координаты можно было рассмотреть на самой кратинке).

Сергей delphinpro, огромное Вам человеческое СПАСИБО!!! Я невероятно счастлив!

[Сергей delphinpro]

Андрей Сверлин, Так вот где собака зарыта =) Первые 10 тыс файлов картинок проименованы с ведущими нулями.

Нужно было добавить условие в функцию получения имени картинки

const leadingZero = n => n>999 ? n : ('0000' + n).substr(-4);

[Андрей Сверлин]

Сергей delphinpro, добавил условие, которые Вы написали, убрал свои костыли с нулями - всё работает.
Ещё раз спасибо Вам большое! Вы просто волшебник!

Answer 2

[Hedy]

Вы пытаетесь отрисовать минимум 1200х1200 = 1 440 000 элементов - логично, что ни один браузер этого вам с приемлемым комфортом не сделает.

Вам нужно реализовать виртуальный скроллинг для ваших данных, т.е. отображать только видимую область вашей таблицы, а при скроллинге - перерисовывать ее.

Answer 3

[Алексей Скобкин]

Я, конечно, ОЧЕНЬ ПЛОХО разбираюсь во фронтенде и JS, но у меня есть предположение, что если вы не будете каждую из полутора миллионов ячеек пихать в живой DOM в каждой итерации цикла, то браузеру уже немного полегчает.
Не говоря о том, что jQuery для этой задачи не просто не нужна, но скорее всего прилично её замедляет.
Но, конечно, лучше дождаться ответа нормального фронтендера.

Comments

[Дмитрий]

"если вы не будете каждую из полутора миллионов ячеек пихать в живой DOM в каждой итерации цикла, то браузеру уже немного полегчает."

Не очень сильно полегчает. Все трудозатратные операции с деревом все равно совершаются по окончании работы скрипта.

Answer 4

[Дмитрий]

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