【发布时间】：2017-11-01 03:23:42
【问题描述】：
我必须动态构建一个包含 +450 行/+90 列的表，并在 Internet Explorer 中显示它。在过去的两天里，我一直在进行大量优化，最终将表格行的集合创建为一个非常长的字符串，并将其分配给表格的 tBody 的 innerHTML。
它在 Chrome/Mozilla 中运行良好，重排大约需要 0.2 秒，但在 Internet Explorer 中非常慢。渲染大约需要 4 秒（我说“大约”，因为如果控制台打开（用于时间测量），渲染需要 19 秒）。另一个问题是 IE9 及以下版本甚至不支持 innerHTML。所以问题是：在 IE9 中尽可能快地呈现大量 HTML 的最快方法是什么？
HTML 示例：
<tr class="data-row" ><td class="hidden" style="width: -21px; padding:
10px;">"1"</td><tdclass="structureCatagory" style="width: 119px; padding:
10px;">"0381"</td><td class="structureCatagory" style="width: 139px;
padding: 10px;">"Some text"</td><td class="structureCatagory"
style="width: 139px; padding: 0px;"><img src="/Content/Images/info.png"
onclick="Interface.OnImageClicked($(this))" ></td>...
以此类推，总共 4178521 个字符。
Javascript：
function Update() {
var displayData = Model.GetData();
if (displayData == undefined || displayData.length == 0)
return false;
var rows = "", len = displayData.length;
for (var i = 0; i < len; i++) rows += GetRow(displayData[i]);
//until here it's very fast
GlobalQueries.dataTableBody[0].innerHTML = rows;
//^ this line takes alot of time
return true;
}
提前致谢！
编辑：表格本身：
<div class="grid">
<table class="fixed">
<tbody></tbody>
</table>
</div>
<style>
.grid { margin-top: 240px; margin-left: 10px; }
.grid td, .header-row td { border: 1px solid black; }
table.fixed { table-layout: fixed; }
</style>
【问题讨论】：
-
您是否尝试过 a) 从空表开始 b) 将属性/内容分配给个人
<td>s？ -
您可以尝试修复 table-layout，我认为通常它会等待整个表格加载，然后再渲染，与固定布局一样，它会在加载时渲染，除了我建议使用插件，这样您就可以对其进行分页，因为没有人希望看到有 450 行和 90 列的表格！
-
@ChrisG 一次分配每个单一属性可能需要 43,338 倍的时间，因为它每次都必须重排。 @Pete 它的布局已经固定。我想它已经一次性渲染了，因为与 DOM 的唯一联系是在
GlobalQueries.dataTableBody[0].innerHTML = rows -
it takes about 4 seconds to render ... for a total of 4178521 characters让我反悔一下：IE needs almost 4 seconds to parse and render a 4MB html-file。还有第二个小提示：仅仅因为你没有看到一个元素并不意味着浏览器不必在每次滚动时都渲染它。 450000+ DOM 节点在每个滚动条上呈现。也许它在屏幕外，也许它被某事重叠。否则，可能会重新定位......浏览器只“知道”节点的可见内容以及屏幕上的位置，渲染后节点。 -
很抱歉我用错了几次词...我的英语还不够完美。在所有三个浏览器中测试后，我这样理解：首先，一切都在不到一秒的时间内顺利进行（页面加载、js 执行、4178521 个字符的长字符串被构建）。然后是
GlobalQueries.dataTableBody[0].innerHTML = rows部分。现在需要对其进行解析：在 chrome/mozilla 中需要 200 毫秒，但在 Internet Explorer 中需要 4 秒。您所说的“渲染”（在每个滚动条上）是在那之后发生的，并且在所有三个浏览器中都非常顺利地发生。问题是——
标签： javascript html internet-explorer internet-explorer-9 reflow