这是为什么jQuery的这么慢?

我用一个jQuery插件,它修正了我生成一个HTML表头。 不幸的是,插件的性能非常慢,我已经把范围缩小到下面的代码:

var $tbl = $(this); var $tblhfixed = $tbl.find("thead"); $tblhfixed.find("th").each(function () $(this).css("width", $(this).width()); });

这是考虑大约40秒到表中,即2000行。 有谁知道它为什么这么慢,更重要的是我怎么能做出这样快? 我试过很多其他插件,这是它的工作原理我多么希望它唯一的一个。 感谢您的帮助

--------------解决方案-------------

罪魁祸首可能是.each

其原因是,当你使用循环.each正常的循环,而不是你要求每个迭代的功能。 一个函数调用在这种情况下,一个相当大的开销,因为新的调用堆栈具有用于每次迭代被创建。

为了使它更快的变革

$tblhfixed.find("th").each(function ()
$(this).css("width", $(this).width());
});

var elms = $tblhfixed.find("th");
for(var i=0, elm;elm = elms[i];i++) {
elm.css("width", elm.width());
}

我猜你面对我有前一段时间同样的问题。 它被称为“重新计算布局”什么的。

试试这个脚本划分到两个循环,就像这样:

var $tbl = $(this);
var $tblhfixed = $tbl.find("thead");
var widths = [];

// 1.
$tblhfixed.find("th").each(function ()
widths.push($(this).width());
});

// 2.
$tblhfixed.find("th").each(function (index, element)
$(this).css("width", widths[index]);
});

第一个将计算所有的宽度。 第二个将其应用到TH的

UPD:您可以通过将1和2之间的代码提高性能:

$tblhfixed.hide();

和2后再次显示它:

$tblhfixed.show();

你不应该重复$(this)你的函数传递到内.each() 。 包装的元素有不平凡的开销,当你有20K的元素这是不正常。 要消除尽可能多的工作,尽可能在里面.each()调用,或者完全消除。

另外,为什么查询find()两次,当你可以做到这一点,而不是,它应该给你同样的结果:

$ths = $('table thead th'); //or tableid, or something
$ths.css('width', $ths.width());

看来$ .WIDTH()是比本地变慢99次(0).clientWidth,看看这个测试:http://jsperf.com/jq-width-vs-client-width

首先,你应该使用find()只有当你需要通过所有嵌套的节点。 就在这里,你可以使用children()

其次,每次$(this)创建jQuery对象的新实例,而你可以一次创建它:

var $this = $(this);

每次$(this).width()被重新计算。 请确保您需要重新计算。 或做:

var tableWidth = $this.width();

第三,根据@马丁耶斯佩森,每次迭代function创建对象。

你也不用在这里的jQuery在所有。 您可以直接访问DOM:

var tableWidth = ...; // get the table width the way you want
var thead = this.tHead;
var thRow = thead.rows[0];
for (var i = 0; i < thRow.length; ++i) {
thRow.cells[i].style.width = tableWidth + "px";
}

分类:JavaScript的 时间:2012-01-01 人气:1
本文关键词: JavaScript中,jQuery的
分享到:

