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로드가 높습니다.

답변

관련 문제