백본 Marionette 천천히 합성보기 (200+ 모음)

Question

약 200 개국의 드롭 다운 합성보기 모음을 표시 할 때 내 응용 프로그램이 너무 느려집니다.

대형 합성보기에서 대형 컬렉션을 처리 할 때 성능을 향상시키는 가장 좋은 방법은 무엇입니까?

컨트롤러의로드가 매우 느린 기능입니다. 다음 줄만 제거하면 빠릅니다.

@layout.shippingCountryRegion.show shippingCountryView 
@layout.billingCountryRegion.show billingCountryView 

이렇게 렌더링 문제가 매우 느립니다.

Show.Controller = 
    showProfile: -> 
    @layout = @getLayoutView() 

    @layout.on "show", => 
     headerView = @getHeaderView() 
     @layout.headerRegion.show headerView 

     accessView = @getAccessView() 
     @layout.accessRegion.show accessView 

     billingReadmeView = @getBillingReadmeView() 
     @layout.billingReadmeRegion.show billingReadmeView 

     billingFieldsView = @getBillingFieldsView() 
     @layout.billingFieldRegion.show billingFieldsView 

     shippingReadmeView = @getShippingReadmeView() 
     @layout.shippingReadmeRegion.show shippingReadmeView 

     shippingFieldsView = @getShippingFieldsView() 
     @layout.shippingFieldRegion.show shippingFieldsView 

     MyApp.request "location:get_countries", (countries) => 
     billingCountryView = @getBillingCountryView(countries) 
     @layout.billingCountryRegion.show billingCountryView 

     MyApp.request "location:get_states", MyApp.activeCustomer.get('billing_country_id'), (states) => 
     billingStateView = @getBillingStatesView(states) 
     @layout.billingStateRegion.show billingStateView 

     MyApp.request "location:get_countries", (countries) => 
     shippingCountryView = @getShippingCountryView(countries) 
     @layout.shippingCountryRegion.show shippingCountryView 

     MyApp.request "location:get_states", MyApp.activeCustomer.get('shipping_country_id'), (states) => 
     shippingStateView = @getShippingStatesView(states) 
     @layout.shippingStateRegion.show shippingStateView 

    MyApp.mainRegion.show @layout 

과금 국가보기 : 단순히

class View.BillingCountryDropdownItem extends MyApp.Views.ItemView 
    template: billingCountryItemTpl 
    tagName: "option" 

    onRender: -> 
    this.$el.attr('value', this.model.get('id')); 
    if MyApp.activeCustomer.get('billing_country_id') == this.model.get('id') 
     this.$el.attr('selected', 'selected'); 

class View.BillingCountryDropdown extends MyApp.Views.CompositeView 
    template: billingCountryTpl 
    itemView: View.BillingCountryDropdownItem 
    itemViewContainer: "select" 

템플릿 :

 <label>Country 
     <select id="billing_country_id" name="billing_country_id"> 
      <%- name %> 
     </select> 
    </label> 

가 빠른 솔루션이 필요합니다. 감사.

Answer 1

코드를 최적화 할 수 있습니다. onRender 메서드의 내용을 ItemView 특성으로 이동하십시오.

class View.BillingCountryDropdownItem extends MyApp.Views.ItemView 
    template: billingCountryItemTpl 
    tagName: "option" 

    attributes: -> 
    var id = this.model.get('id'); 
    var attributes = { 'value': id }; 
    if MyApp.activeCustomer.get('billing_country_id') == this.model.get('id') 
     attributes['selected'] = 'selected'; 
    return attributes 

---

이 방법 onRender 경우의 차이는, 그 수집이 이미 렌더링 및 200 개 이상의 작업이 성능 문제를 가져올 것이다 DOM 노드와 함께 할 때 실행됩니다 렌더링합니다.

attributes 메서드의 경우 뷰 생성시 실행됩니다.

Answer 2

몇 가지 조언은 당신이 따를 수 있습니다

1) 자기에게 물어 당신이 정말로 한 번에 모든 항목을 렌더링해야합니까? 아마도 컬렉션의 일부를 렌더링하고 다른 항목을 스크롤 할 때 렌더링하거나 페이지 매기기를 사용하거나 SlickGrid 또는 Webix과 같이 '가상의 scrioll'을 사용할 수 있습니다.

2)보기를 얼마나 자주 렌더링하는지 확인하십시오.

3) ItemView의 이벤트 리스너 수를 줄이기 위해 노력하십시오. 컨텍스트 이벤트를 CollectionView에 위임하는 좋은 방법

4) setTimeout을 사용하여 파트별로 컬렉션을 렌더링 할 수 있습니다. 예를 들어, 콜을 네 부분으로 나눠서 50 개 항목으로 나누고 4 개의 타임 아웃을 발생시켜 렌더링합니다.

5) 밑줄 템플릿을 최적화하고 with {} 연산자를 제거 할 수 있습니다. http://underscorejs.org/#template

Answer 3

'billingCountryItemTpl'변수에 무엇이 있습니까? 템플릿 ID가있는 문자열 일 경우 Marionette.TemplateCache을 사용하여 템플릿을 사전 컴파일 할 수 있습니다.

그래서 당신은 할 수 있습니다 :

template: Marionette.TemplateCache.get(billingCountryItemTpl)