Question

例如，我有以下简单的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=edge HTML文档模式为在独立IE浏览器或托管WebBrowser control的自定义应用程序中加载的任何解决方案提供奖励。

已更新，相应的IE bug reported刚刚关闭为“无法修复”。

Answer 1

为什么不将数据分解并将其存储在数组或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>

Answer 2

使用鼠标或 SHIFT + ARROW 选择一个字符然后通过点击 DELETE 删除将在IE中将编辑速度恢复为正常。

Answer 3

一种解决方案是不对整个区域（案例中的正文部分）使用contenteditable = true。您可以确定身体的可见区域，为相应区域创建“Range”，并将其暂时包含在contenteditable = true的元素中。

但是，根据更详细的要求，这种方法可能不合适。例如，我想到的一个问题是在仅滚动几行后尝试保持插入位置。

Answer 4

经过大量的盲目射击后，我想我发现了一些可能有用的东西：

将大块HTML复制到剪贴板
将其粘贴到可编辑区域内的任何内容
Voilà，编辑时的滞后似乎已经消失了

据推测，这两个步骤都可以通过编程方式完成。

Answer 5

在所有浏览器中，元素越多，它们就越慢。导致问题的另一个原因是内存泄漏。大多数大型框架（如角度或敲除）会导致内存泄漏。您可以通过在内存分析器中运行内存快照来分析这些内容。

至于你真正希望保持千分之一的元素，我可以。您可以根据需要添加和删除元素，就像好的连续滚动条一样。

Answer 6

我现在没有IE来检查性能，无论如何在Chrome（Ubuntu）这确实有帮助。我只是从根元素中删除contenteditable并将其添加到每个span。

这使内容编辑速度非常快。

您可以通过以下步骤检查这是Chrome：

（元素面板）选择编辑器的根节点（body属性为contenteditable）
进入devtools javascript控制台
执行此代码段：

段：

var nodes = $0.querySelectorAll('span');
$0.setAttribute('contenteditable', false)
for (var i = 0, max = nodes.length; i < max; i++) {
    nodes[i].setAttribute('contenteditable', true);
}

Answer 7

你说你不想使用分页因为......

我无法看到AJAX /分页如何为可编辑内容提供帮助。实际上，它是一个类似于Word的全功能编辑器。例如，它有一个上下文拼写检查器，它取决于光标周围的单词。或者用户如何选择跨越多个页面的文本块。

但是，您仍然可以使用分页（或类似的东西），同时仍然允许这些功能。基本上，您只需要加载当前相关的行。

我知道Objective-C，这个问题与UITableViewControllers非常相似。他们通过显示当前正在查看的表元素并解除其他元素来解决问题。在您的情况下，您可能希望将其信息存储在JavaScript数组中。

我要采用的方法是创建loadItem函数和unloadItem函数。 loadItem将获取项目的内容并将其添加到正文中，unloadItem会将内容复制回数组并删除项目（可能通过设置样式visibility:hidden，但我还没检查过它是否有效。

查找当前相关的行：

屏幕上的任何内容
选择中的任何内容
应该显示的任何其他内容

当行未被选中时，离开屏幕或其他任何不再需要它们的行为，请拨打unloadItem()并传递行号/标识该行的任何内容。

编辑：这就是我的意思：

＆＃13;

for(var count=0;count<1000;count++){
  document.getElementById("main").innerHTML+="<span id='item"+count+"'>[SOME FIELD "+count+"]</span>";
}

function loadItem(number){
  document.getElementById("item"+number).style.visibility="visible";
}
function unloadItem(number){
  document.getElementById("item"+number).style.visibility="hidden";
}

unloadItem(1);
unloadItem(2);
loadItem(1);

// I didn't have time to implement the rest. Basically, when a user is not viewing a line, it should be hidden. When they scroll to view it, it should show up again. I haven't tested this yet, but it should work.

// There is supposed to be a bit of slowness when it loads, it is creating all the content and that is normal.

＆＃13;

<!DOCTYPE html>
<html>
<head>
</head>
<body contenteditable="true" id="main">
</body>
</html>

＆＃13;

Answer 8

我认为您应该使每个span标记都可编辑，并且一次显示有限的跨度数。这有助于更好地加载您的网页。和内容将很容易编辑。
另外你可以做editableContent =＆＃34; true＆＃34;如果用户想要同时编辑多个span标记。这有点令人惊讶，因为如果你的文件包含200k大小，有人很少会同时编辑多个内容。每当用户点击编辑整个网页时，使用简单的基本html布局创建弹出窗口，并让用户更改他想要的任何内容。它将在基本布局弹出窗口中正确加载。

可编辑的HTML内容在很大时非常滞后

8 个答案: