回流/重绘问题？优化太慢的应用答案

【问题标题】：Reflow/repaint issues? Optimize app that is way too slow回流/重绘问题？优化太慢的应用
【发布时间】：2026-01-18 07:10:01
【问题描述】：

好的，所以我遇到了我认为是优化问题。我编写了一个简短的应用程序，它从两个字段中获取数据，逐个字符地将它们分开并将它们相互匹配，突出显示差异。问题似乎是因为该函数循环遍历并且不仅一次打印每个字符，而且一次更改一个新跨度中的颜色，因此大型数据条目存在严重的瓶颈。甚至五个句子中的一个就可以了，但是当您阅读一整页文本时，事情就会陷入困境，在某些情况下会崩溃。我试图查找一些重绘/重排的修复程序，但我之前没有遇到过这个问题，也不太了解。欢迎任何提示。

代码在这里：

HTML：

    <!DOCTYPE html>
<html>
  <head>
    <title>Data Comparison</title>
  </head>
  <body>
    <p><strong>Insert text into fields one and two and press 'Compare'. Matching data is green non-matching is red. </strong></p>
    <div class="userField">
      <h1>Input Field 1</h1>
      <textarea id="textAreaOne" rows="30" cols="65"></textarea>
    </div>

    <div class="userField">
      <h1>Input Field 2</h1>
      <textarea id="textAreaTwo" rows="30" cols="65"></textarea>
    </div>
    <div id="submission">
    <button onclick="compare(textAreaOne);">Compare</button>
    </div>
    <div id="divOne"> 
      <h1 id="titleOne">Output Field 1</h1>
      <p id="outputOne"></p>
    </div>
    <div id ="divTwo">
      <h1 id="titleTwo">Output Field 2</h1>
      <p id="outputTwo"></p>
    </div>
  </body>
</html>

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;
}

JS：

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";
}

https://codepen.io/Axfinger/pen/QxvbqM?editors=0010

谢谢

【问题讨论】：

我已经重构了代码，让绿色文本在css中嵌入一次，大大加快了匹配速度。不过，这些错误仍然需要很长时间。

标签： javascript html css repaint reflow

【解决方案1】：

您的代码运行缓慢的主要原因是您不断修改每个字母的 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;

请注意，为了清楚起见，我省略了部分代码。

也就是说，如果您还需要更快的速度：

查找以将尽可能多的数据拟合到红色跨度中。那是不同字母的整个连续子序列。
在 webworker 中执行函数（将花费类似的时间，但至少不会冻结浏览器）。

【讨论】：

感谢您的评论。我还收到了一些关于这个问题的有用建议，其中最好的就是以语法荧光笔为例。这绝对是有帮助的，我这可能是在优化之前需要摆弄的那种东西。再次感谢，我暂时将其标记为答案。