백본 마리오네트 합성보기 렌더링

Question

짧은 문제 : 크기가 500 자 이하인 마리오네트에서 합성보기를 초기화하면 약 1 분 동안 앱이 멈 춥니 다.

항목 목록을 유지 관리하기 위해 백본 마리오 네트 앱을 구축 중입니다. ~ 50의 컬렉션 크기로 테스트 할 때 모든 것이 좋습니다. 한도가 커지면 앱이 응답하지 않습니다.

Store.ItemsListView = Marionette.CompositeView.extend({ 
     tagName: "div", 
     template: "#items-list", 
     itemView: Store.ItemView, 
     itemViewContainer: "tbody", 
     emptyView: Store.NoDataView, 
}); 

Store.ItemView = Marionette.ItemView.extend({ 
    tagName: "tr", 
    template: "#store-item" 
}); 

나는 DOM 상호 작용 [응용 프로그램 페이지의 CPU 프로파일 된 자바 스크립트] 때문인 것으로 알고 있습니다. itemView에서 DOM 참조 대신 컴파일 된 템플릿 소스를 캐싱하여 템플릿 측면에서 최적화를 시도했습니다. 그러나 현저한 개선은 없었습니다.

나는 ItemView 자체를 사용하여 컬렉션을 here과 같이 렌더링하려고 생각했습니다. 그것이 el에 마지막 html src를 추가함에 따라. 하지만 응용 프로그램에서 내 논리는 그렇게 할 수 없습니다.

이와 같은 문제를 제거하는 다른 우아한 방법은 무엇입니까? 페이지 매기기는 분명히 그들 중 하나입니다 ..하지만 나는 그것이 더 나은 방법으로 처리 될 수 있다고 생각합니다.

Answer 1

두 백본을 사용하는 데와 엠버는 내가 엠버의 Backburner micro-library@ebryn에 의해 이 응답하지 않는 다움에 많이 도움이 말할 수 있습니다. 마이크로 라이브러리로서 백본 에서 잘 작동하며 simple Backbone example을 제공합니다.

Answer 2

마지막으로 많은 검색을 한 후 Marionette Github에서 CollectionView.reset performance 호를 발견했습니다. 이 문제는 Marioette의 1.3.x 버전에서 해결되어 발표되었으며 Marionette 대신 내 앱에 버그가 있음을 알았습니다.

동일한 디버깅을 수행하면 가져온 후에 컬렉션에있는 모든 모델마다 endBuffering이 한 번만 호출되는 대신 다른 모델에 대해 endBuffering이 호출된다는 힌트를 얻을 수있었습니다.

따라서 reset 이벤트 대신 내 수거 수준에서 add 이벤트가 발생했습니다. 나중에 가져 오기에 reset 옵션이 설정되어야한다는 것을 알게되었습니다.

이제는 perf test이 말한 것보다 99 % 빠릅니다.