javascript - JSPerf でキャッシュされた jQuery DOM 選択をベンチマークするにはどうすればよいですか?

Question

DOM 選択のキャッシュ (選択を変数に割り当てる) が古い JS コードでどのように実行されるかをテストしようとしています。JSPerf を使用してみましたが、すべてをループで実行しているように見えます。これは、var の割り当てが何千回も重複していることを意味します。どうすればこれを修正できますか?

更新されたコードのJSFiddle

ベンチマークのスクリプト (古いコード) #1:

$('.projectscontainer').on("click", "span.destproject", function () {
    $(this).siblings('.projectschildren').toggle().end().siblings('div.destarrow').toggleClass("arrow-right arrow-down");
}).on("click", "div.destarrow", function () {
    $(this).parent().find("span.destproject").trigger("click");
});

$('body').on("click", "span#expandcollapse", function () {
    if ($(this).text() === 'Expand All') { //Currently collapsed
        var startTime = new Date().getTime();
        $('.projectscontainer').find("div.destarrow").filter('.arrow-right').toggleClass("arrow-right arrow-down");
        $('.projectscontainer').find(".projectschildren").toggle(true);
        var endTime = new Date().getTime();
        console.log('Action took: ' + (endTime - startTime) + 'ms');
    } else { //Currently expanded            
        var startTime = new Date().getTime();
        $('.projectscontainer').find("div.destarrow").filter('.arrow-down').toggleClass("arrow-down arrow-right");
        $('.projectscontainer').find(".projectschildren").toggle(false);
        var endTime = new Date().getTime();
        console.log('Action took: ' + (endTime - startTime) + 'ms');
    }
    $(this).text(function (i, currentText) {
        return currentText === 'Expand All' ? 'Collapse All' : 'Expand All';
    });
});

ベンチマークのスクリプト (新しいコード) #2:

var projectscontainer = $('body').find('div.projectscontainer');
var projectschildren  = projectscontainer.find("div.projectschildren");
var destarrows        = projectscontainer.find("div.destarrow");
var srcprojects       = projectscontainer.find("div.srcprojects");

projectscontainer.on("click", "span.destproject", function (){
    $(this).siblings('div.projectschildren').toggle().end().siblings('div.destarrow').toggleClass("arrow-right arrow-down");
}).on("click", "div.destarrow", function (){
    $(this).parent().find("span.destproject").trigger("click");
});

$('body').on("click", "#expandcollapse", function (){
    if($(this).text() === 'Expand All'){//Currently collapsed
        var startTime = new Date().getTime();
        destarrows.filter('div.arrow-right').toggleClass("arrow-right arrow-down");
        projectschildren.toggle(true);
        var endTime = new Date().getTime();
        console.log('Action took: ' + (endTime - startTime) + 'ms');
    } else {//Currently expanded            
        var startTime = new Date().getTime();
        destarrows.filter('div.arrow-down').toggleClass("arrow-down arrow-right");            
        projectschildren.toggle(false);
        var endTime = new Date().getTime();
        console.log('Action took: ' + (endTime - startTime) + 'ms');
    }
    $(this).text(function(i, currentText){
        return currentText === 'Expand All' ? 'Collapse All' : 'Expand All';
    });
});

JSPerf ベンチマークはこれらの行を実行することになります

var projectscontainer = $('body').find('div.projectscontainer');
var projectschildren  = projectscontainer.find("div.projectschildren");
var destarrows        = projectscontainer.find("div.destarrow");
var srcprojects       = projectscontainer.find("div.srcprojects");

(他のすべてのコードと一緒に) 何度も繰り返しますが、元のコードでは 1 回しか実行されません。繰り返し実行するのではなく、一度だけ実行するにはどうすればよいですか?