读取和替换HTML中的文本会导致高CPU负载

Read and replace text in HTML causes high CPU load

本文关键字:CPU 负载 文本 替换 HTML 读取      更新时间:2023-09-26

我在一个网站上有一个高CPU负载的问题,我想用链接代替一些文本。

脚本在正文末尾加载。

当页面上没有视频时,此操作正常工作。但是如果像这样嵌入视频,CPU负载就会超过50%。如果我在多个文件中使用此选项,Firefox会崩溃。

<p><video width="320" height="240" class="mediaelement" autoplay="autoplay" src="video.mp4" controls="controls"><a href="video.mp4">resources/video.mp4</a></video></p>

我发现问题在这里,特别是从csv的读出。如果我只是用固定的数据替换文本,它也可以工作。

    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", "data.csv", false);
    rawFile.overrideMimeType('text/xml; charset=iso-8859-1');
    rawFile.onreadystatechange = function ()
    {
    if(rawFile.readyState === 4)
    {
      if(rawFile.status === 200 || rawFile.status == 0)
      {
          var allText = rawFile.responseText;
          allText = allText.split("'n"); 
          var sizedata = Object.size(allText); //Number of  entries
          var sizedata =  sizedata -1; //Excel +1 
          //alert("Debug: " + sizedata);
          var i = 0;
          while (i < sizedata)
              {
                  var word = allText[i].split(";");
                  var wordToDefine = word[0];
                  var wordDefinition = word[1];
                  var wordToReplace = wordToDefine
                  var replaceItem = new RegExp(wordToReplace,"g");
                  document.body.innerHTML = document.body.innerHTML.replace(replaceItem, " <a href='data.html' target='_self'><span style='color:green' title='WORD'>WORD</span></a>");  
                  i = i+1;
              }
      }
    }              
    }
    rawFile.send(null);

你知道我该怎么做吗?

正如@criz已经提到的,在循环中构建DOM是一种非常糟糕的做法。最好是创建documentFragment并将其附加到DOM。看一下https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment,有一个例子: