는 jQuery를 템플릿 성능을 향상

Question

업데이트

은 분명히, jQuery를 템플릿을 컴파일 할 수 있으며이 here을 보여 문 경우와 템플릿의 성능을하는 데 도움이됩니다.

그러나 표시된대로 here, 내 템플릿에는 논리 블록이 없으므로 미리 컴파일 된 jQuery 템플릿은 제 경우에는별로 도움이되지 않습니다.

다른 템플릿 엔진의 사용을 제안하는 사람들에게는 jQuery 템플릿 만 사용하는 것이 좋습니다. 팀의 모든 사람이 jQuery를 알고 있기 때문입니다. 몇 가지 템플릿 엔진을 비교하는 this 테스트 케이스도 있습니다.

---

안녕

,

그냥 오늘은 내가 jQuery를 템플릿을 사용하여 성능 문제가 있다는 것을 들었다.

비교하려면 jQuery 템플릿과 좋은 이전 문자열 append 메서드를 사용하여 테이블에 행을 추가했습니다. 결과는 here으로 볼 수 있습니다. jQuery 템플릿을 사용하면 문자열 추가 메서드와 비교할 때 약 65 % 느려집니다.

jQuery 템플릿 스크립트의 성능을 향상시키기 위해 수행 할 수있는 작업이 궁금합니다.

전체 스크립트는 제공된 링크에서 볼 수 있습니다. 그러나 기본 개념은 다음과 같다 :

템플릿 :

<script type="x-jquery-tmpl" id="tmplRow"> 
<tr> 
    <td><input type="checkbox" value="${id}" /></td> 
    <td>${firstName} ${lastName}</td> 
    <td class="edit"> 
     <a>Edit</a> 
     <input style="display:none;" type="hidden" value="Blah" /> 
     <input class="cancel" type="button" value="cancel" /> 
    </td> 
    <td class="select"> 
     <a>Select</a> 
     <select style="display:none;"> 
      <option>0</option> 
      <option>1</option> 
      <option>2</option> 
      <option>3</option> 
      <option>4</option> 
      <option>5</option> 
      <option>6</option> 
      <option>7</option> 
      <option>8</option> 
      <option>9</option> 
      <option>10</option> 
     </select> 
     <input class="cancel" type="button" value="cancel" /> 
    </td> 
    <td>More string</td> 
    <td>More string</td> 
    <td>More string</td> 
    <td>More string</td> 
    <td>More string</td> 
    <td>More string</td> 
</tr> 
</script> 

데이터 :

<script type="text/javascript"> 
    var data = []; 

    for (var i = 0; i < 100; i++) { 
     var row = { 
      id: i, 
      firstName: 'john', 
      lastName: 'doe' 
     }; 

     data.push(row); 
    } 
</script> 

HTML :

<table id="table"></table> 

가 실행 :

<script type="text/javascript"> 
$('#tmplRow').tmpl(data).appendTo('#table'); 
</script> 

,451,515,

감사합니다,

치

Answer 1

당신의 템플릿은 정말 간단합니다, 당신은 템플릿을 미리 컴파일 할 수있는 옵션이있는 템플릿 언어이다 take a look at handlebars.js 할 수 있습니다.

레일과 jquery 코어 멤버 Yehuda Katz가 만듭니다. http://documentcloud.github.com/underscore/

당신은 현재 사용할 수있는 모든 다른 템플릿 프레임 워크를 비교 여기 벤치마킹 테스트 스위트를 찾을 수 있습니다 : https://github.com/aefxx/jQote2 [다운로드 및 jqote.benchmark.htm 실행]

Answer 2

이 가장 빠른 지금 동력이 될 것으로 보인다.

필자는 jQuery 템플릿이 초기 단계에 있으며 성능이 후속 반복에서 개선 될 것이라고 생각합니다.

Answer 3

렌더링을 수행하는 브라우저에 따라 크게 달라집니다.IE6는 상당히 느릴 수 있습니다 (HTML 마크 업 1,000 행을 전송하여 문서에 삽입하는 것이 빠를 수는 없지만).

여기에 9

더 중요한 질문은 정말해야 크롬에서 jsperf benchmark that generates 1,000 rows of 10 columns and renders it. I'm averaging 200-250ms to render 1000 행의 : 왜 세계에서 한 번에 1,000 행을 표시하는? 항상 UX보다 나은 UX 대안이 있습니다.

Answer 4

치 찬,

조금 늦게 하나 흔적. 템플릿을 먼저 컴파일 한 다음 문자열 ID (아래의 경우 명명 된 변수 templateAlias)로 참조하는 것은 실제로 객체 경로를 거치는 것보다 10 배 빠름을 발견했습니다. 여기에 당신이 (당신의 코드 샘플을 기반으로) 그것을 달성 할 것 방법 :이 템플릿이 컴파일 된 것으로 크게 procedings 속도를해야하고 .appendTo()를 실행 전체 개체 모델 매번 사용하지 않을

var templateAlias = 'tmplRow'; 
// compile the template 
$.template(templateAlias, $("#tmplRow")); 

<script type="text/javascript"> 
    $.tmpl(templateAlias, data).appendTo('#table'); 
</script> 

기능. $('#tmplRow').tmpl(data).appendTo('#table');을 사용하면 $('#tmplRow')이 DOM을 쿼리하지만 $.tmpl(templateAlias, data).appendTo('#table');은 템플릿에 대한 참조를 기반으로 DOM에만 추가한다는 것을 의미합니다. 그 주제에 대해 아주 약간의 독서가 있습니다. 이 도움이

http://boedesign.com/misc/presentation-jquery-tmpl/#13

희망, 행운을 빌어 요 ...

Answer 5

아무도 콧수염을 언급하지 :

여기에 도움이 될 수있는 링크입니다. 2011 년 후반에 콧수염은 인기있는 템플릿 프레임 워크에서 최고의 성능을 보였습니다.

http://mustache.github.com/