相关文章

  • 在JavaScript中/ jQuery的字符串解析 2012-12-13

    我有一个网址参数的字符串. 我想获得保险价值 的保险 ,如果参数来只有一个字符串的时间. 例如: 1.下列字符串应该产生的结果: 假的 ?姓氏= ABC&名字= XYZ及保险= 2&保险= 3&保险= 4&保险= 5&出生日期= 01-01-2000 2.以下字符串应该产生的结果:2(因为只有一个保险) ?姓氏= ABC&名字= XYZ及保险= 2 =出生日期01-01-2000 我怎样才能做到这一点在JavaScript中/ jQuery的 我感谢每一个答

  • 在JavaScript中/ jQuery的(以及服务器端帮手)安全Twitter的OAuth认证 2012-07-07

    什么是JavaScript中做Twitter的OAuth认证安全的最佳方式? 我试图写一个程序,让用户分析他的Twitter的使​​用情况和追随者/朋友. 我写了一个服务器端版本使用Python tweepy模块,它的工作原理. 我想与人分享,但我想它在浏览器中运行具有可扩展性与我的小服务器上运行. 我看到另外一个问题,其中的结果是,它不推荐,而不是安全的:JavaScript的的OAuth与Twitter登录 这是有道理的,如果一个人在发送应用程序的JavaScript消费者(应用程序)的秘密

  • 在JavaScript中/ JQuery的使用PHP数据(对象) 2014-03-08

    我有一个PHP函数来获取事件作为对象,我想将它们添加到通过jQuery我现有的UL-列表. 我要到PHP变量传递到jQuery和希望重复这个变量建立的HTML. 我这一个尝试吧: $pastEvents = event::getPastEvents($team); var test = { pastEvents : '<?php echo $pastEvents; ?>' }; for (obj in test.pastEvents) { console.log(obj); } 结果我得到的是

  • 如何操纵JavaScript中/ jQuery的JSON对象? 2013-02-16

    我想用添加在JSON删除更新元素的jQuery / javascript和当文件提交是为了服务器要考虑最新的JSON对象. 你可以建议和方法我坚持. --------------解决方案------------- 如前所述,您可以使用jQuery的JSON功能来编辑对象. 让我展示你怎么可能做到这一点,有一些代码: 让我们借此JSON对象: { "people":[ {"name":"Bob","score":9}, {&qu

  • 在JavaScript中/ JQuery的测试URL等价(获取URL的规范形式) 2013-10-20

    相同的URL可在许多不同的表示来表示. 例如,假设浏览器的当前加载页面http://www.example.com/about.html 下面的网址,可以考虑从视图浏览器的点相当于: http://www.example.com/contact-us.html和http://www.example.com/contact-us.html http://www.example.com/contact-us.html和contact-us.html http://www.example.com/co

  • 在JavaScript中/ jQuery的捕获按Ctrl-Alt-Del组合 2014-12-23

    虽然只是使用jQuery / JavaScript的打我碰到这个问题跑了. 我可以捕捉Alt键和Ctrl键但不是德尔,当然不是所有的人在一起. $(document).ready(function() { $("#target").keydown(function(event) { if (event.ctrlKey && event.altKey && event.keyCode == '46') { alter("Ctrl-Alt-Del

  • 在JavaScript中/ jQuery的嵌套循环不工作 2012-06-20

    林调用了内部循环for循环和它不工作,下面的代码: function PopulateMonths() { for (var m = 0; m < 12; m++) { var $month = $('.d-month').clone(); $month.find('.d-header').text(m); $month = PopulateDays($month); $month.appendTo('#diary').show(); $month = null; } } function Po

  • 什么是超时VS在JavaScript中/ jQuery的内容加载异步调用倒计时的利弊 2012-12-07

    为了我的思维方式,我可能会过度工程与递归解决方案. 等待2秒第一组模块被加载: function loadContents() { $('[data-content]:not(.loaded)').each( function() { $(this).load($(this).data('content')); $(this).addClass('loaded'); }); } loadContents(); setInterval(loadContents, 2000); 当所有第一组模块的装

  • 元素的DOM最短路径(在JavaScript中/ jQuery的/道场使用) 2014-02-16

    我想检索网站(如萤火虫或本Greasemonkey的userscript)随机元素的DOM路径当我点击这个元素. 对于这部分没有问题,我返回一个包含路径的字符串. 唯一的缺点存在,我不需要一个完整路径,如 html > body > div #mainPanel > table #pageBody > tbody > tr > td 就在: #pageBody > tbody > tr > td将足以恢复使用jQuery或道场的元素. 我想用一个正则表

  • 调用传递给函数在JavaScript中/ jQuery的配置对象的方法 2014-12-17

    我有一个接受配置对象依次产生与jQuery UI的像这样一个模式对话框一个功能可按: function modalDialog(settings) { var options = $.extend({ selector: '.dialog', // the dialog element selector disabled: false, // disables(true) or enables (false) the dialog autoOpen: false, // dialog opens

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.909 (s). 10 q(s)