Javascript Html文本替换会使浏览器冻结一段时间，如何避免冻结？

该项目是处理和可视化高维数据。我们需要在数据加载到网站后替换一些文本。我发现stackoverflow上的一些线程或多或少都使用相同的解决方案：

这个解决方案工作得很好，它用html代码（例如“word”）精确地替换搜索文本（regex）。或 问题是我们必须替换10000多个单词，这需要一段时间。时间不是问题，但是浏览器在这个过程中会冻结，你什么都做不了。我们如何避免冻结浏览器？我读过关于图像和异步函数的延迟加载，但我不知道如何将其应用于文本替换。谢谢你的帮助

---

编辑：这里是一个

每当您直接操作DOM时，它通常会很慢，因为浏览器可能会尝试在更新时进行文档回流

为了防止出现这种情况，一种方法是从DOM中删除该部分，然后在分离该部分时对其进行操作，完成后只需重新附加到DOM，浏览器只需进行一次文档回流

下面是一个简单的例子，我用随机

X

s创建了大约100000个字符的虚拟HTML，然后单击按钮，它将用

B

（粗体）标记包围所有

X

。正如你将看到的，当你点击按钮时，它几乎是即时的

const d=document.createElement（'div'）；
常数a=（新数组（100000））.fill（“uz”）；
对于（设l=0；l{
d、 删除（）；
d、 innerHTML=d.innerHTML.replace（/X/g，'X'）；
文件.正文.附件（d）；
});
Bold X
在操作DOM时，有一件事会显著降低速度，那就是文档回流。要解决这个问题，您可以尝试分离正在解析的部分，然后重新附加。@Keith有一个很好的建议，但我看您做不到。也许React能帮上忙。我不知道一旦元素从DOM中卸载，浏览器是否能够执行异步任务。@DebarghaRoy我发布了一个示例，卸载的DOM元素是完全有效的，Javascript的垃圾收集器处理这个问题没有问题，即使你想使用异步方法。.嗨，Keith，首先感谢你的回答。我已经学到了一些新东西。所以在“returnthis.nodeValue.replace（'-9o0-9909'，'thenewstring'）；“我应该删除”this.nodeValue“然后重新连接它”一行之前说？在我发布的函数中，我是如何做到这一点的？我是新手，DOM的事情现在对我来说很复杂。我很高兴我找到了一个有效的解决方案：）或者我必须重写整件事吗？@Luz很难说在你的情况下具体怎么做，因为你没有展示你的html。但无论你做什么，概念都是一样的。如果您想使用jQuery，请改用detach方法，因为它更类似于纯DOM remove。html没有那么重要。我们有一个熟悉正则表达式的家伙，他说我们可以用正则表达式抓住一切。因此，重要的是能够使用正则表达式并用html代码替换它，然后还能够使用“body:not（script）：not（.dot replace）：not（textarea）”。所以要排除你不想替换的东西。所以也许我可以把我发布的功能分开。然后可能会尝试以某种方式删除“this.nodeType”，在删除之前保存它，以便我可以替换这些内容。我该如何把它装回正确的位置呢？@Luz。为了放回正确的位置，我将使用另一个div作为容器，您可以随意添加和删除。所有jQuery代码在分离时仍能工作。如果执行此操作后，事情仍然锁定，您可以使用一些异步循环拆分操作，但首先我要看看这样做是否足够快。很抱歉这个愚蠢的问题，但我不知道您对div的意思：（在这里，我创建了一个JSFIDLE，但我不知道如何创建异步循环。我尝试与函数异步，但html内容消失了，因为replaceWIth得到的是承诺作为答案，而不是被替换的节点。该死，我没想到替换html会变得如此复杂：(
 $('body :not(script)').contents().filter(function() {
  return this.nodeType === 3;
 }).replaceWith(function() {
  return this.nodeValue.replace('-9o0-9909','The new string');
 });