我的函数加载时间太长

时间:2018-07-16 03:57:18

标签: javascript

我有一个将文本区域中的文本添加到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。

1 个答案:

答案 0 :(得分:4)

每次分配给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>";