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

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

최근에는 jQuery를 사용한 모달창 팝업 등을 많이 하고 있습니다.페이지의 새로운 요소를 작성하기 위해 사용한 방법은 다음과 같습니다.

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

하지만, 나는 이것이 이것을 하는 가장 좋은 방법이나 가장 효율적인 방법이 아니라는 느낌을 받고 있다.성능 관점에서 jQuery에서 요소를 만드는 가장 좋은 방법은 무엇입니까?

이 답변에는 다음 제안의 벤치마크가 포함되어 있습니다.

용 i i i i를 쓴다.$(document.createElement('div')); 벤치마킹에 따르면 이 기법이 가장 빠릅니다.이는 jQuery가 요소로 식별하여 요소 자체를 생성할 필요가 없기 때문이라고 추측합니다.

다양한 Javascript 엔진으로 벤치마크를 실행하고 그 결과를 시청자에게 평가해야 합니다.거기서부터 결정해.

개인적으로는 (가독성을 위해) 다음을 권장합니다.

$('<div>');

지금까지의 제안의 몇 가지 수치(mac os x의 3.2.1):

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이렇게 하면 동적으로 삽입된 모든 요소에 대해 작업을 수행하는 핸들러는 1개뿐이기 때문에 이벤트 처리에 소비되는 메모리가 줄어듭니다.

업데이트 : 다음 방법을 사용하여 동적 요소를 만들 수 있습니다.

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

그...size수 .jQuery-1.8.0오래된 버그리포트입니다이 예에서는,jQuery-1.7.2 걸 알 수 있어요.size는 Attribute로 됩니다.30수 없습니다.size「」를 사용한 jQuery-1.8.3동작하지 않는 바이올린이 있습니다.따라서,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(일부 이전 버전에서는 테스트되지 않았습니다).

, BTW, 득득 bjQuery

몇 가지 해결책이 있습니다.첫 번째는 전혀 사용하지 않는 것입니다.이것은 공간을 절약할 수 없기 때문에, 코드의 명료성이 향상됩니다.

그들은 다음과 같은 접근방식을 사용할 것을 권고했다(이전의 접근방식에서도 동작하며,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');

그리고 소품에 대해서도 읽어보세요. 왜냐하면 차이가 있기 때문에Attributes vs. Properties버전에 따라 다릅니다.

실,를 하고 , 약 actually actually actually actually actually actually actually actually actually actually?$('<div>')는 jQuery도 document.createElement().

(117호선을 보세요).

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

새 웹 페이지를 위한 요소를 만드는 것만으로 jQuery의 작업 방식을 고수하는 것이 가장 좋은 경우일 수 있습니다.

HTML 컨텐츠가 많은 경우(단일 div 이상), HTML을 숨겨진 컨테이너 내의 페이지에 빌드한 후 업데이트하여 필요에 따라 표시할 수 있습니다.이렇게 하면 마크업의 많은 부분이 브라우저에 의해 사전 해석되어 호출 시 JavaScript에 의해 정지되는 것을 방지할 수 있습니다.이게 도움이 됐으면 좋겠네요!

이 질문에 대한 정답은 아니지만, 저는 이것을 공유하고 싶습니다.

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

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

 $("<div/>");

CPU의 관점에서는 극히 드물게 실행하는 조작에 의한 원시 퍼포먼스는 필요 없습니다.

요소 생성 성능의 중요성은 처음부터 jQuery를 사용하는 것과 무관하다는 것을 이해해야 합니다.

요소를 실제로 사용하지 않는 한 요소를 만드는 진정한 목적은 없습니다.

같은 것을 싶은 이 들 수도 .$(document.createElement('div'))대.$('<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 calls로 할 수 있습니다.

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

첫 번째 코드는 두 번째 코드보다 처리 시간이 훨씬 짧습니다.

언급URL : https://stackoverflow.com/questions/327047/what-is-the-most-efficient-way-to-create-html-elements-using-jquery