Question

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

代码在这里：

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

谢谢

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

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

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

查找尽可能多的数据到红色跨度中。这是不同字母的整个连续子序列。
在网络工作者中执行该功能（会花费相似的时间，但至少不会冻结浏览器）。

回流/重绘问题？优化应用程序太慢了

1 个答案: