Javascript 回流/重新喷漆问题？优化应用程序太慢了

好吧，我遇到了一个我认为是优化的问题。我写了一个简短的应用程序，从两个字段抓取数据，一个字符一个字符地将它们分开，并将它们相互匹配，突出显示差异。问题似乎在于，由于该函数循环使用，并且不仅一次打印一个字符，而且在一个新的范围内一次更改一个字符的颜色，因此对于大数据条目存在严重的瓶颈。即使是五句话中的一句也可以，但当你读到一整页文字时，事情就会陷入困境，有时甚至会崩溃。我曾尝试查找一些修复重新绘制/回流的方法，但我以前没有遇到过这个问题，也不太了解它。欢迎任何提示

代码如下：

HTML:

JS:

const fieldOne=document.querySelector（“textAreaOne”）；
const fieldTwo=document.querySelector（“#textAreaTwo”）；
函数比较（）{
document.querySelector（“#outputOne”）.innerHTML=“”；
document.querySelector（“#outputwo”）.innerHTML=“”；
document.querySelector（“#divOne”）.style.visibility=“hidden”；
document.querySelector（“#divTwo”）.style.display=“hidden”；
让dataOne=[]；
设arrOne=fieldOne.value；
设温度=arrOne.split（“”）；
数据一推（温度）；
设dataTwo=[]；
设arrTwo=fieldTwo.value；
设TENTWO=arrTwo.split（“”）；
数据二、推送（WO）；
如果（fieldOne.value.length代码运行缓慢的主要原因是因为您不断修改每个字母的innerHtml

即使有几个段落，这种方法也要快得多：

[...]

let outOne = '';
let outTwo = '';

if (fieldOne.value.length <= fieldTwo.value.length){
  for (var i = 0; i<fieldOne.value.length; i++){
    if (dataOne[0][i] === dataTwo[0][i]){
      outOne += dataOne[0][i];
      outTwo += dataTwo[0][i];
    } else {
      outOne += "<span style='color:red'>" + dataOne[0][i] + "</span>";
      outTwo += "<span style='color:red'>" + dataTwo[0][i] + "</span>";
    }  
  }
  if (fieldOne.value.length < fieldTwo.value.length){outTwo += "...";}
}

[...]

outputOne.innerHTML = outOne;
outputTwo.innerHTML = outTwo;

[…]
放出一个=“”；
放出两个=“”；
如果（fieldOne.value.length我对代码进行了重构，使绿色文本在css中嵌入一次，这大大加快了匹配速度。不过，错误仍然需要很长时间。感谢您的评论。我还收到了一些关于这一问题的有用建议，其中最好的建议是以语法高亮显示为例这绝对是有帮助的，我想这可能是在优化之前需要做一些修改的事情。再次感谢，我现在就把它作为答案。
body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 15px;
}

.userField {
  display: inline-block;
  width: 44%;
  margin: 15px;
  padding: 15px;
  background-color: lightgrey;
  border-radius: 13px;
  box-shadow: 3px 3px 3px slategrey;
}

#submission {
  text-align: center;  
}

#divOne {
  display: inline-block;
  margin: 15px;
  padding: 15px;
  width: 44%;
  word-wrap: break-word;
  background-color: lightgrey; 
}

#divTwo {
  display: inline-block;
  background-color: lightgrey;
  width: 44%;
  word-wrap: break-word; 
  margin: 15px;
  padding: 15px;
}

#titleOne {
  background-color: white;
  width: 240px;
  border-radius: 30px;
  padding: 6px;
}

#titleTwo {
  background-color: white;
  width: 240px;
  border-radius: 30px;
  padding: 6px;
}

const fieldOne = document.querySelector("#textAreaOne");
const fieldTwo = document.querySelector("#textAreaTwo");


function compare(){
  document.querySelector("#outputOne").innerHTML = "";
  document.querySelector("#outputTwo").innerHTML = "";
  document.querySelector("#divOne").style.visibility = "hidden";
  document.querySelector("#divTwo").style.display = "hidden";

  let dataOne = [];
  let arrOne = fieldOne.value;
  let temp = arrOne.split("");
    dataOne.push(temp);
  let dataTwo = [];
  let arrTwo = fieldTwo.value;
  let tempTwo = arrTwo.split("");
    dataTwo.push(tempTwo);

  if (fieldOne.value.length <= fieldTwo.value.length){
    for (var i = 0; i<fieldOne.value.length; i++){
      if (dataOne[0][i] === dataTwo[0][i]){
 document.querySelector("#outputOne").innerHTML += "<span style='color:green'>" + dataOne[0][i] + "</span>";
 document.querySelector("#outputTwo").innerHTML += "<span style='color:green'>" + dataTwo[0][i] + "</span>";
      } else {
        document.querySelector("#outputOne").innerHTML += "<span style='color:red'>" + dataOne[0][i] + "</span>";
        document.querySelector("#outputTwo").innerHTML += "<span style='color:red'>" + dataTwo[0][i] + "</span>";
     }

    }
    if (fieldOne.value.length < fieldTwo.value.length){document.querySelector("#outputTwo").innerHTML += "<span>...</span>";}
  } 

  else {
    for (var i = 0; i<fieldTwo.value.length; i++){
      if (dataOne[0][i] === dataTwo[0][i]){

 document.querySelector("#outputOne").innerHTML += "<span style='color:green'>" + dataOne[0][i] + "</span>";
 document.querySelector("#outputTwo").innerHTML += "<span style='color:green'>" + dataTwo[0][i] + "</span>";
      } else {
         document.querySelector("#outputOne").innerHTML += "<span style='color:red'>" + dataOne[0][i] + "</span>";
        document.querySelector("#outputTwo").innerHTML += "<span style='color:red'>" + dataTwo[0][i] + "</span>";
      } 
    }
 if (fieldTwo.value.length < fieldOne.value.length){        document.querySelector("#outputOne").innerHTML += "<span>...</span>";}
  }

  document.querySelector("#divOne").style.visibility = "visible";
  document.querySelector("#divTwo").style.visibility = "visible";
}

[...]

let outOne = '';
let outTwo = '';

if (fieldOne.value.length <= fieldTwo.value.length){
  for (var i = 0; i<fieldOne.value.length; i++){
    if (dataOne[0][i] === dataTwo[0][i]){
      outOne += dataOne[0][i];
      outTwo += dataTwo[0][i];
    } else {
      outOne += "<span style='color:red'>" + dataOne[0][i] + "</span>";
      outTwo += "<span style='color:red'>" + dataTwo[0][i] + "</span>";
    }  
  }
  if (fieldOne.value.length < fieldTwo.value.length){outTwo += "...";}
}

[...]

outputOne.innerHTML = outOne;
outputTwo.innerHTML = outTwo;