例如，我有以下简单的 HTML 页面，其中 <span>[SOME FIELD]</span>正在重复多次以弥补大约200K的文件大小:
<!DOCTYPE html>
<html>
<head>
</head>
<body editableContent="true">
<span>[SOME FIELD]</span>
<span>[SOME FIELD]</span>
...
<span>[SOME FIELD]</span>
</body>
</html>
随着内容的增长，编辑体验变得非常滞后。几乎不可能输入或编辑内容。
这是一个 complete repro case 。要明白我的意思，只需将光标移动到可编辑内容的末尾并尝试编辑。 它在 IE 和 Chrome 下滞后很长时间，几乎无法输入。 不过，它在 Firefox 下运行良好。
问题:我需要让它在 IE 下运行得相当快。
到目前为止，我已经接近 IE8 仿真(使用 <meta http-equiv="X-UA-Compatible" content="IE=8"> )，所以 this工作(在 IE 下)。
但是，我需要支持IE=edge ， 也。任何关于如何实现这一目标的建议将不胜感激。 IMO，这是一个错误(我提交了 here for IE 和 here for Chrome )，但我正在寻找任何解决方法。
已更新，为在独立 IE 浏览器或托管自定义应用程序中加载时有效的任何解决方案提供赏金 WebBrowser control , 使用 IE=edge HTML 文档模式。
已更新，对应IE bug reported刚刚关闭为“不会修复”。
最佳答案
为什么不分解数据并将其存储在数组或 Json 对象中，一次只读取一部分，并在用户滚动或移动内容时更新。这样，在任何时间点都只会处理一小部分。如果你使用 Jquery，你可以从类引用中获取 id。如果你不想使用 Jquery，你可以用原始 Javascript 编写一个类标识符函数。下面是粗略的，但你可以理解。
<!DOCTYPE html>
<html>
<head>
</head>
<body editableContent="true">
<span id="item1" class="handle_items">[SOME FIELD]</span>
<span id="item2" class="handle_items">[SOME FIELD]</span>
...
<span id="item-n" class="handle_items">[SOME FIELD]</span>
</body>
</html>
<script>
$(function(){
var arrayData = [];
$(".handle_items").mouseover(function() {
var identVar = $( this ).prop('id');
fillHtml(identVar);
});
function fillHtml(identVar) {
$("#" + identVar).html(arrayData[i]);
}
});
</script>
关于javascript - 可编辑的 HTML 内容在很大时非常滞后，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24888187/