javascript - InnerHTML 慢？

Question

我正在使用 javascript 将 160 行添加到包含 10 列的表格中。如果我这样做:

var cellText = document.createTextNode(value);
cell.appendChild(cellText);
row.appendChild(cell);

渲染根本不需要时间，但如果我切换到 cell.innerHTML = value，渲染速度会明显变慢。我们是否有另一种选择可以更快地渲染单元格内的 HTML 元素？

顺便说一句，问题似乎仅出现在 IE 上(更具体地说是 IE 11)。在 Google Chrome 中没问题。

我正在使用 .NET AjaxToolkit。

Answer 1

innerHTML 速度很慢，因为它必须在值中查找 HTML 标签，并将其解析为 DOM 节点。如果您只是插入不包含任何 HTML 标记的纯文本，请改用 textContent。

如果您需要在单元格中创建复杂的 HTML，使用 innerHTML 可能是最快的方法，因为优化 HTML 解析一直是浏览器设计者的首要任务。但如果 HTML 很简单(例如只有几个元素)，那么用 Javascript 创建它们可能会更有效。您需要对特定应用程序进行基准测试，以确定盈亏平衡点在哪里。