我正在尝试测试在我的旧JS代码上缓存DOM选择(将选择分配给var)的性能。 我尝试使用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");
一遍又一遍(以及所有其他代码),而在我的原始代码中,它只运行一次。 如何使它只运行一次而不是重复运行?