发表新帖
发表新帖

Poor Performance with tables in Internet Explorer 8 Standards Mode

后端 未结
关注
6 539
鱼传尺愫
鱼传尺愫 2021-02-05 09:53

When using a table with a reasonable amount of data - 100 rows by 50 columns - I notice that IE8 performance degrades unacceptably (only in IE8 standards rendering mode). The CP

相关标签:
6条回答
  • 醉酒成梦
    2021-02-05 10:28

    Tables are really expensive with rendering, hence why people say you should never use them unless they are meant for tabular data. If you give the table widths, normally it speeds up the rendering time.

    In your case I see one improvement that can be made. Instead of adding event handlers to every row, use event bubbling and catch the mouse movements on the table level. This means instead of 50 event handlers being adding for mouseover, you add one.

    One way of doing it: 

    <!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>
   <style type="text/css">
      table, tr, td{ border-collapse: collapse; border: 1px solid black; }        
      tr.high td{ background-color: #FF0; }
    </style>
  </head>
  <body>
    <div id="out">~</div>
    <script type="text/javascript">

var numRows = 100;
var numCols = 50;
function renderTable() {
    var a = [];
    a.push('<table id="myTable"><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 lastHiglight = null;
    var bigTable = document.getElementById("myTable");
    bigTable.onmouseover = function (e) {
        e = e || window.event;
        var elm = e.target || e.srcElement;
        var tag = elm.nodeName.toLowerCase();
        if (tag == "td") {
            if (lastHiglight) {
                lastHiglight.className = "";
            }
            lastHiglight = elm.parentNode;
            lastHiglight.className = "high";
        }
    }
    var reTags = /(td|tr|tbody)/i;
    document.body.onmouseout = bigTable.onmouseout = function (e) {
        e = e || window.event;
        var elm = e.target || e.srcElement;
        var tag = elm.nodeName.toLowerCase();
        if (!reTags.test(tag)) {
            if (lastHiglight) {
                lastHiglight.className = "";
            }
        }
    }
}

renderTable();
    </script>
    <p>Awesome Table</p>
 </body>
</html>

    Running Example

    0 讨论(0)
  • 忘了有多久
    2021-02-05 10:42

    While no explanation for the poor performance has been found, the behavior has been confirmed by other users (reducing the likelihood of an environmental issue).

    It seems it is a core issue in the way IE8 deals with <table> style manipulation, and I will file a bug with the IE team. I already created a forum post on the Internet Explorer Development Forum which didn't yield any results thus far: http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/2afa46aa-16bb-4e65-be38-a6de19b2b2e9

    There are however workarounds available for achieving a usable hover effect in IE8, the two most worth considering are:

    • Replace the <table> solution with <div> and <span> elements
    • Fake the hover effect by positioning a <div> element behind the transparent <table> as suggested by David Murdoch. A rudimentary proof of concept can be found at http://jsfiddle.net/YarnT/1/

    I will post any updates here in case I learn anything new, or get a response from the IE team.

    0 讨论(0)
  • 暖寄归人
    2021-02-05 10:48

    I know this might be a long stretch, but you might want to use firebug profiling on firefox and where the performance loss is.

    By "long stretch" I mean that the same issue might not be relevant to both browsers. I suggested a different browser because I know that firebug profiling isn't available on MSIE afaik, not because of any personal browser preferences.

    0 讨论(0)
  • 灰色年华
    2021-02-05 10:49

    The issue isn't confined to tables. I've seen similar issues with other elements on the page. Check out this example with buttons: Poor Performance with IE8 Standards

    Sure 500 buttons is excessive, but the same page renders perfectly using IE7 standards and in other browsers. I want to know what is causing this and how it can be fixed.

    0 讨论(0)
  • 日久生厌
    2021-02-05 10:54

    Stick with event-delegation and "table-layout:fixed;" and then try setting visibility:hidden on the rows that are not being displayed on the screen. When they are scrolled into view visibility:auto; them.

    Or better yet: detach the rows from the DOM when not in view and use a "buffer" row to maintain the scroll bar's height and scroll position (I recommend using jQuery's detach() method).

    0 讨论(0)
  • 猫巷女王i
    2021-02-05 10:55

    Realistically, with IE, you are better off constructing the entire HTML and plopping it in at once with style="" or the classes you are looking for. If you can handle the regressions, render X rows per table and multiple tables to 'stream' in changes.

    0 讨论(0)
 看不清?
提交回复
热议问题