DOM обновления вроде профессионал

Привет! Это будет небольшая статья, но влияние на производительность на ваше приложение будет огромным. Я предполагаю, что вы младший разработчик, как я, который все еще учится и открывает новые вещи время от времени.

Вам дается задача получить некоторые данные по API и добавить их в DOM. У вас есть разные способы сделать это, но давайте пойдем с самым наивным подходом, который большинство из вас выберет.

Наивный подход

Это сделает работу! Выглядит хорошо. Ага? 👎 На самом деле, это не эффективный способ сделать это. Операции DOM являются тяжелыми, и каждое изменение, которое вы вносите, могут иметь побочные эффекты, которые требуют пересчитывания макета, стилей и т. Д.

  // 100 posts
  posts.forEach(post => {
    const li = document.createElement('li')
    li.textContent = post.title
    listing.appendChild(li)
  })

Прямо сейчас, если есть 100 сообщений, вы обновляете DOM 100 раз. Есть два способа оптимизировать это.

Не так Navie подход

const populateList = (posts) => {
  const listing = document.querySelector('#listing')
  let postsHTML = ''
  posts.forEach(post => {
    postsHTML += `
${ post.title }
`
  })
  listing.innerHTML = postsHTML
}

Ну, это один из способов сделать это Но это не то, о чем эта статья. 😜

Pro подход

Согласно моим нынешним знаниям.

Представляем DocumentFragment Анкет DocumentFragment является вне экрана DOM, который ведет себя как фактический DOM, но он спасает нас от дорогостоящего рефта (расчеты DOM).

Давайте перепидем наш код, используя DocumentFragment Анкет

const populateList = (posts) => {
  const listing = document.querySelector('#listing')
  const fragment = document.createDocumentFragment()
  posts.forEach(post => {
    const li = document.createElement('li')
    li.textContent = post.title
    fragment.appendChild(li)
  })
  listing.appendChild(fragment)
}

1. Вы создаете новый фрагмент используя Cenelecumentfragment Анкет
2. Добавьте свои элементы в фрагмент Анкет
3. Наконец, добавьте фрагмент к фактическому дому.

Вот и все! 👌

Я надеюсь, что вы что -то узнали, и это вам поможет. 🙏

Спасибо за чтение. 👋

Связаться со мной на LinkedIn или Twitter Анкет 🌏

Оригинал: “https://dev.to/thesanjeevsharma/dom-updates-like-a-pro-l17”