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实现，firebug是访问DOM中元素的最快方式。

我建议使用基本的编程最佳实践来编写您的javascript，例如避免全局变量，而不是在没有分析的情况下进行优化。一旦您的应用程序按预期工作，那么您应该对其进行分析（使用{{3}}）并解决速度较慢的区域。

Answer 2

我通常会做同样的事情，你经常看不到它的原因可能是因为你没有看到经常被优化的编写良好的代码（永远不要让整个预优化是邪恶的事情） - 我说如果你可以优化它没有头痛，为什么不呢？

实际上虽然这是一个非常非常简单的DOM查找，但你应该开始担心，如果你在选择器中迭代了几十个元素并且模糊不清......所以除非你能做到，否则我不会太担心它我们确实注意到网页的某些部分加载速度相当慢，在这种情况下，您应该将您访问的多个元素存储在外部作用域的变量中。

好：

(function() {

var els = $$('.foo span'); // also better to specify a context but I'm not sure how that's done in Prototype, it's the second param in jQuery.

function foo() {
   els.something();
}

els.somethingElse();

})();

为：

(function() {

var els = $$('.foo span'); // also better to specify a context but I'm not sure how that's done in Prototype, it's the second param in jQuery.

function foo() {
$$('.foo span').something();
}

$$('.foo span').somethingElse();

})();

Answer 3

我决定花一点时间做一些测试来获得some hard data。答案是将元素预加载到全局变量的效率是使用DOM getElementById方法访问元素的两倍。（至少在FF 3.6下）。

使用全局变量方法对对象的后续访问也更有效，但只是稍微有点。

遍历DOM时有多少开销？

3 个答案: