35

Knockout.js 2.2.1 を使用してサーバーからの情報ストリーミングを表示する単一ページの Web アプリがあります (socket.io を使用しますが、それは問題ではないと思います)。foreachこのアプリには、Knockout のバインディングを使用して JSON オブジェクトから作成された大きなデータ テーブルも含まれています。(テーブルは大きいですが、巨大ではありません。20 列と 200 行程度です。)

テーブルは大きいので、ボタンをクリックすることでユーザーが開閉できます。データは、 jQuery のメソッドとメソッドを使用して非表示/表示できる要素<table>内に配置されます (基本的には、でCSS を設定およびクリアすることで機能します)。<div>.hide().show()display: none<div>

この機能はすべて機能します。ただし、ビッグ データ テーブルを「閉じる」(非表示にする) と、Chrome の CPU 使用率が急上昇することに気付きました。ノックアウトで生成されたテーブルが十分に大きい場合は、100% に達します。さらに興味深いのは、これは、表示されているテーブルを含む要素内のどこかをユーザーがクリックした後にのみ発生することです。<div>テーブルが非表示の場合 (CPU 使用率が高い場合)、ページの別の場所をクリックすると、CPU 使用率が通常に戻ります。プロセスは自由に繰り返されます。

もう 1 つの有用なメモ: サーバーからのストリーミング データを停止すると、この問題は発生しません (または、CPU 使用率では目立ちません)。このページには 1 つの Knockout ビュー モデルがあり、サーバーからのストリーミング データと、JSON オブジェクトからのこのデータ テーブルの作成の両方を管理します。それ以外の場合、2 つのデータ セットは完全に分離されています。変化するデータはテーブルに表示されず、テーブルにはビュー モデルへのイベント バインディングが含まれていません。ストリーミング データがテーブルにバインドされていないにもかかわらず、Knockout モデルのストリーミング データ更新がデータ テーブルで作業を引き起こしているかのようです。 これは、テーブルが表示されていない場合にのみ行われます。

簡単な要約:

  • Web アプリは、ページの読み込み時に Knockout を使用して大きなデータ テーブルをレンダリングします。
  • このテーブルは.hide()では起動時に で非表示になっていますが、ボタンをクリックすると で$(document).ready表示され、再び非表示にすることができます.show()
  • データ テーブル内でマウスをクリックすると、テーブルが再び非表示になった後、Chrome の CPU 使用率が 100% に跳ね上がります。
  • ページ上の他のものをクリックすると、CPU 使用率が通常に戻ります。

その他の関連情報:

  • Chrome JavaScript プロファイラーは高い CPU 使用率を示していますが、単純に (プログラム) 時間として分類されています。
  • Windows 上の IE10 も Firefox 20 も、この問題を示しません。

ここで何が起こっているのか、または追加のトラブルシューティングに関する提案はありますか?

jsFiddle:

例: http://jsfiddle.net/CTYMv/6/

フィドルをロードした後の CPU 使用率を見てください。低いはずです。[テーブルを表示] をクリックし、ポップアップする div (灰色の背景) 内のどこかをクリックします。次に、[テーブルを非表示] をクリックします。CPU 使用率が大幅に増加します。次に、他の場所 (白い背景) をクリックすると、CPU が通常に戻ります。

4

3 に答える 3

3

これは Webkit エンジンのバグであると主張できると思います。このバグは、css プロパティを使用している場合にのみ発生しますdisplay:none;。GPU が webkit を使用して非表示の要素をレンダリングする方法が原因ですか? うーん、まだわからない…

デモを見る

これは私が考えることができる最も簡単な回避策です。これは他のコードのいずれにも干渉しないはずです: {eg knockout observable}

CSS: {Brandon の提案に従ってポインタイベントを追加}

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

JS:

//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')
});

これは単なる回避策であり、まだあなたの質問に答えていないことは承知しています:なぜこれが起こっているのですか?

于 2013-05-17T15:09:55.673 に答える
0

このスレッドをありがとう。バグは 2 年後に修正されていたと思います。

window.getSelection().removeAllRanges() が問題を解決し、私のコードに最も簡単に収まるようになりました。

于 2015-09-23T15:15:14.597 に答える
-2

大きなブロックのwindow.getSelection().removeAllRanges() 前に使用してください。.hide();私のためにうまく働いてください。ばかげていますが、それは本当です。

于 2015-10-26T14:45:26.953 に答える