隐藏行时Opera不会冻结表格

Question

考虑以下代码： http://jsfiddle.net/nzzzH/

尝试在Chrome、IE、Firefox中点击div，然后与Opera比较

你可以注意到，一开始所有的

元素都是隐藏在一起的，但是Opera却是一个接一个。

根据规范，哪种行为是正确的？ 怎么能强迫 Opera 像其他浏览器一样工作？

代码：

<div> click </div>

<table>
  <tr><td>a</td></tr>
  <tr><td>b</td></tr>
  <tr><td>c</td></tr>
  <tr><td>d</td></tr>
  <tr><td>e</td></tr>
</table>


var sleep = function (ms) {
    var unixtime_ms = new Date().getTime();
    while(new Date().getTime() < unixtime_ms + ms) {}
}

$('div').click(function(){
    $('tr').each(function(){
        $(this).hide();
        sleep(200);
    })
})

【问题讨论】：

• 你想达到什么目的？
• 我需要在表格中隐藏 ~500 行，然后我需要更改可见行的颜色。在 Chrome 中，一切都是一步完成的，但在 Opera 中，我看到了整个过程。
• setTimeout 呢？
• sleep() 这里只是为了展示行为的不同
• 我创建了一个更好的例子，你的睡眠功能对你的问题的意义感到困惑：jsfiddle.net/nzzzH/4

Answer 1

如果你只是想隐藏行并对可见行应用一些样式，为什么不一步隐藏它们呢？

$('div').click(function(){
    $('tr.rows-to-hide').hide();
    $('tr:not(.rows-to-hide)').css('background-color', 'blue');
});

编辑 我做了三个例子：

http://jsfiddle.net/nzzzH/8/ -> .hide() 在each()-loop

http://jsfiddle.net/nzzzH/10/ -> .hide() 一次

http://jsfiddle.net/nzzzH/10/ -> .css('display', 'none') 在each()-loop

所以确实在each()-loop 中使用.hide() 是迄今为止最慢的，不幸的是我无法找出这种行为的具体原因，我的猜测是歌剧在使用时有一个性能大量的 jQuery 动画。我的提示是立即使用.hide()。

编辑 2 我想我的猜测是正确的：Why is opera animation so slow?

Answer 2

尝试将 .hide() 替换为 .css({'display':'none'}) ：

$('div').click(function(){
    $('tr').each(function(){
        $(this).css({'display':'none'});
    })
})