javascript - 为什么将 getElementById() 的结果存储到变量而不是每次都使用该函数？

Question

考虑这段代码:

function changeImage()
{
    var image = document.getElementById('myImage');
    if (image.src.match("bulbon"))
    {
        image.src = "pic_bulboff.gif";
    }
    else
    {
        image.src = "pic_bulbon.gif";
    }
}

我不明白为什么这会将 getElementById() 的结果存储到一个变量，然后在 if 语句中使用该变量，因为我们可以访问属性 每次只需使用 getElementById() 即可获取 src ，如下所示:

function changeImage()
{
    if(document.getElementById("myImage").src=="pic_bulboff.gif")
    {
       document.getElementById("myImage").src="pic_bulbon.gif";
    }
    else
    {
        document.getElementById("myImage").src="pic_bulboff.gif";
    }
}

为什么使用变量而不是重复使用 getElementById() ？

Answer 1

var image = document.getElementById('myImage'); 通过引用返回一个对象，并为同一图像节省 2 次额外的“搜索”，这样速度会更慢，并且会消耗更多的处理器资源在你的第二个例子中。

更合适的做法是:

    <script>
    function changeImage()  {
        var image = document.getElementById('myImage');
        if (image) { image.src = image.src.match("bulbon")?"pic_bulboff.gif":"pic_bulbon.gif"; }
    }  
</script>