Question

在完成以下作业时出现了问题：当我点击divs时，创建4个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才能运行代码吗？

希望你能效仿。

Answer 1

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

Answer 2

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

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

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

Answer 3

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

也就是说，更改更快来更改存储在变量中的缓存style元素的DOM，然后再获取每当你想改变它的风格时，使用getElementById从DOM树中获取它。

然而，这种差异几乎可以忽略不计，但与往常一样，最好的方式就是对它进行基准测试。我已经创建了一个jsperf.com测试用例来说明它。您可以查看here结果并使用它：

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                     |
+-----------------------+------------------------------------------------+

在init function（）中调用getElementById（“....”）而不是想要用它做什么的函数

3 个答案: