1

データフィードを取得するための js スクリプトがあり、応答テキストに従っていくつかの div を作成しました。

私はすでに Web ワーカーと ajax を使用して、読み取りデータフィードを分割し、HTML コード プロセスを構築しました。

ただし、コンテナにhtmlを追加すると、遅くなります（18000のdivとしましょう）

次に、メソッドを変更して、コンテナーのスクロールダウン用に 200 div を追加します。

非常に高速になりますが、すべてのアイテムがレンダリングされる間、他のプロセスが遅くなり始めます。たとえば、コンテナーを表示および非表示にすると、かなり遅くなります。

別の解決策は z-index を使用することであることがわかりました。これにより、表示の非表示プロセスがはるかに高速になります。

ただし、コンテナーの内容を変更する必要がある間は、再び遅くなります。

アイデアや解決策はありますか？

4

3 に答える 3

3

ライブ DOM 構造の外でできるだけ多くの変更を行うと、パフォーマンスが向上します。詳細については、ページ内の Java スクリプトのパフォーマンスを向上させる方法をご覧ください。

于 2013-01-02T08:59:08.447 に答える
1

私はこのような状況にあり、ツリー内のノードに多くの子を追加していました。

問題

  1. ページが遅かった。
  2. 要素のレンダリングが遅く、IE で JS がクラッシュすることもありました。

ソリューション

  1. 1 つのインスタンスで DOM に存在する要素数の上限を作成しました。最初に 500 個の要素があるとしましょう。次に、約 500 個のノードを取得する別の ajax リクエストがあるので、いくつかの要素をクリアします。清算シナリオを管理できる場合に役立ちます。
  2. インライン CSS スタイルはありません。これにより違いが生じるように見えますが、CSS クラスのすべてのスタイリングを維持するとパフォーマンスが向上します。
  3. ぶら下がっている div やスパンなどを保持しないように、適切な HTML 構造を定義します。
  4. 「on」などの適切な委任を通じてイベント ハンドラーをアタッチします。

これを改善するためにできることはたくさんあります。このための jsfiddle を投稿できれば、きっと役に立ちます。

于 2013-01-02T09:19:24.110 に答える
0

質問は解決しましたSlickGridは簡単に処理できます

于 2013-01-02T10:20:51.390 に答える