innerHTML 아이디어를 사용하여 많은 양의 html 요소를 추가하는 가장 좋은 방법은 무엇입니까?

Question

크롬에는 없지만 Firefox에서는 아약스 요청을 할 때마다 브라우저가 정지됩니다.

여기

아약스 요청

는 길이가 75,000 개 이상의이다 거대한 HTML을받을 ... 거래입니다.

var html = data.replace(/\r?\n|\r/g, '').replace(/\s{2,}/g, ' ') 

나는 충분하지 않다고 55,000있어보다 :

<div> ... <table> ... etc ... </table> ... </div> 

그래서 더 나은 뭔가를 얻기 위해 대체 사용하기 시작.

그래서 지금까지 검색을 해왔지만 지금까지는 도움이 될만한 것이 하나도 없습니다. 여기

내가 시도 내용은 다음과 같습니다

1.

asyncInnerHTML(html, function(fragment){ 
    $(tab).get(0).appendChild(fragment); // myTarget should be an element node. 
}); 

2.

var node = document.createTextNode(html); 
$(tab).get(0).innerHTML = node; 

3.

$(tab).get(0).innerHTML = html; 

4.

$(tab).append(html); 

5.

$(tab).html(html); 

빨리 유일한 것은 무엇 자바 스크립트가 내가 필요하기 때문에 HTML 렌더링이 아니라, 내가 원하는되지 않은 것을 물론, nodeContent를 추가 두 번째, 텍스트/문자열 형식의 HTML.

누군가가 나를 도울 수 있기를 바랍니다.

어쨌든, 감사합니다.

Answer 1

Firefox 용 Skype Toolbar는 웹 페이지에서 전화 번호를 감지하고 Skype 데스크탑 응용 프로그램을 사용하여 전화를 걸 때 사용할 수있는 클릭 가능한 단추로 다시 렌더링하는 확장 기능입니다.

그래서 HTML이 렌더링되면 skype 확장 프로그램이 내 코드에서 똥을 찾아 브라우저가 잠시 멈추도록 시도합니다.

도움 주셔서 감사합니다.

Answer 2

다음은 표 HTML의 행을 구문 분석 한 다음 한 번에 하나씩 추가하여 HTML을 구문 분석하는 동안 브라우저가 숨을 쉬는 시간을 늘리는 코드입니다. 이 구문 분석 로직은 HTML에 고유하고 HTML에 대한 몇 가지 가정을합니다 :

function addLargeHTML(parent, h) { 
    var d = document.createElement("div"); 
    var pieces = extractRows(html); 
    d.innerHTML = pieces.core; 
    var tbody = $(d).find("tbody"); 
    $(parent).append(d); 
    var cntr = 0; 
    function next() { 
     if (cntr < pieces.rows.length) { 
      tbody.append(pieces.rows[cntr]); 
      ++cntr; 
      setTimeout(next, 1); 
     } 
    } 
    next(); 
} 

function extractRows(h) { 
    var body; 
    var h = h.replace(/<tbody>(.*?)<\/tbody>/, function(match, p1) { 
     body = p1; 
     return "<tbody></tbody>"; 
    }); 
    var rows = body.match(/<tr.*?<\/tr>/g); 
    return {core: h, rows: rows}; 
} 

당신은 (이하 "행으로 행 추가"버튼을 선택합니다)가이 jsFiddle에서 작업을 볼 수 있습니다 http://jsfiddle.net/jfriend00/z7jn4p12/.

파이어 폭스에서 원래 문제를 재현 할 수 없기 때문에 내가 보았던 것과 말하지 않은 것을 고칠 수 있는지 여부를 알 수 없습니다. 그러나 HTML을 더 작은 조각으로 나눕니다. 정말 문제가된다면 도움이 될 것입니다.