javascript - 遍历 DOM 时有多少开销？

Question

(我在这里使用prototype.js，但我想其他库也是如此)

我经常发现自己编写这样的代码:

var search_box;

Event.observe(window, 'load', function() {
    search_box = $('search_box');
});

function doSomething(msg) {
    search_box.innerHTML = msg;
}

而不是简单地写成这样:

function doSomething(msg) {
   $('search_box').innerHTML = msg;
}

我的目的是避免遍历整个 DOM 来搜索“search_box”元素，我需要访问它。因此，我在页面加载时搜索它一次，然后将引用粘贴到全局变量中。但是，我不记得见过其他人这样做过吗？我是否不必要地使代码变得更加复杂？

Answer 1

这称为premature optimization .

您正在引入一个全局变量来优化您尚未分析的内容。

您的假设 $ “遍历 DOM”是不正确的。该功能是使用 document.getElementById 实现的这是访问 DOM 中元素最快的方式。

我建议使用基本的编程最佳实践来编码您的 javascript，例如避免全局变量，以及在没有分析的情况下不要优化。一旦您的应用程序按预期工作，您应该对其进行分析(使用 firebug )并解决速度缓慢的区域。