Question

因为据说变量越接近运行的函数，它的性能就越好，我认为设置let doc = document（以及let win = window）的表现会更好或者至少相同使用文档（或窗口）对象本身（例如document.getElementById('id') vs doc.getElementById('id')）。由于名称本身可以缩短，因此可以使用较短的参考文献。

然而，在我的测试中，参考速度比原始对象慢1.5倍。这背后有什么理由吗？ “更近的范围规则”是否不适用于这些常用的基本对象，因为浏览器会假设它们会被大量使用？

快速基准：

let doc, f1, f2;

doc = document;

f1 = function() {
    for (let i = 0; i < 10; i++) document.body;
    for (let i = 0; i < 10; i++) document.head;
    for (let i = 0; i < 10; i++) document.getElementsByTagName('body');
};

f2 = function() {
    for (let i = 0; i < 10; i++) doc.body;
    for (let i = 0; i < 10; i++) doc.head;
    for (let i = 0; i < 10; i++) doc.getElementsByTagName('body');
};

for (let j = 0; j < 3; j++) {
    console.time(1);
    for (let i = 0; i < 1000000; i++) f1();
    console.timeEnd(1);

    console.time(2);
    for (let i = 0; i < 1000000; i++) f2();
    console.timeEnd(2);
}

/*
Results:
1: 1162ms
2: 1687ms
1: 1096ms
2: 1648ms
1: 1079ms
2: 1644ms
*/

Answer 1

FWIW，在Chrome中，本地明显胜过全球，而非本地甚至更快：

LOOPS = 100000

function test(loops, fn, arg) {
  var t = new Date;
  while (loops--) fn(arg);
  console.log((new Date) - t);
}

function global() {
    test(LOOPS, () => window.outerHeight);
}

function local() {
    var win = window;
    test(LOOPS, () => win.outerHeight);
}

var win2 = window;

function nonlocal() {
    test(LOOPS, () => win2.outerHeight);
}

function arg() {
    var win3 = window;
    test(LOOPS, (x) => x.outerHeight, win3);
}


global()
local()
nonlocal()
arg()

为什么文档引用变量比文档对象本身慢？

1 个答案: