Почему Chrome использует больше CPU, когда скрыт большой элемент Knockout?

У меня одностраничное веб-приложение, которое использует Knockout.js 2.2.1 для отображения потоковой передачи информации с сервера (используя socket.io, хотя я не думаю, что это важно). Это приложение также содержит большую таблицу данных, которая создается из объекта JSON с использованием привязок Knockout foreach. (Таблица большая, но не огромная: 20 столбцов и 200 строк или около того.)

Поскольку таблица большая, ее можно открыть/закрыть пользователем, нажав кнопки. Данные <table> помещаются внутри элемента <div>, который можно скрыть/показать с помощью методов jQuery .hide() и .show() (которые по существу работают путем установки и очистки CSS display: none на <div>).

Вся эта функциональность работает. Тем не менее, я замечаю, что после "закрытия" (скрытия) таблицы больших данных использование процессора Chrome скачкообразно - на 100%, если таблица с генерируемым нокаутом достаточно велика. Еще интереснее то, что это происходит только после того, как пользователь щелкнул где-то внутри элемента <div>, который содержит таблицу, когда она отображается. Когда таблица скрыта (и загрузка процессора высока), щелчок в другом месте страницы вернет загрузку ЦП в нормальное русло. Процесс будет повторяться по желанию.

Еще одно полезное замечание: если я остановлю потоковые данные с сервера, эта проблема не произойдет (или это не заметно при использовании ЦП). На этой странице есть одна модель представления нокаута, которая управляет потоковыми данными с сервера и созданием этой таблицы данных из объекта JSON. Оба набора данных в остальном полностью разделены - ни одна из изменяющихся данных не отображается в таблице, и таблица не содержит привязки событий к модели представления. Как будто обновление потоковых данных модели Knockout вызывает работу над таблицей данных, даже если ни одна из данных потоковой передачи не привязана к таблице. И это происходит только тогда, когда таблица не отображается!

Краткое резюме:

• Веб-приложение использует нокаут для визуализации большой таблицы данных при загрузке страницы.
• Эта таблица скрыта при .hide() при запуске в $(document).ready, но отображается с помощью .show() после нажатия кнопки и может быть снова скрыта
• Если щелкнуть мышью внутри таблицы данных, использование ЦП в Chrome переместится на 100% после того, как таблица снова будет скрыта.
• Щелчок по чему-либо еще на странице приведет к нормальному использованию ЦП.

Другая важная информация:

• Профайлер Chrome JavaScript показывает высокую загрузку процессора, но он классифицируется просто как (программа).
• Ни IE10, ни Firefox 20 в Windows не показывают эту проблему.

Любые идеи о том, что происходит здесь, или предложения по дополнительным устранению неполадок?

jsFiddle:

Пример здесь: http://jsfiddle.net/CTYMv/6/

Посмотрите на использование ЦП после загрузки скрипта, он должен быть низким. Нажмите "Показать таблицу", а затем щелкните где-нибудь внутри всплывающего div (серый фон). Затем нажмите "Скрыть таблицу" - использование ЦП значительно возрастет. Затем щелкните в другом месте (белый фон), и CPU вернется в нормальное состояние.

Ответы

.hidden{opacity:0;pointer-events:none} //don't use display:none here

//don't use hide/show jq methods as internally it set display none (fadeOut() methods too)
$('#btn_show').click(function(){
    $('#bigdatadiv').removeClass('hidden');
});
$('#btn_hide').on('click',function(){    
   $('#bigdatadiv').addClass('hidden')
});