Knockout.js и большой набор данных также замедляют работу выпадающего списка

Question

Кто-нибудь знает, почему производительность на этой странице низкая, когда дело доходит до раскрывающегося списка в опции - ALL? Я должен делать что-то не так с knockout.js, чтобы это произошло. Для меньшего списка игр он открывается быстро.

Расписание турниров

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));

шаблон

     <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

Я скачал ваш HTML и CSS и провел некоторое тестирование. Я смог решить проблему, удалив следующий CSS:

.ui-widget :active {
    outline: none
}

Чтобы проверить это на текущей странице, выполните document.styleSheets[0].deleteRule(23) в консоли.

Еще одно тестирование показало, что в Chrome выпадающее меню медленное (30). Firefox (23) и IE (10) не имеют проблемы.

Answer 2

Вы можете страдать от проблем с производительностью при работе с большими или расширенными (содержащими сложные объекты) наблюдаемыми массивами. Каждый раз, когда вы выполняете какую-либо операцию с таким массивом, все подписчики получают уведомление.

Представьте, что вы вставляете 100 элементов в наблюдаемый массив. Чаще всего вам не нужно, чтобы каждый подписчик пересчитывал свои зависимости на 100 элементов, а пользовательский интерфейс должен реагировать 100 раз. Вместо этого один раз должен просто отлично.

Для этого вы всегда можете напрямую изменить базовый массив вместо observableArray, поскольку концепция observableArray - это просто оболочка функции вокруг традиционного массива JS. После того, как вы закончите с манипулированием массивом, вы можете уведомить всех подписчиков, что массив изменил свое состояние с помощью.valueHasMutaded()

, Смотрите простой пример:

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

ура

Answer 3

1. На странице слишком много элементов dom, будет сложно выбрать элемент для jquery.

2. Если вам нужно обрабатывать большие данные, связанные с ajax, вам лучше добавить новый поток, чтобы сделать это. в функции успеха ajax:

   setTimeout (function () {// ваш код}, 100);

для № 1, почему бы не добавить пейджер? Длинная длинная полоса прокрутки очень ужасна.