我所说的多重赋值(或者叫做链接?)是这样的赋值:
a = b = c = 2;
...之后a
、b
、c
都等于2;
我的优化问题是,给定以下代码:
var dom1 = document.getElementById('layout_logos');
var dom2 = document.getElementById('layout_sitenav');
...
function layout_onscroll(){
...
dom1.style.height = dom2.style.top = maxLogoHeight - scrollTop;
...
}
根据我一直在阅读的内容,恐怕 layout_onscroll
中的代码评估为:
dom2.style.top = maxLogoHeight - scrollTop;
dom1.style.height = dom2.style.top;
.. 它给出了正确的值,但访问了 dom2 两次——一次是设置 top
,一次是获取 top
。 (请注意,我来自 .NET 背景,在这种背景下,Microsoft 将所有内容层层包裹在访问器函数层中,使得使用这些隐藏变量的循环非常慢。)
如果是这样,创建一个额外的变量然后将两个 DOM 元素分配给该变量是否更快?
...
var temp_var = maxLogoHeight - scrollTop;
dom1.style.height = temp_var;
dom2.style.top = temp_var;
...
这样做的明显损失来自于每次都分配临时变量。但是如果 dom2.style.top
被引擎盖下的两个 getter 函数访问(例如,如果第一个版本调用 dom2.getStyle().getTop()
,它又解析dom2
中单词“top”的 css 的所有文本)然后分配一个临时变量可能会更快。
最佳答案
这个:
dom1.style.height = dom2.style.top = maxLogoHeight - scrollTop;
……和这个不太一样:
dom2.style.top = maxLogoHeight - scrollTop;
dom1.style.height = dom2.style.top;
相反,右侧操作数 maxLogoHeight - scrollTop
被分配给 dom1.style.height
和 dom2 的 each。 style.top
.
我们可以在下面的例子中看到这一点:
片段
var d= document.getElementById('D');
s = d.style.width= 'abc';
console.log(s); //'abc'
d.style.width= 'abc';
s= d.style.width;
console.log(s); //null string
#D {height: 100px; width: 100px; background: red;}
<div id="D"></div>
abc
是无效宽度,因此被 d.style.width
丢弃。但是,您会看到 s
在第一个 console.log()
中被分配了 abc
,而在第二个中它被分配了空字符串控制台日志()
。
下面的例子可能更直观:
const x = 3;
var y = x = 6; // x cannot change. So is y 3 or 6?
document.body.innerHTML= x + y; // -> 9 ... y must be 6!
关于Javascript 多重分配重新评估或结果传递?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31414129/