제이쿼리:가장 빠른 DOM 삽입?

StackOverflow https://stackoverflow.com/questions/117665

  •  02-07-2019
  •  | 
  •  

문제

더 많은 양의 HTML을 삽입하는 방법에 대해 기분이 좋지 않았습니다.우리가 다음을 얻었다고 가정하자:

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

그리고 나는 이것을

$("#mydiv")

이전에 나는 다음과 같은 일을했습니다.

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

jQuery가 구문 분석하는 것이 맞습니까? html DOM 객체를 생성하려면?음 이건 내가 어디선가 읽은 내용이야 (업데이트: 내 말은, jQuery가 HTML을 파싱하여 전체 DOM 트리를 손으로 생성한다는 내용을 읽었다는 뜻입니다. 말도 안 되는 소리죠?!), 그래서 코드를 변경했습니다.

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

더 빨라진 것 같죠?그리고 이것이 다음과 같다는 것이 맞습니까?

document.getElementById("mydiv").innerHTML += html ?아니면 jquery가 백그라운드에서 추가로 값비싼 작업을 수행하고 있나요?

대안도 배우고 싶습니다.

도움이 되었습니까?

해결책

innerHTML은 놀라울 정도로 빠르며 대부분의 경우 이를 설정하기만 하면 최상의 결과를 얻을 수 있습니다(저는 그냥 추가를 사용하겠습니다).

그러나 "mydiv"에 이미 많은 내용이 있는 경우 브라우저는 해당 콘텐츠(이전에 있던 모든 내용과 새 콘텐츠 모두)를 다시 구문 분석하고 렌더링해야 합니다. 대신 "mydiv"에 문서 조각을 추가하면 이를 방지할 수 있습니다.

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

이러한 방식으로 새 콘텐츠만 (피할 수 없이) 구문 분석되고 기존 콘텐츠는 구문 분석되지 않습니다.

편집하다:내 잘못이야...문서 조각에서는 innerHTML이 제대로 지원되지 않는다는 것을 발견했습니다.모든 노드 유형에 동일한 기술을 사용할 수 있습니다.예를 들어, 루트 테이블 노드를 생성하고 여기에 innerHTML을 삽입할 수 있습니다.

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

다른 팁

다음을 시도해 보세요:

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

허용되는 답변을 포함한 다른 답변은 다음과 같습니다. 더 느리게 ~에 의해 2-10배: jsperf.

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

무엇을 피하려고 하시나요?"나쁜 느낌"은 엄청나게 모호합니다."DOM이 느리다"는 말을 듣고 "DOM을 피한다"고 결정했다면 이는 불가능합니다.innerHTML을 포함하여 페이지에 코드를 삽입하는 모든 방법으로 인해 DOM 개체가 생성됩니다.DOM은 브라우저 메모리에 있는 문서의 표현입니다.너 원하다 DOM 객체가 생성됩니다.

사람들이 "DOM이 느리다"고 말하는 이유는 document.createElement(), 요소 생성을 위한 공식 DOM 인터페이스인 는 일부 브라우저에서 비표준 innerHTML 속성을 사용하는 것보다 느립니다.이것은 DOM 객체를 생성하는 것이 나쁘다는 것을 의미하지는 않습니다. 필요한 그렇지 않으면 코드가 전혀 아무 것도 하지 않을 것입니다.

DOM 조각 사용에 대한 대답은 올바른 방향으로 가고 있습니다.DOM에 지속적으로 삽입하는 HTML 개체가 여러 개 있는 경우 조각을 사용하면 속도가 약간 향상되는 것을 볼 수 있습니다.John Resig의 이 게시물은 이를 매우 잘 설명합니다.http://ejohn.org/blog/dom-documentfragments/

항목을 추가하는 가장 빠른 방법

DOM 트리에 추가하는 가장 빠른 방법은 모든 추가를 단일 DOM 조각에 버퍼링한 다음 dom 조각을 dom에 추가하는 것입니다.

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

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

이 개체를 사용하면 Firefox 4에서 ~1000개 항목을 초당 ~40회 화면에 렌더링할 수 있습니다.

사용 사례는 다음과 같습니다.

우선 각 방법을 100회 또는 1,000회 수행하는 데 걸리는 시간을 측정하는 스크립트를 작성하세요.

반복이 어떻게든 최적화되지 않도록 하려면(저는 JavaScript 엔진 전문가가 아닙니다) 매번 삽입하는 HTML을 변경합니다. 예를 들어 '0001', '0002', '0003'을 특정 항목에 입력합니다. 테이블의 셀.

나는 거대한 문자열을 만든 다음 jquery를 사용하여 이 문자열을 추가합니다.나에게는 빠르고 잘 작동합니다.

대안에 관심이 있다고 언급하셨습니다.목록을 보면 DOM 관련 jQuery 플러그인 프로그래밍 방식으로 DOM 트리를 생성하는 데 사용되는 몇 가지 항목을 찾을 수 있습니다.예를 들어 참조 슈퍼플라이돔 또는 DOM 요소 생성자;하지만 다른 것도 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top