jQuery를 사용하여 HTML 요소를 작성하는 가장 효율적인 방법은 무엇입니까?

최근에 나는 많은 모달 창 팝업을 수행하고 있었고 그렇지 않은 것은 jQuery를 사용했습니다. 페이지에서 새 요소를 만드는 데 사용한 방법은 다음과 같이 엄청나게 많습니다.

$("<div></div>");

그러나 이것이 최선의 방법이 아니라는 생각이 들었습니다. 성능 관점에서 jQuery에서 요소를 작성하는 가장 좋은 방법은 무엇입니까?

이 답변 에는 아래 제안에 대한 벤치 마크가 있습니다.

$(document.createElement('div')); 벤치마킹을 사용 하면이 기술이 가장 빠릅니다. 나는 이것이 jQuery가 그것을 요소로 식별하고 요소 자체를 만들 필요가 없기 때문에 추측한다.

실제로 다른 자바 스크립트 엔진으로 벤치 마크를 실행하고 결과로 잠재 고객을 평가해야합니다. 거기에서 결정하십시오.

개인적으로 (가독성을 위해) 제안하고 싶습니다.

$('<div>');

지금까지 제안에 대한 일부 숫자 (safari 3.2.1 / mac os x) :

var it = 50000;

var start = new Date().getTime();
for (i = 0; i < it; ++i)  {
  // test creation of an element 
  // see below statements
}
var end = new Date().getTime();
alert( end - start );                

var e = $( document.createElement('div') );  // ~300ms
var e = $('<div>');                          // ~3100ms
var e = $('<div></div>');                    // ~3200ms
var e = $('<div/>');                         // ~3500ms              

질문:

jQuery를 사용하여 HTML 요소를 작성하는 가장 효율적인 방법은 무엇입니까?

대답:

그때 쯤에 jQuery(깨끗한) 접근 방식을 사용하는 것이 좋습니다.

$('<div/>', {
    'id':'myDiv',
    'class':'myClass',
    'text':'Text Only',
}).on('click', function(){
    alert(this.id); // myDiv
}).appendTo('body');

데모.

이런 식으로, 당신은 같은 특정 요소에 대한 이벤트 핸들러를 사용할 수 있습니다

$('<div/>', {
    'id':'myDiv',
    'class':'myClass',
    'style':'cursor:pointer;font-weight:bold;',
    'html':'<span>For HTML</span>',
    'click':function(){ alert(this.id) },
    'mouseenter':function(){ $(this).css('color', 'red'); },
    'mouseleave':function(){ $(this).css('color', 'black'); }
}).appendTo('body');

데모.

그러나 많은 동적 요소를 처리하는 경우 handlers특정 요소에 이벤트 를 추가하지 말고 대신 위임 된 이벤트 핸들러를 사용해야합니다.

$(document).on('click', '.myClass', function(){
    alert(this.innerHTML);
});

var i=1;
for(;i<=200;i++){
    $('<div/>', {
        'class':'myClass',
        'html':'<span>Element'+i+'</span>'
    }).appendTo('body');
}

데모.

따라서 동일한 클래스 (예 : ( myClass))로 수백 개의 요소를 생성하고 추가 하면 동적으로 삽입 된 모든 요소에 대해 하나의 핸들러 만 있으면 이벤트 처리에 더 적은 메모리가 사용됩니다.

업데이트 : 다음과 같은 접근 방식을 사용하여 동적 요소를 만들 수 있기 때문에

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    'size': '30'
}).appendTo("body");

그러나 size속성을 사용하여이 방법을 사용하여 설정할 수 없습니다 jQuery-1.8.0여기에 오래된 또는 이상 및 버그 보고서 에서, 모습 이 예를 사용하는 jQuery-1.7.2것을 보여주는 size속성이 설정되어 30예를 들어 위의 사용하지만 우리는 세트와 동일한 접근 방식을 수 없습니다 사용 size하여 속성을 jQuery-1.8.3여기에, A는 작동하지 않는 바이올린 . 따라서 size속성 을 설정하기 위해 다음 접근법을 사용할 수 있습니다

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    attr: { size: "30" }
}).appendTo("body");

아니면 이거

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    prop: { size: "30" }
}).appendTo("body");

우리는 통과 할 수 attr/prop자식 개체로하지만 작동 jQuery-1.8.0 and later버전 확인 이 예제를 하지만 그것은 작동하지 않습니다 에서 jQuery-1.7.2 or earlier(모든 이전 버전에서 테스트하지).

jQuery버그 보고서 에서 가져온 BTW

몇 가지 솔루션이 있습니다. 첫 번째는 공간을 절약하지 않고 코드의 선명도를 향상시키기 때문에 전혀 사용하지 않는 것입니다.

그들은 다음과 같은 접근 방식을 사용하는 것이 좋습니다 ( 이전의 방법 에서도 작동하며에서 테스트 됨 1.6.4)

$('<input/>')
.attr( { type:'text', size:50, autofocus:1 } )
.val("Some text").appendTo("body");

따라서이 접근법 인 IMO를 사용하는 것이 좋습니다. 이 업데이트는 내가 읽은 후 / 발견되어 이 답변 이 대답 쇼에서 당신이 사용하는 경우 'Size'(capital S)대신 'size'다음 것이다 단지 잘 작동 , 심지어에서version-2.0.2

$('<input>', {
    'type' : 'text',
    'Size' : '50', // size won't work
    'autofocus' : 'true'
}).appendTo('body');

또한 차이가 있기 때문에 prop 에 대해 읽어보십시오 Attributes vs. Properties. 버전에 따라 다릅니다.

실제로, 당신이하고있는 $('<div>')경우 jQuery도 사용 document.createElement()합니다.

( 117 행을 보십시오 ).

몇 가지 함수 호출 오버 헤드가 있지만 성능이 중요하지 않은 경우 (수백 개의 요소를 생성하는 경우) 일반 DOM 으로 되돌릴 이유가 없습니다 .

새로운 웹 페이지를위한 요소를 만드는 것만으로도 jQuery 방식 을 따르는 것이 가장 좋습니다 .

HTML 콘텐츠가 하나 뿐인 경우 (단일 div 이상) 숨겨진 컨테이너 내의 페이지에 HTML을 빌드 한 다음 업데이트하여 필요할 때 표시 할 수 있습니다. 이런 식으로, 브라우저에서 마크 업의 많은 부분을 미리 파싱 할 수 있으며 호출 될 때 JavaScript에 의해 혼란을 피할 수 있습니다. 도움이 되었기를 바랍니다!

이것은 질문에 대한 정답은 아니지만 여전히 이것을 공유하고 싶습니다 ...

document.createElement('div')JQuery를 사용 하고 건너 뛰면 많은 요소를 즉시 만들고 DOM에 추가하려고 할 때 성능이 크게 향상됩니다.

최선의 방법을 사용하고 있다고 생각하지만 다음과 같이 최적화 할 수 있습니다.

 $("<div/>");

CPU의 관점에서 극히 드물게 수행되는 작업에서 원시 성능이 필요하지 않습니다.

jQuery를 처음 사용할 때는 요소 생성 성능의 중요성이 중요하지 않다는 것을 이해해야합니다.

실제로 사용하지 않는 한 요소를 작성하려는 실제 목적은 없습니다.

$(document.createElement('div'))vs $('<div>')와 같은 성능을 테스트하고 사용으로 큰 성능 향상을 원할 수도 $(document.createElement('div'))있지만 아직 DOM에없는 요소 일뿐입니다.

그러나 하루가 끝나면 어쨌든 요소를 ​​사용하여 실제 테스트에 f.ex가 포함되어야합니다. .appendTo ();

서로에 대해 다음을 테스트하면 볼 수 있습니다.

var e = $(document.createElement('div')).appendTo('#target');
var e = $('<div>').appendTo('#target');
var e = $('<div></div>').appendTo('#target');
var e = $('<div/>').appendTo('#target');

결과가 다를 수 있습니다. 때로는 한 가지 방법이 다른 방법보다 성능이 좋습니다. 이것은 컴퓨터의 백그라운드 작업 수가 시간이 지남에 따라 변경되기 때문입니다.

여기서 자신을 테스트

따라서 하루가 끝나면 요소를 만드는 가장 작고 읽기 쉬운 방법을 선택하려고합니다. 그렇게하면 최소한 스크립트 파일이 가장 작아집니다. DOM에서 요소를 사용하기 전에 요소를 작성하는 방법보다 성능 포인트에서 더 중요한 요소 일 수 있습니다.

누군가 이미 jQuery document.createElement에 해당 하는 벤치 마크를 만들었 습니까?

$(document.createElement('div')) 큰 승자입니다.

한 가지 요점은 수행하기가 더 쉽다는 것입니다.

$("<div class=foo id=bar style='color:white;bgcolor:blue;font-size:12pt'></div>")

그런 다음 jquery 호출로 모든 작업을 수행하십시오.

jquery.min v2.0.3 사용하고 있습니다. 다음을 사용하는 것이 좋습니다.

var select = jQuery("#selecter");
jQuery("`<option/>`",{value: someValue, text: someText}).appendTo(select);

다음과 같이 :

var select = jQuery("#selecter");
jQuery(document.createElement('option')).prop({value: someValue, text: someText}).appendTo(select);

첫 번째 코드의 처리 시간은 두 번째 코드보다 훨씬 낮습니다.