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

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

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

const titleList = document.querySelectorAll('.сatalog .с_title'); // Теги куда нужно вставить title
const dataList = 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;
       dataList[i].textContent = result[i].data;
}

Но он сильно долго грузится(нужно практически сразу чтобы отображалось, но грузится около секунды)

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

P.S. titleList и dataList одинаковое количество