1

在完成以下作业时出现了问题：创建 4 个divs当我单击button.

一切正常，但我的老师使用init function来获取divs通路getElementById("div1")，而我使用它changeColorFunction()本身，根本没有使用init function。见下文：

我的解决方案：

function changeColor () {

    document.getElementById("div1").style.background = createNewColor();
    document.getElementById("div2").style.background = createNewColor();
    document.getElementById("div3").style.background = createNewColor();
    document.getElementById("div4").style.background = createNewColor();

}

我的老师解决方案：

    var d1,d2,d3,d4;

    function init(){

    d1 = document.getElementById("d1");
    d2 = document.getElementById("d2");
    d3 = document.getElementById("d3");
    d4 = document.getElementById("d4");
    }
window.onload = init;

它只是一个关于获得elements. 有了这小段代码，我想差别不大，但什么时候有关系？

当这个项目增长时，用户是否会通过我的解决方案认识到浏览器总是必须先获得第elements一个才能运行代码？

希望你能跟上。

4

3 回答 3

0

它几乎没有什么区别。旧浏览器上可能存在非常非常非常小的性能差异。您没有创建任何全局变量，这意味着如果您必须更改相同的其他内容，则div必须再次通过 ID 获取它。你教授的方法会让他只使用变量。

于 2012-09-02T16:52:46.890 回答
0

实际上，不同之处在于您的老师有点“缓存” div。这意味着当他必须更改颜色时，他不必每次都使用 getElementById 搜索页面，因为他将它们保存在变量中。

在您的情况下，每次您想要更改 div 颜色时，您都将扫描页面以获取 div，即使您之前已经找到它们。

这可能会对大页面产生影响。

于 2012-09-02T16:54:32.847 回答
0

如果您要div多次访问这些 s，则事先缓存它们可能会有所帮助，这就是您的老师正在做的事情。

也就是说，每次您想更改其样式时，使用更改缓存元素的 存储在变量中，然后从 DOM 树中获取它会更快。styleDOMgetElementById

然而，差异几乎可以忽略不计，但与往常一样，查看它的最佳方法是对其进行基准测试。我创建了一个jsperf.com测试用例来说明它。您可以在此处查看结果并使用它：

Testing in Chrome 21.0.1180.83 32-bit on Windows Server 2008 R2 / 7 64-bit
+-----------------------+------------------------------------------------+
| Test                  |  Ops/sec                                       |
+-----------------------+------------------------------------------------+
| Cached getElementById |  584,606 ±2.62% fastest                        |
+-----------------------+------------------------------------------------+
| getElementById        |  422,957 ±1.27% 27% slower                     |
+-----------------------+------------------------------------------------+
于 2012-09-02T16:58:56.617 回答