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

问题描述：

我有一个网站的CPU负载过高的问题，我想用链接替换一些文本。在HTML中读取和替换文本会导致高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);

任何想法我可以做些什么呢？预先感谢您。

改变DOM需要大量的CPU，你应该限制它。将.innerHTML放入循环中会使网站的DOM刷新多次。考虑使用一个字符串并在每次迭代中添加您的HTML，然后在循环外使用innerHTML –

答

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

谢谢大家。我在这里有点失落。我知道只有在页面加载后才能完成更改。但我认为我是这么做的。我只是循环访问我的csv文件中的行。 – davinci

为什么脚本在页面加载后仍然运行？ – davinci

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

相关推荐