草庐IT

javascript - Internet Explorer 8 标准模式下的表格性能不佳

coder 2024-05-05 原文

当使用包含合理数据量(100 行 x 50 列)的表时，我注意到 IE8 性能下降得令人无法接受(仅在 IE8 标准呈现模式下)。 CPU 使用率飙升至 100%，浏览器变得非常缓慢。增加表中的数据量会加剧迟缓。

当悬停在一行上时应用背景颜色时，这一点变得很明显，但性能下降似乎会随着任何样式更改而发生，并且与悬停事件处理无关。

附件是一个非常简单的测试用例，我可以用它来始终如一地重现问题。

关于这个问题的一些说明:

  • Dynatrace 报告显示几乎 100% 的 CPU 时间花在了“计算通用布局”上。如果 <div> 则不会发生这种情况使用 s 代替表格(见下文)。
  • 通过开发工具栏将文档模式切换为 IE7 标准或 Quirks 模式可解决此问题。
  • 由于我工作环境的限制，IE8 在 IE8 兼容模式浏览器模式和 IE8 标准文档模式下运行。通过开发工具栏更改此设置不会对性能产生任何影响。
  • 替换 <table>解决方案 <div>/<span>方法提高了性能，排除了 DOM 节点数量本身是罪魁祸首。
  • 该示例将鼠标悬停事件添加到每个 <tr> ，但使用事件委托(delegate)并不能缓解问题。事实上，如果我将鼠标悬停解决方案替换为 setInterval在每 50 毫秒突出显示一个随机行的情况下，会发生相同的性能下降。
  • 我已经在工作环境中的多台不同机器(所有 Windows XP、Intel Core Duo @ 2.33 Ghz、3.5 GB RAM)上测试并确认了此行为。所有人都表现出相同的行为。
  • 我已经测试了 HTML 4 Strict、XHTML 1.0 strict 和 HTML5 文档类型。所有人都表现出相同的行为。
  • 在服务器端预呈现表对运行时性能没有影响。
  • 使用表格布局:在 <td> 上固定和/或设置宽度的无效。
  • 通过类使用 CSS 样式而不是通过 JavaScript 操作样式没有效果。
  • 为 <td> 应用背景色的而不是 <tr>的无效。

我相信我已经用尽了从编码 Angular 改进鼠标悬停效果性能的所有选项，并且不得不得出结论 IE8 <table>处理非常差 - 尽管如果它总是这么糟糕，我很惊讶我没有找到关于这个主题的更多信息。

我希望其他人可以在单独的 IE8 环境中确认此行为，或者指出我的错误。我很想知道为什么 IE8 在标准中的性能比 IE6 或在 IE7/Quirks 模式下运行的 IE8 差得多。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
     <meta http-equiv="X-UA-Compatible" content="IE=8">
        <title>IE8 Table Hover</title>
    </head>
    <body>
        <script type="text/javascript">
   var numRows = 100;
   var numCols = 50;

   function renderTable () {
    var a = [];

    a.push('<table id="table"><tbody>');

    for (var i=0; i < numRows; i++) {
     a.push('<tr>');

     for (var j=0; j < numCols; j++) {
      a.push('<td>');
      a.push(i + ':' + j);
      a.push('</td>');  
     }

     a.push('</tr>');
    }

    a.push('</tbody></table>');

    var div = document.createElement('div');
    div.innerHTML = a.join('');
    div = document.body.appendChild(div);

    var rows = div.getElementsByTagName('tr');

    for (var i=0; i < rows.length; i++) {
     rows[i].onmouseover = function (event) {
      this.style.backgroundColor = '#cc0000';
     }

     rows[i].onmouseout = function (event) {
      this.style.backgroundColor = '';
     }
    }
   }

   renderTable();
  </script>
 </body>
</html>

Test Case @ jsfiddle

最佳答案

虽然没有找到对性能不佳的解释，但该行为已得到其他用户的确认(降低了环境问题的可能性)。

这似乎是 IE8 处理 <table> 的核心问题。样式操作，我将向 IE 团队提交错误。我已经在 Internet Explorer 开发论坛上创建了一个论坛帖子，到目前为止没有产生任何结果:http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/2afa46aa-16bb-4e65-be38-a6de19b2b2e9

然而，有一些解决方法可以在 IE8 中实现可用的悬停效果，最值得考虑的两个是:

  • 替换 <table>解决方案 <div>和 <span>元素
  • 通过定位 <div> 来伪造悬停效果透明背后的元素<table>正如大卫默多克所建议的那样。可以在 http://jsfiddle.net/YarnT/1/ 找到基本的概念证明。

我会在这里发布任何更新，以防我学到任何新东西，或者得到 IE 团队的回应。

关于javascript - Internet Explorer 8 标准模式下的表格性能不佳，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4602986/

javascriptInternetcodeltgtperformancehtml-tableinternet-explorer-8

有关javascript - Internet Explorer 8 标准模式下的表格性能不佳的更多相关文章

  1. ruby - 将 spawn() 的标准输出/标准错误重定向到 Ruby 中的字符串 - 2

    我想使用spawn(针对多个并发子进程)在Ruby中执行一个外部进程，并将标准输出或标准错误收集到一个字符串中，其方式类似于使用Python的子进程Popen.communicate()可以完成的操作。我尝试将:out/:err重定向到一个新的StringIO对象，但这会生成一个ArgumentError，并且临时重新定义$stdxxx会混淆子进程的输出。 最佳答案 如果你不喜欢popen，这是我的方法:r,w=IO.pipepid=Process.spawn(command,:out=>w,:err=>[:child,:out])

  2. ruby-on-rails - 标准化文件名的字符串，删除重音和特殊字符 - 2

    我正在尝试找到一种方法来规范化字符串以将其作为文件名传递。到目前为止我有这个:my_string.mb_chars.normalize(:kd).gsub(/[^\x00-\x7F]/n,'').downcase.gsub(/[^a-z]/,'_')但第一个问题:-字符。我猜这个方法还有更多问题。我不控制名称，名称字符串可以有重音符、空格和特殊字符。我想删除所有这些，用相应的字母('é'=>'e')替换重音符号，并将其余的替换为'_'字符。名字是这样的:“Prélèvements-常规”“健康证”...我希望它们像一个没有空格/特殊字符的文件名:“prelevements_routin

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. Ruby 的数字方法性能 - 2

    我正在使用Ruby解决一些ProjectEuler问题，特别是这里我要讨论的问题25(Fibonacci数列中包含1000位数字的第一项的索引是多少？)。起初，我使用的是Ruby2.2.3，我将问题编码为:number=3a=1b=2whileb.to_s.length但后来我发现2.4.2版本有一个名为digits的方法，这正是我需要的。我转换为代码:whileb.digits.length当我比较这两种方法时，digits慢得多。时间./025/problem025.rb0.13s用户0.02s系统80%cpu0.190总计./025/problem025.rb2.19s用户0.0

  5. ruby - Ruby 性能中的计时器 - 2

    我正在寻找一个用ruby​​演示计时器的在线示例，并发现了下面的代码。它按预期工作，但这个简单的程序使用30Mo内存(如Windows任务管理器中所示)和太多CPU有意义吗？非常感谢deftime_blockstart_time=Time.nowThread.new{yield}Time.now-start_timeenddefrepeat_every(seconds)whiletruedotime_spent=time_block{yield}#Tohandle-vesleepinteravalsleep(seconds-time_spent)iftime_spent

  6. Ruby:标准递归模式 - 2

    我经常迷上ruby​​的一件事是递归模式。例如，假设我有一个数组，它可能包含无限深度的数组作为元素。所以，例如:my_array=[1,[2,3,[4,5,[6,7]]]]我想创建一个方法，可以将数组展平为[1,2,3,4,5,6,7]。我知道.flatten可以完成这项工作，但这个问题是作为我经常遇到的递归问题的一个例子-因此我试图找到一个更可重用的解决方案。简而言之-我猜这种事情有一个标准模式，但我想不出任何特别优雅的东西。任何想法表示赞赏 最佳答案 递归是一种方法，它不依赖于语言。您在编写算法时要考虑两种情况:再次调用函数的情

  7. ruby-on-rails - 如果条件与 &&，是否有任何性能提升 - 2

    如果用户是所有者，我有一个条件来检查说删除和文章。delete_articleifuser.owner?另一种方式是user.owner?&&delete_article选择它有什么好处还是它只是一种写作风格 最佳答案 性能不太可能成为该声明的问题。第一个要好得多-它更容易阅读。您future的自己和其他将开始编写代码的人会为此感谢您。 关于ruby-on-rails-如果条件与&&，是否有任何性能提升，我们在StackOverflow上找到一个类似的问题：

  8. ruby-on-rails - 使用 Ruby 标准 Logger 每天只创建一个日志 - 2

    我正在使用ruby​​标准记录器，我想要每天轮换一次，所以在我的代码中我有:Logger.new("#{$ROOT_PATH}/log/errors.log",'daily')它运行完美，但它创建了两个文件errors.log.20130217和errors.log.20130217.1。如何强制它每天只创建一个文件？ 最佳答案 您的代码对于长时间运行的应用程序是正确的。发生的事情是您在给定的一天多次运行代码。第一次运行时，Ruby会创建一个日志文件“errors.log”。当日期改变时，Ruby将文件重命名为“errors.log

  9. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  10. 用于从 Open3.popen3 标准输出中提取值的正则表达式 - 2

    如何获取外部命令的输出并从中提取值？我有这样的东西:stdin,stdout,stderr,wait_thr=Open3.popen3("#{path}/foobar",configfile)if/exit0/=~wait_thr.value.to_srunlog.puts("Foobarexitednormally.\n")puts"Testcompleted."someoutputvalue=stdout.read("TX.*\s+(\d+)\s+")puts"Outputvalue:"+someoutputvalueend我没有在标准输出上使用正确的方法，因为Ruby告诉我它不能

随机推荐