0

我有一个页面,我们使用 Kendo UI 模板生成一堆 HTML 以插入 DOM。我们说的是 2+ 百万字节。所有其他浏览器将在大约 2 到 3 秒左右显示此内容。我已经避免使用 jQuery 并通过 document.getByElementId 调用设置 innerHTML。看起来最慢的部分是 IE 进行的 regexp.test 调用。IE 是否在确认所有开始/结束标签都匹配?如果是这样,有没有办法告诉 IE 跳过此检查以加快速度(即“相信我”)?我已经将所需的 HTML 减少到尽可能小,所以这实际上不再是一种选择。此外,我展示的数据甚至还不是最大的数据集,所以我知道它会变得更大。有没有人有任何想法?

更新:

这是我正在使用的当前代码:

 var resultHtml = kendo.template(templateHtml, { useWithBlock: false })(currentPage.ViewModel);
 resultHtml = resultHtml.replace(new RegExp("\>[\n\t ]+\<", "g"), "><"); // Get rid of whitespace
 document.getElementById("tblData").innerHTML = resultHtml;

在 IE 中,这最终需要大约 10 秒才能显示,并生成 250 万个字符。在 Chrome/FireFox/Opera 中,这大约需要 2 到 3 秒。

4

2 回答 2

1

实现类似“双缓冲”的东西。

创建一个不属于 DOM 的节点。

var offlineNode = $('<div />');

将您的内容渲染到离线节点。

offline.html(kendoTemplate(billionData));    

完成后,将整个节点移动到 DOM。

offlineNode.appendTo($('#a-place-in-dom'));

IE 无法猜测何时重新渲染页面,因此对 DOM 操作很敏感。每次进行大量 DOM 更改时,IE 都会变慢。

于 2013-09-19T15:24:22.450 回答
0

问题似乎不是现在添加到 DOM 的 HTML。它与我必须与 Kendo MVVM 进行 2 向绑定的所有对象有关。对于那个很抱歉!

于 2013-09-19T15:45:47.720 回答