Чтение и замена текста в HTML вызывает высокую нагрузку на процессор

Question

У меня проблема с высокой загрузкой процессора на веб-сайте, где я хочу заменить некоторый текст ссылками.

Сценарий загружается в конец тела.

Это нормально работает, когда на странице нет видео. Но если есть встроенные видео, загрузка процессора выше 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); 

Любые идеи, что я могу сделать по этому поводу? Спасибо заранее.

Answer 1

Как уже упоминалось ранее, строительство DOM в цикле - очень плохая практика. Гораздо лучше создать documentFragment и прикрепить его к DOM. Взгляните на пример https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment.