javascript - 最小化DOM访问以使页面更具响应性

Question

使用JavaScript访问DOM元素的速度很慢，因此为了使页面更具响应性，我们必须执行以下操作


缓存对已访问元素的引用
更新节点“离线”，然后将其添加到树中
避免使用JavaScript修复布局


谁能告诉我前两件事该怎么做？

谢谢

Answer 1

这些是一些抽象的问题，甚至不一定彼此相关。



1.缓存对已访问元素的引用

缓存引用是一种实践，有时是必要的。在本地（或um，全局）维护对元素的引用的操作非常简单。使用document.createElement()之类的DOM方法时，通常会有一个变量保存到该变量中。这是一个参考，可以缓存以备后用。 document.getElementById返回对元素的引用，document.getElementsByTagName返回引用列表，document.querySelectorAll等也是如此。



2.更新节点“离线”，然后将其添加到树中

当您说“离线”时，我不太确定您所引用的上下文。这是在将任何元素（包括像<div>这样的字符串）添加到DOM之前吗？

与元素进行交互的三种主要方式：


document.createElement（带有elem.appendChild）

在一段遥远的过去，有一天，这是浏览页面内容的必要方式。它吸引了“ Web开发人员”社区的一个子集，该社区对采用类似于API的编程方式来处理和处理DOM及其居民感到满意。它几乎看起来像真实的代码，很难的东西。

当然，其中一些代码有些混乱，并且反复创建，附加和附加到那些代码上，并且对于那些不需要诞生它的人来说，这些代码看起来很酷。

如果您精通cloneNode，则使用DOM节点可以获得更合理的结果。但是我认为直到最近几年，cloneNode并不是一个很好的选择。我可能会忘记这一点，对货物狂热和所有。如我错了请纠正我。

然后IE来了，给了我们...
elem.innerHTML

惊喜！这是不标准的，伙计。他们怎么能唯一的问题是，它真的很快。 Killer-fast（就像IE6 / 7一样，也从未发生过，我们都想忘记）。

DOM是...无论如何，浏览器速度慢且效率低下，而且无论如何都没有真正运行真实的代码，因此可以容忍DOM的慢度。但是随后，无论出于何种原因，innerHTML进入左阶段，而且老兄，这比DOM方法要快。优雅，“我喜欢整天盯着标记而不是DOM方法”。

最终，每个人​​都加入了.innerHTML潮流，这已成为事实上的标准。快速，对吗？

好。依靠。是的，做elem.innerHTML = "<p>Hey!</p>"很快。 elem.innerHTML = '<p>Hey!</p><p>Yo!</p><p>What!</p>'也是如此。因此，人们自然而然地认为，这是一项财产，让我们变得傻笑，

for 1..500 element.innerHTML += '<p>Medusa!</p>';

伪代码在那里。哪里出问题了？ +=对我们冲刺的朋友 innerHTML就像k石。疯狂的坏主意，永不做，甚至不考虑这个坏主意。为什么？ AFAIK，它与 .innerHTML攻击内部内容的方式有关，因此，当您 elem.innerHTML += '...mayhem...'时，您每次都会“破坏” DOM。或者其他的东西。这使DOM哭泣。

不要让DOM哭泣。
documentFragment

因此，在某个时候（是否一直在那里？DOM Level 3，如果有什么意思）， documentFragment使场景崩溃。 MDN的 brief note对此进行了总结。它是与主DOM分开的 Node。就像在一个小盒子中一样，在将其移动到爸爸DOM之前，将它们放进去。

在速度方面，它在大多数情况下都紧随 .innerHTML，并且都是DOM程序和东西。好漂亮




在缓存方面，这很大程度上与代码结构和使用范围的方式有关。举个例子：

window.addEventListener('load', function () {
  var target = document.getElementById('target'),
      source = document.getElementById('source'),
      ...

  source.addEventListener('click', function () {
    var words = source.getElementsByTagName('span'),
        total = words.length,
        word;

    while (word = words[--total]) {
      target.appendChild(word);
    }
  });

});

http://jsfiddle.net/userdude/T6YLZ/

我将 target和 source保留在 click处理程序的作用域之外，以便以后访问它们时，它们已经存在。由于在 words之前不将 source添加到 window.onload，所以直到 span出现之前，我不会将所有 words元素与 target一起移动到 source.click。

您似乎在用术语描述 documentFragment。而且他们很酷。我只是最近才遇到他们，尽管显然对于那些知道他们似乎已经呆了两年或更长时间的人来说。因此，如果您是其中的 must.use.dom.methods(now)之一，请在插入非片段DOM之前使用 documentFragment。

但是...请记住，有时候您会使用 elemn.innerHTML，因为要添加标记。也许您有模板，AJAX响应标记等。

只是在 +=时不要 elem.innerHTML。