Улучшение JS l oop, которое сравнивает данные из массива

Question

Я работаю над проектом и у меня возникли проблемы с ограничением ресурсов.

Я получаю JSon, который содержит свойство с более чем 2,0 МБ строки, идея состоит в том, чтобы работать с этой строкой для того, чтобы представить его в таблице. Однако и в основном из-за своего размера, который браузер не может обработать, я должен уменьшить переменную bytesIndexTo, чтобы l oop работал.

// Fill an array with the available hexadecimal values for the left side of the table
let bytesIndexControl =  Array.from(Array(bytesIndexTo).keys()).map(i => 30 + i * 32);

var a = 1;
var hex = 1;

for (let i = bytesIndexFrom; i <= bytesIndexTo; i++) {

    // console.log(i + " - " + binary[i] + binary[a]);

    if (i === 0 )
        tableData = "<tr><th>0</th>";

    // Show hex value at the left side of the table
    if ( bytesIndexControl.includes(i - 2) ) {
        tableData += "<th>" + hex.toString(16)   + "</th>";
        hex++;
    }

    tableData += "<td>" + binary[i].toUpperCase() + binary[a].toUpperCase() + "</td>";

    if ( bytesIndexControl.includes(i) ) tableData += "</tr>";

    i++;
    a = a + 2;

}

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

Это текущий вывод

Endereço    00  01  02  03  04  05  06  07  08  09  0A  0B  0C  0D  0E  0F
0           DB  00  F2  F0  40  00  26  F0  08  00  84  00  72  FB  F6  F0
1           72  FB  F2  F0  40  00  42  F0  72  FB  9D  05  BE  88  E6  07
2           25  00  FA  00  D6  02  F2  02  00  FE  06  02  02  00  9A  88
(...)

Может быть, выполнение кода локально будет работать (Node.js)? Или есть способ улучшить это l oop?

Цель состоит в том, чтобы добавить этот вывод l oop в дерево DOM

Спасибо,

Answer 1

Проблема производительности в отношении строки неизменна в javascript.

Каждая операция + = создает копию строки и добавляет строку к этой копии.

И обратите внимание, что x += y аналогично x = x + y

let string = '1MB string' // now memory is filled with 1MB

string = string + '.' // same as +=, old string persisted, new created, now memory is filled with 2MB

for (let i = 0; i < 100; i++)
  string += '.'

// String length now is 1MB + 101 chars, memory is filled with > 100MB of previous versions of string, which will be garbage collected later.

Do вместо:

const array = []
// or
const array = new Array(length) // if you can determine length

for (let i = 0; i < 100; i++)
  array.push('string')

const result = array.join('') // and no memory problems

Тесты UPD показывают, что объединение происходит медленнее, поэтому это не обязательно. Может быть, с 2MB строкой соединение будет лучше

Answer 2

Спасибо за все ответы, я нашел, что это лучшее решение

var a = 1;
var hex = 1;

const array = [];
let index = 0;
let index2 = 0;

let indexX = 0;

for (let i = bytesIndexFrom; i <= bytesIndexTo; i++) {

            if (i === 0 ) 
                array.push("<tr>");

            // If index are different it's a different line
            if (index === index2 )  {
                array.push("<th>" + hex.toString(16) + "</th>");
                hex++;
                index2++;

                indexX = 0;
            }
            else
                indexX++;

            array.push("<td title='" + index2 + " - " + indexXarray[indexX] + "'>" + binary[i].toUpperCase() + binary[a].toUpperCase() + "</td>");

            if (i === bytesIndexControl[index] )  {
                array.push("</tr>");
                index++;
            }

            i++;
            a = a + 2;

}

Вместо использования arr.include (obj), поэтому для поиска значений внутри массива я добавил несколько индексов, чтобы подтвердите, если данные существуют и соответствуют значениям, код более подробный, но работает лучше.

Answer 3

Попробуйте зациклить один кусок за раз:

let bytesIndexTo = 1000; // This is just an arbitrary number
for (let i = 0; i < binary.length; i++) {
  for (let j = i; j <= i + bytesIndexTo && j < binary.length; j++) {
    ... // Run your code

    i = j;
  }
}

У меня нет достаточно большой строки, чтобы проверить, что это работает, но это должно сработать!

Редактировать:

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

до максимальной длины в байтах, умноженной на текущий номер страницы, на которой вы находитесь.

Пример:

let maxBytes = 1000;
let currentPage = 3;
let maxPage = Math.ceil(binary.length / maxBytes);

if (currentPage > maxPage) {
  currentPage = maxPage;
} else if (currentPage <= 0) {
  currentPage = 1;
}

for (let i = currentPage * maxBytes; i < (currentPage + 1) * maxBytes && i < binary.length; i++) {
    ... // Run your code
}

Теперь вы можете добавлять кнопки для добавления или вычитания номера текущей страницы.