Knockout.js and large dataset also shrink the list down
Does anyone know why the performance on this page is slow when it comes to the dropdown on the option - ALL? I must be doing something wrong with knockout.js for this to happen. For a smaller list of games, it opens quickly.
Javascript
(function (app, $, undefined) {
app.viewModel = app.viewModel || {};
function Schedule() {
var self = this;
self.loaded = ko.observable(false);
self.divisionId = ko.observable();
self.games = ko.observableArray(null);
self.search = function(url) {
app.call({
type: 'POST',
data: { divisionId: self.divisionId() },
url: url,
success: function (result) {
self.games([]);
self.games.push.apply(self.games, result);
self.loaded(true);
}
});
};
self.init = function (options) {
app.applyBindings();
};
};
app.viewModel.schedule = new Schedule();
} (window.app = window.app || {}, jQuery));
Template
<div class="games hidden" data-bind="if: schedule.games(), css: { 'hidden': !schedule.games() }">
<div data-bind="if: schedule.games().length > 0">
<div data-bind="foreach: schedule.games">
<h2><span data-bind="html: Name"></span></h2>
<hr />
<div class="games row" data-bind="foreach: Games">
<div class="span4">
<div class="game game-box new-game-box">
<div class="datetime-header clearfix new-game-box">
<span class="time"><span data-bind="html: DateFormatted"></span> - <span data-bind="html: TimeFormatted"></span></span>,
<span class="gym" data-bind="text: Venue"></span>
</div>
<div class="team-game clearfix new-game-box" data-bind="css: { winner: AwayTeamIsWinner }">
<span class="team">
<a target="_blank" href="#" data-bind="html: AwayTeamName, attr: { href: AwayTeamLink }"></a>
</span> <span class="score" data-bind="html: AwayTeamScoreDisplay"></span>
</div>
<div class="team-game clearfix new-game-box" data-bind="css: { winner: HomeTeamIsWinner }">
<span class="team">
<a href="#" target="_blank" data-bind="html: HomeTeamName, attr: { href: HomeTeamLink }"></a>
</span> <span class="score" data-bind="html: HomeTeamScoreDisplay"></span>
</div>
<div class="buttons clearfix">
<span class="division" data-bind="html: 'Division ' + DivisionName"></span>,
<span data-bind="text: GameTypeName"></span>
<div class="btn-group">
<a rel="nofollow, noindex" title="Add to calendar" href="#" class="btn btn-mini" data-bind="attr: { href: CalendarLink }"><i class="icon-calendar"></i></a>
<a target="_blank" title="Gym Details" href="#" class="btn btn-mini" data-bind="attr: { href: GymLink }"><i class="icon-map-marker"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hidden" data-bind="if: (schedule.games() && schedule.games().length == 0), css: { 'hidden': !schedule.games() }">
No games found for this event.
Scores will be available here the day before the event however the schedule might already be posted under <a href="@Url.Action(MVC.Event.Documents(Model.Event.Id, Model.Event.Slug))">documents</a>.
</div>
<script type="text/javascript">
app.viewModel.schedule.init({});
</script>
source to share
I downloaded your HTML and CSS and did some testing. I was able to fix the problem by removing the following CSS:
.ui-widget :active {
outline: none
}
To check this on the current page , run document.styleSheets[0].deleteRule(23)
in the console.
Some testing has shown that in Chrome (30) the dropdown is only slow. Firefox (23) and IE (10) have no problem.
source to share
You may run into performance issues when manipulating large or rich (containing complex objects) observable arrays. Every time you perform any operation on such an array, all subscribers are notified.
Imagine you are inserting 100 elements into an observable array. More often than not, you don't need each caller to recalculate their dependencies 100 items, and the UI is 100 times responsive. Instead, once should be just fine.
To do this, you can always modify the underlying array instead of the observable array directly, since the obsableArray concept is just a wrapper around a function around a traditional JS array. Once you're done manipulating the array, you can then notify all subscribers that the array has changed its state with .valueHasMutaded ()
... See Simple example:
success: function (result) {
ko.utils.arrayPushAll(self.games, result);
self.games.valueHasMutated();
....
amuses
source to share
- There are too many dom elements on the page, it will be difficult to select an element for jquery.
-
If you need to handle big data anchored after ajax, you'd better add a new thread to do that. in ajax success function:
SetTimeout (function () {// your code}, 100);
for # 1, why not add a pager? Long scrollbars are scary.
source to share