Css js和大数据集使得下拉列表也变慢

有人知道为什么在使用-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>

- ,
, 
未找到此事件的游戏。
分数将在活动前一天在此处提供，但时间表可能已经发布在下面。
app.viewModel.schedule.init（{}）；

我下载了你的HTML和CSS并做了一些测试。我通过删除以下CSS解决了此问题：

.ui-widget :active {
    outline: none
}

要在上进行测试，请在控制台中执行

document.styleSheets[0].deleteRule（23）

---

更多的测试表明，Chrome（30）的下拉速度较慢。Firefox（23）和IE（10）没有问题。

在操作大型或丰富（包含复杂对象）可观察数组时，您可能会遇到性能问题。在这样的阵列上执行任何操作时，都会通知所有订户

假设您将100个项目插入到一个可观察的数组中。通常情况下，您不需要每个订阅者重新计算其依赖项100个项目，UI也不需要反应100次。相反，一次就可以了

要做到这一点，您始终可以修改底层数组而不是直接修改ObservalArray，因为ObservalArray概念只是传统JS数组的函数包装器。完成数组操作后，可以通知所有订阅服务器该数组已使用.valueHasMutaded（）更改其状态

。请参见简单示例：

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

干杯

页面上的dom元素太多，很难为jquery选择元素

如果需要处理ajax之后的大数据绑定，最好添加一个新线程。在ajax成功函数中：

setTimeout（函数（）{ //你的代码 }, 100);

---

第一，为什么不加一个寻呼机呢？长长的滚动条非常糟糕。

如果你把self.games.push.apply（self.games，result）注释掉，一切都会加速吗？如果是这样的话，你可以考虑使用<代码> CONTAG/COD>而不是缓存数组应用方法。这个测试套件显示它比缓存的apply快14%：我的意思是，如果你在下拉列表中选择包含更少数组项的第14部分，它确实会快很多，所以这就是问题所在，但是如果knockout.js像这样执行，我可能会将纯javascript与jquery一起使用，并构建我的元素，你的整个页面很慢。我这里有8GB内存，你的页面正在为我崩溃。在页面上滚动几乎是不可能的。我不知道concat的情况，但我知道push.apply是knockout.js和性能的最佳实践。Michael花时间为您清理这个似乎100%与KO无关的问题，真是太酷了。我很幸运地找到了这个问题。我首先使用了一个CSS格式化程序，它弄乱了一些CSS（我不知道）。当我发现页面不再有问题时，我找到并使用了更好的CSS格式化程序，然后比较了两个版本。坏的格式化程序已将上述内容更改为

.ui小部件：active

，有效地消除了性能问题。哇，哇。为什么会出现这个问题？我当然永远也想不到这一点。谢天谢地，它不是knockout.js，我页面上的其他大型数据集也可能是由它引起的。你知道为什么会这样吗？选择器是从右向左计算的。在您的情况下，首先将搜索DOM树中的所有活动元素。然后，每一个孩子都会被检查他的父母是否有合适的班级。“：active”选择器不是为浏览器优化的简单选择器。因此，它将是一个缓慢的所有元素的完整枚举。因此，这条规则的速度非常慢。JavaScript是单线程的，而且总是这样。setTimeout（…）只是强制暂停（保证最小延迟长度，但可能更长，具体取决于队列）和相关工作的队列。