在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);

任何想法我可以做些什麼呢？預先感謝您。

來源

2016-10-22 davinci

改變DOM需要大量的CPU，你應該限制它。將.innerHTML放入循環中會使網站的DOM刷新多次。考慮使用一個字符串並在每次迭代中添加您的HTML，然後在循環外使用innerHTML –

正如@criz已經提到的那樣，在循環中構建DOM是非常糟糕的做法。創建documentFragment並將其附加到DOM會好得多。看看https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment有一個例子。

來源

2016-10-22 08:54:12 vadimk

謝謝大家。我在這裏有點失落。我知道只有在頁面加載後才能完成更改。但我認爲我是這麼做的。我只是循環訪問我的csv文件中的行。 – davinci

爲什麼腳本在頁面加載後仍然運行？ – davinci

在HTML中讀取和替換文本會導致高CPU負載

回答

相關問題