调用 javascript function 的最快方法是什么

Question

调用全局定义的 javascript function 或作为全局变量的属性是否更快？

例如：

选项1

.html:
<input type="checkbox" name="" value="" onClick="dofind()">

.js:
function dofind() { /* code */ }

选项 2

.html:
<input type="checkbox" name="" value="" onClick="x.dofind()">

.js:    
var x = {
    dofind: function() { /* code */ }
}

Answer 1

在本地 scope 中调用 function 速度要快得多。 您需要进行数百万次调用才能引起注意，这在onclick处理程序中并非如此。

但是，这些方法都不是理想的。 您最好在 DOM 加载后通过添加onclick事件侦听器来采取不引人注目的路线。

Answer 2

如果考虑事件侦听器的 scope 链，在第一种情况下，它必须解析侦听器 scope 链上对象的标识符dofind 。 大概不会在任何中间 object 上找到它，而会在全局 object 上找到。 然后它将被调用。

在第二种情况下，标识符x必须在类似（相同？）scope 链上解析，并且一旦找到，标识符dofind必须作为该 object 的属性找到。

逻辑上说第二种方法因为更长而更慢。 但是，如果需要，javascript 引擎可以优化 scope 链和属性访问。 很有可能（在现代浏览器中）随后对dofind的调用将直接进行，而不参考 scope 链，除非引擎认为该链可能已被更改。

在各种浏览器中进行测试将揭示哪些优化了此类调用，哪些没有。 我想您会发现，在整体应用程序性能方面，调用的差异可以忽略不计，尤其是解析标识符的速度比用户发起一系列点击事件的速度要快得多（可能是 1,000 倍或更多）。

Answer 3

除非您在页面上加载了数千个此类事件处理程序，否则您不会注意到任何性能差异。 当您在页面上加载了数千个带有事件处理程序的元素时，附加事件处理程序所花费的时间将成为您的问题最少的问题。