CompositeView中的慢渲染大结果集木偶项目 [英] CompositeView slow to render items for large result set Marionette
问题描述
我目前正在上的使用.net MVC上的前端后端和骨干网（V1.1）与木偶JS（v1.8.5）的一个项目，并试图呈现时，我遇到了一些性能问题复合视图200结果或项目的看法。
I'm currently working on a project that's using .NET MVC on the back end and Backbone (v1.1) with Marionette JS (v1.8.5) on the front end and I am experiencing some performance issues when trying to render a Composite view with 200 results or item views.
我遇到
I first came across this SO post of a similar issue which helped me get a newer version of marionette (v1.8.5).
把手模板被用来显示与每个ItemView控件一个HTML表被包裹在一个TBODY（这具有因而tbody的被使用，而不是更多的语义TR内它的更复杂的手风琴视图）
Handlebars templates are being used to show a html table with each itemView being wrapped in a tbody (this has a more complex accordion view within it hence tbody being used rather than a more semantic tr)
该复合视图正在初始化，并在木偶区域时，它的子应用程序被初始化中。
The Composite view is being initialised and shown in a Marionette region when it's sub app is initialised.
下面是我的code的简化版本。
Here's a simplified version of my code.
活动的子应用
'use strict';
App.module('Activities', function(){
this.startWithParent = false;
});
App.addRegions({
RegionActivities: '#region-Activities' // <= this lives in .NET View of project
});
App.Activities.addInitializer(function (options) {
var module = this,
activities = new Collections.Activities();
module.activitiesView = new Views.ActivitiesView({
collection: activities
});
App.RegionActivities.show(module.activitiesView);
activities.fetch();
});
活动的复合视图
'use strict';
Views.ActivitiesView = Backbone.Marionette.CompositeView.extend({
template: Handlebars.templates['activities/activities'],
itemView: Views.ActivityView,
itemViewContainer: '.admin-table--activities', // <= html table that items are appended to
});
活动项目视图
'use strict';
Views.ActivityView = Backbone.Marionette.ItemView.extend({
template: Handlebars.templates['activities/activity'],
tagName: 'tbody'
});
我读<一个href=\"https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md#collectionviews-attachhtml\"相对=nofollow>木偶文档就更好执行文档片段
这样我有性能问题是，所有的200项都被附加一次，而不是利用docFragment缓冲器。通过调试我相信这是因为该视图正与空的活动集合初始化之前的获取，使木偶认为我更新的收集，并设置isBuffering为false。
So the performance issue that I'm having is that all 200 items are being appended one at a time and not utilising docFragment buffer. Through debugging I believe this is because the view is being instantiated with an empty Activities collection before the fetch, so Marionette thinks I'm updating the collection and sets the isBuffering to false.
我也试过instatiating的获取成功回调，像这样里面的activitiesView;
I've also tried instatiating the activitiesView inside the fetch success callback like so;
activities.fetch({
success: function(newCollection) {
module.activitiesView = new Views.ActivitiesView({
collection: newCollection
});
App.RegionActivities.show(module.activitiesView);
}
});
这确实追加了200个项目，以集合elBuffer（大约需要4秒），但另需50秒，以便在屏幕上显示任何东西之前。调试表明，是由集合触发昂秀的方法可以通过每个项目逐一造成这种延迟，因为它循环。
This does append the 200 items to the collections elBuffer (takes about 4 seconds) but then takes another 50 seconds or so before anything is shown on screen. Debugging suggests the onShow method that's triggered by the collection could be causing this delay as it loop through each item one by one.
有我错过了什么？
我在正确的地方做的一切？
Am I doing everything in the right places?
是我想要达到甚至可能吗？
Is what I'm trying to achieve even possible?
觉得奇怪，我认为这可能是如此困难。
Seems strange to me that this could be so difficult.
感谢您的时间。
汤姆
Thanks for you time. Tom
的修改的
下面都是复合视图和项目视图模板。
Here are both the composite view and item view templates.
活动CompositeView中的模板
<table class="admin-table admin-table--accordion admin-table--activities">
<colgroup>
<col width="10%">
<col width="22%">
<col width="23%">
<col width="23%">
<col width="22%">
</colgroup>
<thead>
<tr>
<th>Type</th>
<th>Vessel</th>
<th>Activity</th>
<th>Information</th>
<th>Review Status</th>
</tr>
</thead>
</table>
活动ItemView控件模板（每个包裹在TBODY）
Activity ItemView template (each wrapped in tbody)
<tr class="table-title">
<td>Col 1 data</td>
<td>Col 2 data</td>
<td>Col 3 data</td>
<td>Col 4 data</td>
<td Col 5 data</td>
</tr>
<tr class="table-content">
<td colspan="5">More info in here...</td>
</tr>
的更新的
从Chrome浏览器开发工具的结果的JavaScript CPU简介：
前3项都是指木偶triggerMethod占用80％的CPU。
Top 3 items all refer to Marionette triggerMethod taking up 80% of CPU.
在全尺寸图像： http://i.stack.imgur.com/JjT3Z.png
推荐答案
在集合复位缓冲区将被使用，所以你可以尝试
The buffer will be used when the collection is reset, so you could try
activities.fetch({reset: true});
另外一种选择是等待，直到获取完成初始化，并显示您的视图之前（使用deferreds /承诺）。
The other option is to wait until the fetch is done (using deferreds/promises) before initializing and displaying your view.
这篇关于CompositeView中的慢渲染大结果集木偶项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![http://i.stack.imgur.com/JjT3Z.png](\"http://i.stack.imgur.com/JjT3Z.png\"){kind=link}