Это нормально так вставлять разметку?

Question

[ilanagrk]

На сколько правильно так вставлять разметку?

...
    res.map(function(name) {
                $('.table tbody').append(
                  `<tr>
                        <th><img src="${name.photo}" alt="" class="img-fluid"></th>
                        <td>
                            <p>${name.name}</p>
                        </td>
                        <td>${name.age} years old</td>
                        <td>${name.adress}</td>
                    </tr>
...
}

Я так понимаю, что если пару тегов вставить, то нарм, а если много разметки и данных приходит 20х?

Comments

[Александр]

да. для этого и ввели

Answer 1

[Константин Китманов]

Ну вообще не очень.

// вставим весь html разом чтобы не дергать reflow и repaint на каждый чих
const tableContent = res.map((name) => {
  return `
    <tr>
      <th>
        <img src="${name.photo}" alt="${name.name}" class="img-fluid"/>
        <!-- ай-яй-яй, img с пустым alt --> 
      </th>
      <td>
          <p>${name.name}</p>
      </td>
      <td>${name.age} years old</td>
      <td>${name.adress}</td>
  </tr>`;
}).join('');
$('table tbody').append(tableContent);

// давать браузеру время закончить отрисовку предыдущего куска прежде чем вставлять новый
// анимации будут работать и интерфейс реагировать на ввод пользователя
res.map((name) => {
  const row = `
    <tr>
      <th><img src="${name.photo}" alt="${name.name}" class="img-fluid"/></th>
      <td>
          <p>${name.name}</p>
      </td>
      <td>${name.age} years old</td>
      <td>${name.adress}</td>
  </tr>`;

  requestAnimationFrame(() => {
    $('table tbody').append(row);
  })
});

Если я правильно понял и у вас всего 20 строк, то, наверное, пофиг.