在回圈內創建動態HTML元素時的優化問題-有解無憂

我有一組預設的單詞，我想在每個條目后隨機化和映射空格，然后拆分為單個字符，然后將這些字符作為 individual 放入 html 元素中<div>。到目前為止，我有這個確實有效，但它變得有點慢，超過了150-200 個字符，我猜這是可以理解的。我需要每個角色都是自己的<div>，所以我不確定如何優化它。

我有一個類似于下面代碼片段的演算法結構。在回圈中渲染大量動態 HTML 元素時如何避免優化問題？

let container = document.getElementById('container');
let arr = ['one', 'two', 'three', 'four'];
let currentIndex = arr.length;
let current__text = [], count, randomIndex;

while (currentIndex != 0) {
  randomIndex = Math.floor(Math.random() * currentIndex);
  --currentIndex;
  [current__text[currentIndex], arr[randomIndex]] = [
    current__text[randomIndex], arr[currentIndex]];
}
  
arr = arr.slice(0, count).map(e => e   ' ').join('').split('');

arr.pop();

for (item of arr) {
  container.innerHTML  = `<div >${item}</div>`;
}

#container{}

.char{}

<div id="container"></div>

uj5u.com熱心網友回復：

您開發的大多數演算法對結果沒有影響。printArray()我開發的方案中的方法和你現在做的一樣。

我將@Teemu指定的更改添加到程式中并比較了結果。正如@Teemu指出的那樣，方法對于財產Element.insertAdjacentHTML()來說非常快。Element.innerHTML下面是運行時的比較：

Duration (insertAdjacentHTML): 2.7000000029802322 milliseconds
Duration (innerHTML):          85.70000000298023  milliseconds

注意：為了比較Element.insertAdjacentHTML()方法和Element.innerHTML屬性的運行時差異，我將 none 分配給類樣式的display屬性.char，因此不會在螢屏上列印元素。

let container = document.getElementById('container');
let firstArray = [], secondArray = [];

function measurePerformance(method, mode, array){
  var startTime = performance.now();
  method(mode, array);
  var endTime = performance.now();
  console.log(`Duration (${mode}): ${endTime - startTime} milliseconds`);
}

function generateArray(firstArray, secondArray){
  for(let i = 100 ; i > 50 ; --i){
    firstArray.push(i);
    secondArray.push(i);
  }
}

function printArray(mode, array){
  array = array.map(e => e   ' ').join('').split('');
  
  if(mode === "insertAdjacentHTML"){
    for(item of array){
      container.insertAdjacentHTML("beforeend", `<div >${item}</div>`);
    }
  }
  else if(mode === "innerHTML"){
    for(item of array){
      container.innerHTML  = `<div >${item}</div>`;
    }
  }
}

generateArray(firstArray, secondArray);
measurePerformance(printArray, "insertAdjacentHTML", firstArray);
measurePerformance(printArray, "innerHTML", secondArray);

.char{
  background-color: yellow;
  border: 1px solid gray;
  margin-bottom: 2px;
  display: none;
}

<div id="container"></div>

uj5u.com熱心網友回復：

要創建您需要的字母：

arr = ['one', 'two', 'three', 'four'];

const output = arr.map(
    (word) => word.trim().split('')
);

console.log(output)

我沒有在我的答案中添加 HTML 部分。如果您需要幫助，請告訴我。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/417248.html

標籤：

上一篇：如何使用四個數字來決定一個唯一的數字ID？

下一篇：單源最短路徑問題的演算法