在这里给出一些像这样的JS代码:

  for (var i = 0; i < document.getElementsByName('scale_select').length; i++) {
    document.getElementsByName('scale_select')[i].onclick = vSetScale;
  }

如果我们在循环之前将getElementsByName的结果放入变量然后在那之后使用变量,代码会更快吗?

我不确定这种效果在现实生活中有多大,其结果是getElementsByName通常有<!> lt; 10项。无论如何,我想了解潜在的机制。

另外,如果这两个选项还有其他值得注意的地方,请告诉我。

有帮助吗?

解决方案

当然。存储所需的内存只是指向DOM对象的指针,并且 显着 比每次需要使用某些东西时进行DOM搜索时更少痛苦!

理想代码:

var scale_select = document.getElementsByName('scale_select');
for (var i = 0; i < scale_select.length; i++)
    scale_select[i].onclick = vSetScale;

其他提示

缓存属性查找可能对某些人有所帮助,但c 痛苦的启动循环之前数组的长度已经证明更快。

因此在循环中声明一个包含scale_select.length值的变量会加快整个循环的速度。

var scale_select = document.getElementsByName('scale_select');
for (var i = 0, al=scale_select.length; i < al; i++)
    scale_select[i].onclick = vSetScale;

DOM的智能实现将执行自己的缓存,在某些更改时使缓存无效。但是今天并不是所有的DOM都能被认为是聪明的(咳嗽 IE 咳嗽)所以最好自己这样做。

  

原则上,如果我们在循环之前将getElementsByName的结果放入变量然后在之后使用变量,代码会更快吗?

使用变量。它们在JavaScript中并不是非常昂贵,函数调用肯定更慢。如果在document.getElementById()上至少循环5次,请使用变量。这里的想法不仅是函数调用很慢,而且这个特定的函数非常慢,因为它试图在DOM中找到具有给定id的元素。

@ Oli

缓存在变量中获取的元素的length属性也是一个好主意:

var scaleSelect = document.getElementsByName('scale_select');
var scaleSelectLength = scaleSelect.length;

for (var i = 0; i < scaleSelectLength; i += 1)
{
    // scaleSelect[i]
}

没有必要将scaleSelect.length存储在单独的变量中;它实际上已经在一个中 - scaleSelect.length只是scaleSelect数组的一个属性,因此它可以像任何其他静态变量一样快速访问。

我是这么认为的。每次循环时,引擎都需要重新评估document.getElementsByName语句。

另一方面,如果该值保存在变量中,那么它已经具有该值。

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top