我正在尝试测试在我的旧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");

一遍又一遍(以及所有其他代码),而在我的原始代码中,它只运行一次。 如何使它只运行一次而不是重复运行?

  ask by theintellects translate from so

本文未有回复,本站智能推荐:

4回复

如何在jQuery中删除DOM元素或从$(this).html()中进行选择?

我正在尝试在html元素(▲(▲)和▼(▼))中插入插入符号。 所以我用过了(它在一个单独的函数中 console.log($(this.html())) 哪个返回: Phone<span id="sort-caret">▲</span> 现
1回复

如何在jQuery中实现DOM目标?

因此,在JS中,我会做类似的事情。 然后以“ dropItem [0]”或forEach循环为目标。 现在,我也在尝试在jQuery中执行此操作。 通过执行以下操作: $("p").click(function() { var dropwDown = $(this).
2回复

jQuery类似Angular5中的DOM选择

假设我们有Angular组件,其内容如下所示: 在jQuery中,如果我需要通过选择器toBeSelected选择元素 是否存在任何有助于从组件中选择嵌套DOM元素的库。 由于@ContentChildren的@ContentChildren仅通过选择器选择组件的直接子级
5回复

清除jQuery元素的dom缓存?

我有一个jQuery元素$ foo 它包含带有textarea的html。 但是,如果我更改textarea的值并在此更改后使用$ foo.html(),则无法实现html结果... (坏)范例: http : //jsfiddle.net/sNYYD/781/ 如何删除或
4回复

jQuery:向表中添加行并在DOM中选择它

我想在表中添加一行,然后将其用作DOM对象。 假设以下HTML: 我使用以下JavaScript与jQuery插入一行: 变量newRowInDomTree包含tr.existing-row而不是tr.added-row 。 看来DOM树没有更新,但我没有说明原因。 有
6回复

查找无法从jQuery中的dom中选择数据

我需要的 我需要从events_links类访问href。 HTML代码 js代码 html元素的快照 我试图用.parent()访问,但它不起作用。 O / P 我需要通过单击小类来访问events_links类,以便从该ht
1回复

避免使用jquery在dom中重复选择名称

请查看随附的jsfiddle。 我的预期输出是 1)将选定的男孩分配到选定的男孩列。 2)避免重复选择,因为在页面加载时我可能已经选择了boy。 所以客观应该是。 技术问题1)每当dropdpwn更改时,都会查看所有其他下拉列表中的所选选项,并查看SELCTED BOY
1回复

如何在jQuery中访问iframe dom元素

我有两个jsp页面和js文件 one.jsp中包含one.js,two.jsp中包含two.js two.jsp由iframe加载并继承到one.jsp中 我的问题是 我需要从two.js访问one.jsp dom元素(One.js属于two.jsp(Iframe))
1回复

jQuery或JavaScript如何在iframe中访问DOM?

我希望jquery或javascript访问Iframe DOM 。 例如,我制作了一个iframe以显示亚马逊。 然后我想在亚马逊上获得一个横幅图像链接。 我可以这样做吗? 我还有一个问题。 如果我在iframe中单击由_blank目标作为_blank目标的亚马逊横幅,则浏览
1回复

如何在jquery中重写字符串以避免再次访问dom,并使用jquery选择器

我正在尝试重新编写一些jquery,以便使用我先前创建的选择器,这样就无需再次访问DOM。 我创建的选择器已经访问过DOM一次,我想在函数的字符串文字中使用其内容。 我当前的代码如下: 可以正常工作,但是“ .nav a”正在访问DOM,在这种情况下我不希望这样做。 我想使用this。$ na