Question

我有一个将文本区域中的文本添加到div的函数，但是我的问题是，当我添加500行以上时，需要花费很长的时间。当我添加3000或4000行时，它应该可以在一秒钟内工作，但是我不知道自己在做什么错。这是我的Add（）函数：

function add(){
    arraySearchTerms = document.getElementById("searchTerms").value.split('\n');
    for (var i = 0; i < arraySearchTerms.length; i++) {
        document.getElementById("keywords").innerHTML += '<div style="padding: 6px;border-bottom: #b5aeae; border-bottom-style: solid;border-bottom-width: 1px;"><span id="term'+ i +'">' + arraySearchTerms[i] + "</span><span style='float: right;'><img src='Red_Cross.png' height='15' width='11'/></span></div>";
    }   
}

感谢您的帮助。编辑：是图像吗？重量只有2k。

Answer 1

每次分配给innerHTML时，浏览器都必须清除并重新解析新的HTML字符串。与大多数工具相比，这是一个相对昂贵的操作，尤其是当内部有很多元素时。尝试首先提出该字符串，最后只分配给元素的innerHTML：

function add(){
  arraySearchTerms = document.getElementById("searchTerms").value.split('\n');
  let newKeywordHtmlStr = '';
  for (var i = 0; i < arraySearchTerms.length; i++) {
    newKeywordHtmlStr += '<div style="padding: 6px;border-bottom: #b5aeae; border-bottom-style: solid;border-bottom-width: 1px;"><span id="term'+ i +'">' + arraySearchTerms[i] + "</span><span style='float: right;'><img src='Red_Cross.png' height='15' width='11'/></span></div>";
  }
  document.getElementById("keywords").innerHTML += newKeywordHtmlStr;
}

您还应该考虑使用类，而不是给每个元素一个长的内联style属性，以及避免隐式创建全局变量：

function add(){
  const arraySearchTerms = document.getElementById("searchTerms").value.split('\n');
  let newKeywordHtmlStr = '';
  for (var i = 0; i < arraySearchTerms.length; i++) {
    newKeywordHtmlStr += '<div class="keyword"><span id="term'+ i +'">' + arraySearchTerms[i] + "</span><span><img src='Red_Cross.png' height='15' width='11'/></span></div>";
  }
  document.getElementById("keywords").innerHTML += newKeywordHtmlStr;
}

CSS：

.keyword {
  padding: 6px;
  border-bottom: #b5aeae;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.keyword > span:nth-child(2) {
  float: right;
}

如注释所述，如果arraySearchTerms的来源不可靠，并且您希望从arraySearchTerms剥离HTML标记以确保它不会引起任何问题，则可以致电{{3 }}，然后将其插入HTML字符串：

newKeywordHtmlStr += '<div class="keyword"><span id="term'+ i +'">' + arraySearchTerms[i].replace(/<(?:.|\n)*?>/gm, '') + "</span><span><img src='Red_Cross.png' height='15' width='11'/></span></div>";

我的函数加载时间太长

1 个答案: