快速与容器内的大量元素进行交互(DOM,javascript)

前端之家收集整理的这篇文章主要介绍了快速与容器内的大量元素进行交互(DOM,javascript)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我在容器div中有大量的div(4000-5000)[每个包含跨度,锚点,图像等],基本上我将它们的显示设置为none或基于条件阻止.这确实需要一些时间.

在我搜索更快的东西时,我遇到了这个页面https://developers.google.com/speed/articles/javascript-dom,解决方案是从DOM中删除容器div并通过getElementsByTagName迭代包含的元素.

/**
 * Remove an element and provide a function that inserts it into its original position
 * @param element {Element} The element to be temporarily removed
 * @return {Function} A function that inserts the element into its original position
 **/
function removeToInsertLater(element) {
  var parentNode = element.parentNode;
  var nextSibling = element.nextSibling;
  parentNode.removeChild(element);
  return function() {
    if (nextSibling) {
      parentNode.insertBefore(element,nextSibling);
    } else {
      parentNode.appendChild(element);
    }
  };
}


function updateAllAnchors(element,anchorClass) {
  var insertFunction = removeToInsertLater(element);
  var anchors = element.getElementsByTagName('a');
  for (var i = 0,length = anchors.length; i < length; i ++) {
    anchors[i].className = anchorClass;
  }
  insertFunction();
}

问题是我无法使用提供的解决方案,因为我需要通过其ID访问子元素,我不能这样做,因为元素已从DOM中删除.有没有办法实现这个目标?

我还尝试删除容器div并将其附加到文档片段,但是当它们位于documentfragment中时,仍然无法通过ID访问5000个元素

最后,我也试过这个:

document.getElementById("CONTAINERDIV").style.display = "none";

//iterate through the 5000 children divs and change their classname

document.getElementById("CONTAINERDIV").style.display = "block";

因为我希望它不会在每次迭代时触发回流,但这似乎并没有提供所需时间的改进.

有没有人对此有任何想法?

解决方法

显示无/块很贵.从我在交易网络平台上提高性能的日子开始,我推荐的一种技术,特别是对旧版浏览器而言,是使用相对位置并使用负左值将其从屏幕上拉出来.当然,根据您的实现,您可能还希望将高度设置为0px,或者查看位置绝对的可能性.核心概念仍然是你只是将元素从屏幕上移开.好消息是隐藏的元素仍然存在于DOM中,您可以访问它们.
div {
  position: relative;
  left: 0px;
}
div.hide {
  left: -4096px;
  height: 0px;
}

看看这两个小提琴,他们创建10K行并切换(隐藏/显示)奇数行:

FIDDLE using Display none/block

FIDDLE using Position and Height

Chrome可以快速处理100K这些行,很难看到显着的性能提升,而对于Firefox,我不得不将行数减少到10K,性能提升更加明显.

原文链接:https://www.f2er.com/html/227935.html

猜你在找的HTML相关文章