Knockout.js and large dataset makes dropdown list

Question

Does anyone know why the performance on this page is slow when it comes to the dropdown list on the - ALL - option? I must be doing something wrong with knockout.js for this to happen. For the smaller list of games it opens up quickly.

Tournament Schedule

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>

Answer 1

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 test this on the current page, execute document.styleSheets[0].deleteRule(23) in the console.

Some more testing showed that the drop-down is only slow in Chrome (30). Firefox (23) and IE (10) don't have the problem.

Answer 2

You may suffer from performance problems when manipulating large or rich (containing complex objects) observable arrays. Any time you perform any operation on such array, all the subscribers get notified.

Imagine you are inserting 100 items into an observable array. More often than not, you don’t need each subscriber to recalculate it’s dependencies 100 items, and UI to be reacting 100 times. Instead, once should just fine.

To do this, you can always modify the underlying array instead of the observableArray directly, since observableArray concept is just a function wrapper around the traditional JS array. After you are done with the array manipulation, you can then notify all the subscribers that the array has changed its state with .valueHasMutaded()

. See the simple example:

success: function (result) {
    ko.utils.arrayPushAll(self.games, result);
    self.games.valueHasMutated();
    ....

cheers

Answer 3

1. There are too many dom element at the page, it will be hard to select element for jquery.

2. If you need to handle big data bound after ajax, you'd better add a new thread to do it. in ajax success function:

   setTimeout(function(){ // your code }, 100);

for No.1, why not add a pager? Long long scroll bar is very terrible.