Question

由JS和jQuery中的相同实现编写。随后对DOM的后续操作实际上是相同的，然而，第一次操作更多是为什么？

// ES5

// отправка сообщения
function sendMessage(){

  var timerName;
  console.time(timerName);

  var nameUser = 'Максим';
  var currentDate = new Date(); 
  var el = document.querySelector('.send-text');
  var dateTime = currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();
  var data = el.value.replace(/\n/g, "<br>"); el.value = "";

  // записываем новый DOM
  document.querySelector('.col-message-list').innerHTML +=   
    '<div class="message-user">' + 
      '<span class="messege-remove label error outline">Удалить</span>' +
      '<p class="name"><samp>' + nameUser + '</samp><span class="time">' + dateTime + '</span></p>' +
      '<div>' +
        data +
      '</div>' +
    '</div>';

  // необходимо повесить событие удаления сообщения, когда добавили новый элемент
  var message = document.querySelectorAll('.messege-remove');
  Array.from(message).forEach(function(el) {
      el.addEventListener('click', function(event) {
         event.target.parentNode.remove();
      });
  });

  console.timeEnd(timerName);
}

// событие клика по кнопке отправки сообщения
document.querySelector('.send-button').addEventListener("click", sendMessage); 
document.querySelector('.send-text').addEventListener('keydown', function(e) {
    if (e.ctrlKey && e.keyCode === 13) sendMessage();
});

jQuery source

// ES6+
'use strict';

// отправка сообщения
function sendMessage(){

  let timerName;
  console.time(timerName);

  // получаем текст из textarea
  let nameUser = 'Максим';
  let el = $('.send-text');
  let data = el.val().replace(/\n/g, "<br>"); el.val('');
  let currentDate = new Date(); 
  let dateTime = currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();

  // записываем новый DOM
  $('.col-message-list').append(` 
    <div class="message-user">
      <span class="messege-remove label error outline">Удалить</span>
      <p class="name"><samp>${nameUser}</samp><span class="time">${dateTime}</span></p>
      <div>
        ${data}
      </div>
    </div>
  `);

  // необходимо повесить событие удаления сообщения, когда добавили новый элемент
  $('.messege-remove').unbind('click').on('click', e => e.target.parentNode.remove());

  console.timeEnd(timerName);
}

// событие клика по кнопке отправки сообщения
$('.send-button').on('click', sendMessage);
$('.send-text').on('keydown', e => { if (e.ctrlKey && e.keyCode == 13) sendMessage(); });

然而，当我成为自己时，在纯JavaScript代码中添加更多数量的消息，对于大量DOM元素，开始工作更糟糕

Answer 1

只是将这篇文章用作占位符，以便对上述内容进行优化。

<强> JQuery的

我能够通过使用委托事件而不是bind / unbind来削减初始和后续“sendMessage（）”执行运行时的1/3：

$('.col-message-list').on('click', '.messege-remove', e => e.target.parentNode.remove());

在“sendMessage”函数之外添加上述内容，并从“sendMessage”函数中删除bind / unbind方法。

能够通过欺骗一点并使用“requestAnimationFrame”来削减初始和后续运行时的另外2 / 3rds。 JS Fiddle

注意到触发“sendMessage”的“click”事件的运行速度比“keydown”上的组合键触发快5倍，

为什么DOM的第一次操作比其他操作长得多？

1 个答案: