@Kizzeon

Как производительно обновить текст тегов значениями переменных в цикле?

У меня есть N(иногда больше иногда меньше, но достаточно много) тегов, в каждый из них нужно вставить в определенные значения 2 связанных переменных title/data.

Я прописал такой код для того, что бы проходится по обьектам и вставлять их текст:

const titleList = document.querySelectorAll('.сatalog .с_title'); // Теги куда нужно вставить title
const priceList = document.querySelectorAll('.сatalog .c_data'); // Теги куда нужно вставить data
const result = [
{
  title: "title1",
  data: "data1"
},
{
  title: "title2",
  data: "data2"
}
...
]

for (i=0; i<result.length; i++){
       titleList[i].textContent = result[i].title;
       priceList[i].textContent = result[i].data;
}


Но он сильно долго грузится(нужно практически сразу чтобы отображалось, но грузится около секунды)
Какие есть производительные методы доставать из массива json обьектов обьект и вставлять их в соответствующее место в html файле?(или очистки, если пробовать insertAdjacentText())

P.S. titleList и priceList одинаковое количество
  • Вопрос задан
  • 93 просмотра
Пригласить эксперта
Ответы на вопрос 3
JaxAdam
@JaxAdam
Junior Full-Stack Developer
Объем данных велик в JSON файле?

Как способы оптимизации могу предложить следующее:
1) использовать пагинацию
2) запускать скрипт сразу после объявления html тегов (костыль)
Ответ написан
like-a-boss
@like-a-boss
Признайся,тебяТянетНаКодМужика,ты—программный гей
Единственное, чем существенно можно ускорить – это собрать весь необходимый html циклом вне DOM в виде строки и потом разово всё это вставить в DOM innerHTML'ом. Это будет в сто раз быстрее, по-другому никак.

Я не уверен, что у вас тормозит именно мутация DOM'а. Возможно, именно сам JSON долго грузится из-за своего объёма.
Ответ написан
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега JavaScript
Руководитель frontend направления, предприниматель
1. Пререндер (если позволяет используемый стек технологий)
2. Рендер в лице ЯП на стороне сервера. Скажем если идет обращение к API, то это может сделать спокойно как JS, так и ЯП перед тем, как отдать страницу. Правда если задержка может быть перенесена на сторону обработки ответ.
3. Если только JS и ни шагов в другие стороны, то посмотри в сторону intersectionObserver, он позволит отложить манипуляции с невидимой частью страницы (придется ушаманиться).

Но если задержка на этапе получения данных из файла\api, то вряд ли ты с этим что-то сделаешь.

ЗЫ: В целом конструкция «создам элементы, а потом запишу в них данные» выглядит не самым вменяемым образом. Я бы пересмотрел логику в таком случае.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы