Отрендерить большую HTML страницу

391

23 августа 2017, 15:26

Есть следующий код, который должен создавать 16млн элементов (в данном случае только 4к, нужно 16*16*16 заменить на 16*16*16*16*16*16). И после 5млн где то хром сьедает всю оперативку и все. Здесь где то утечка? Что делать?

const body = document.querySelector('body'); 
 
for (let i = 0, l = 16*16*16; i < l; i++) { 
    const el = document.createElement('div'); 
    el.style.backgroundColor = '#' + addZero(6, i.toString(16)); 
    body.appendChild(el); 
} 
 
function addZero(digits_length, source){ 
    while(source.length < digits_length) 
        source = '0' + source; 
    return source; 
}

body { 
            display: flex; 
            flex-wrap: wrap; 
            margin: 0; 
            padding: 0; 
        } 
        div { 
            width: 1px; 
            height: 1px; 
        }

Answer 1

Я думаю это не утечка памяти, а она просто вся занимается. Ваш код без рендеринга обрабатывается ~ за 8 секунд, вес всего html > 700мб, на отрисовке такого кончаются все ресурсы и браузер либо виснет либо грохает вкладку. В примере нехватает еще одного *16, превышается лимит на размер string.

var start = Date.now(); 
 
const body = document.querySelector('body'); 
const target = 16*16*16*16*16; 
 
var elms = ''; 
 
for (let i = 0, l = target; i < l; i++) { 
  elms += '<div style="background-color:#'+addZero(6, i.toString(16))+'"></div>'; 
} 
 
//body.innerHTML = elms; 
 
function addZero(digits_length, source) { 
  while (source.length < digits_length) 
    source = '0' + source; 
  return source; 
} 
 
console.log(Date.now() - start); 
console.log(elms.length/1024);

body { 
  display: flex; 
  flex-wrap: wrap; 
  margin: 0; 
  padding: 0; 
} 
 
div { 
  width: 1px; 
  height: 1px; 
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Сортировка блоков по возрастанию

Есть обычный список liКаждый задан с определенной высотой

323

HTML

Двойное нажатие на кнопку в safari

Суть проблемы, если заходить через браузер safari(телефон), на сайте в меню нужно нажимать 2 раза на категорию/подкатегорию, что б открыть ее, на всех...

310

HTML

Не работают php-вставки в html и javascript

У меня не работают вставки php 70 типа <div><?=$myText;?></div> и в скриптах :

337

HTML

Отчет в HTML используя c++

Самhtml создаю как текстовый файл, разобрался тут

267