콧수염 렌더링 대 핸들 바 렌더링

Question

나는 뷰어 1 개를 사용하며 콧수염과 뷰어 2는 핸들러를 사용합니다. 내 이해가 올바른지 확인하고 싶습니다.

초기화 기능 블록에서 핸들 막대 템플릿을 컴파일하고 뷰를 렌더링하는 동안 뷰의 렌더링 기능을 호출하는 동안 view2 렌더링 성능이 view1보다 우수합니다 나는 데이터 템플릿을 통과 시켰습니다.

반면에 콧수염을 사용하는 뷰 1의 경우 렌더링하는 동안 템플릿 편집 및 데이터 채우기가 발생합니다.

제 이해가 정확한지 알려주세요. 조회수의로드 시간을 확인하려고했는데로드 시간에 큰 차이가 없었습니다. view1의 경우 10.8ms이고 view2는 10ms였습니다.

var view1 = Backbone.View.extend({ 

      initialize:function(options){ 

       Backbone.View.prototype.initialize.call(this); 

       this.tpl = options.template; 

       this.data = options.data; 

      }, 


      render: function(){ 

       $(this.el).html(Mustache.to_html(this.tpl,this.data)); 

      } 
     }); 


var view2 = Backbone.View.extend({ 

      initialize:function(options){ 

        Backbone.View.prototype.initialize.call(this); 

        this.tpl = options.template; 

        this.handlebarstpl = Handlebars.compile(this.tpl); 

        this.data = options.data; 

      }, 


      render: function(){ 

       $(this.el).html(this.handlebarstpl(this.data)); 

      } 
     }); 

Answer 1

귀하의 이해가 정확합니다. 템플릿을 미리 컴파일하는 것은 클라이언트 측에서 컴파일하는 것보다 비용이 적게 듭니다.

두보기간에 0.8 초의 차이가 있다고합니다. 이 숫자는 겉보기로는 작지만 모든 것이 합쳐져 더 빠른 (더 나은) 사용자 경험을 제공합니다. 템플릿 데이터가 커지면이 둘 사이에 더 큰 차이가 나타날 것입니다.

This은 좋은 아이디어입니다.