jquery : 가장 빠른 DOM 삽입?

Question

많은 양의 HTML을 삽입하는 방법에 대해 나에게이 나쁜 인상을 받았습니다. 우리가 가진 가정하자 :

var html="<table>..<a-lot-of-other-tags />..</table>"

내가

$("#mydiv")

이전에 내가 한 일 같은

var html_obj = $(html); $("#mydiv").append(html_obj);

에이를 데려 가고 싶다는이 정확 일 jQuery에서 DOM 개체를 만들려면 html을 구문 분석하고 있습니까? 그럼이는 어디 선가 읽은 것입니다 (UPDATE : 내가 읽은 것을 의미는, jQuery를 전체 DOM 트리 손으로 만들 수있는 HTML 구문 분석 - 그것의 실제적인 권리?! )을, 그래서 난 내 코드 변경 :

을

$("#mydiv").attr("innerHTML", $("#mydiv").attr("innerHTML") + html);

느린가요? 그리고 이것은 이것이 다음과 동일하다는 것이 맞습니다 :

document.getElementById("mydiv").innerHTML += html? 아니면 jquery 백그라운드에서 추가로 값 비싼 물건을하고 있습니까?

대체 방법을 배우고 싶습니다.

Answer 1

innerHTML은 매우 빠르며, 많은 경우에 단지 설정 만하면됩니다 (나는 단지 추가 만 사용합니다).

"mydiv"가 이미 많이있는 경우 브라우저에서 해당 내용을 모두 구문 분석하고 다시 렌더링해야합니다 (이전에 있었던 모든 내용과 새로운 내용 모두).만 새로운 콘텐츠가 (불가피) 구문 분석됩니다, 이런 식으로

var frag = document.createDocumentFragment(); 
frag.innerHTML = html; 
$("#mydiv").append(frag); 

을 기존의 콘텐츠하지 않습니다 : 대신 "mydiv"에 문서 조각을 추가하여이를 방지 할 수 있습니다.

편집 : 내 나쁜 ... 나는 innerHTML 잘 문서 조각에 지원되지 않습니다 발견했습니다. 모든 노드 유형에서 동일한 기술을 사용할 수 있습니다. 예를 들어 루트 테이블 노드를 만들고 innerHTML을 다음과 같이 삽입 할 수 있습니다.

var frag = document.createElement('table'); 
frag.innerHTML = tableInnerHtml; 
$("#mydiv").append(frag); 

Answer 2

처음에는 각 방법으로 100 번 또는 1,000 번 수행하는 데 걸리는 시간을 표시하는 스크립트를 작성하십시오.

반복이 어떻게 든 최적화되지 않았는지 확인하려면 JavaScript 엔진에 대한 전문 지식이 없습니다. 매번 삽입 할 HTML을 변경하고 '0001'다음에 '0002', '0003 '테이블의 특정 셀에서.

Answer 3

피해야 할 대상은 무엇입니까? "나쁜 감정"은 엄청나게 모호합니다. "DOM이 느리다"는 말을 듣고 "DOM을 피하기"로 결정했다면 불가능합니다. innerHTML을 포함하여 페이지에 코드를 삽입하는 모든 방법은 DOM 객체가 생성되게합니다. DOM은 브라우저의 메모리에있는 문서를 나타냅니다. 은 DOM 개체를 만들려고합니다.

사람들이 "the DOM is slow"라고 말한 이유는 요소를 만들기위한 공식적인 DOM 인터페이스 인 document.createElement()으로 요소를 생성하는 것이 일부 브라우저에서 비표준 innerHTML 속성을 사용하는 것보다 느리기 때문입니다. 이것은 DOM 객체를 만드는 것이 좋지 않다는 의미는 아니며 DOM 객체를 만드는 데 이 필요합니다. 그렇지 않으면 코드가 전혀 처리하지 못합니다.

Answer 4

대체품에 관심이 있음을 언급합니다. DOM-related jQuery plugins의 목록을 보면 프로그래밍 방식으로 DOM 트리를 생성하는 데 사용되는 몇 가지 프로그램이 있습니다. 예를 들어 SuperFlyDom 또는 DOM Elements Creator을 참조하십시오. 그러나 다른 것이 있습니다.

Answer 5

DOM 조각 사용에 대한 대답은 올바른 경로에 있습니다. DOM에 일정하게 삽입하는 html 객체가 많은 경우 조각을 사용하여 속도가 향상 될 것입니다. 존 레식에 의해이 포스팅은 꽤 잘 설명 : http://ejohn.org/blog/dom-documentfragments/

Answer 6

은 다음을 시도해보십시오 허용 대답 포함

$("#mydiv").append(html); 

다른 답변, 느린 2-10x 가 있습니다 jsperf.

허용 된 대답은 IE 6, 7 에서 작동하지 않습니다, 8 당신이 때문에 IE의 버그로하는 <table> 요소의 innerHTML 설정할 수 없기 때문에 : jsbin.

Answer 7

DOM 트리에 추가 할 항목

가장 빠른 방법을 추가하는 가장 빠른 방법은, 하나의 DOM 조각에에 APPEND의 모든 버퍼는 DOM에 DOM 조각을 추가하는 것입니다.

내 게임 엔진에서 사용하는 방법입니다. 내가

파이어 폭스 4에서 ~ 40 배 화면에 두 번째 ~ 1000 개 항목을 렌더링 할 수 있어요이 객체를 사용

는

//Returns a new Buffer object 
function Buffer() { 

    //the framgment 
    var domFragment = document.createDocumentFragment(); 

    //Adds a node to the dom fragment 
    function add(node) { 
     domFragment.appendChild(node); 
    } 

    //Flushes the buffer to a node 
    function flush(targetNode) { 

     //if the target node is not given then use the body 
     var targetNode = targetNode || document.body; 

     //append the domFragment to the target 
     targetNode.appendChild(domFragment); 

    } 

    //return the buffer 
    return { 
     "add": add, 
     "flush": flush 
    } 
} 


//to make a buffer do this 
var buffer = Buffer(); 

//to add elements to the buffer do the following 
buffer.add(someNode1); 

//continue to add elements to the buffer 
buffer.add(someNode2); 
buffer.add(someNode3); 
buffer.add(someNode4); 
buffer.add(someN...); 

//when you are done adding nodes flush the nodes to the containing div in the dom 
buffer.flush(myContainerNode); 

여기에 사용 사례입니다.

Answer 8

거대한 문자열을 만들고이 문자열에 jquery를 추가합니다. 나를 위해 훌륭하고 빠르게 작동합니다.