ある時、私はそのコードが
通常、jsを記述する必要はありません。
最も最適。 「クライアント側」、私は言った、「しません
影響するため、得点することができます。」 残念ながら、これは完全ではないことが判明しました
そう。
この記事には技術情報が含まれています。 ここに書かれていることを理解できない場合は、マイナスしないでください。
それはすべて、ライブラリの使用から始まりました
プロジェクトのEXT JS
具体的には、 EditableGridウィジェット。 元々
私は図書館が本当に好きでした。 まず、オブジェクト指向
構造。 問題は後で始まりました。 今後は私はまだまだだと言います
私はEXTJSのファンです。 同じであろう別のライブラリ
論理的であり、私が知らないそのような機会を提供しました。 またする必要があります
明らかなパフォーマンスの問題は、
テーブル内の多数の列、または多数の行（約
これはライブラリの開発者ですが、警告されています）。
ここで一般的なjsの問題について読むことができます。
CSS-カスケーディング スタイル シート -「そして何のために
カスケード？」
実際、この問題は私たちによって指摘されました
htmlエンコーダー（Zhenya、こんにちは！
J）
cssファイルを見てください。
使用されます。
はい、時々スタイルがカスケードされますが、
大多数-いいえ。 「問題は何ですか」とあなたは尋ねます。 私にとって
Javaプログラマの場合は問題ありません
拒否されたページにグリッドを埋め込むまで存在していました。 そして...
すべてのスタイルが浮かんできました。 グリッドはひどく見えました。 元気？ 事実は
すべてに共通のCSSスタイルを使用したページ
プロジェクトで説明されているスタイルよりも優先度が高い
grid.css。 なぜ
だから-私はあなたに説明しません。 これは、「パスがより正確に設定されるほど、
スタイルよりも優先されます」、少なくともこの説明はうまくいきます。 あります
別の修飾子「！重要」が、彼らが私に言ったように、これは良いではありません
虐待する。 プロのデザイナーの数を考慮してください
ここのコメントに説明があります。
だから、私自身のために、私は結論付けました-言葉を使う
CSS定義のカスケード。
CSS ルールの 更新 または最初のブレーキ
いずれかのグリッドの要件に応じて、
表示する列は20個ありました。 「小さい数」-思ったとおり。 それが判明した
いや
Ext.grid.GridViewは、楽しいメカニズムを使用して列幅を指定します。 描くとき
ノード<style>が作成されます。
空のビュースタイルが書き込まれます。
＃[グリッドID]
.x-grid-col- [number
列] {
2}
例：
＃grid-example .x-grid-col-0 {
2}
HTMLコードの準備ができたら、
これらの動的に生成されたスタイルは変更および指定されます
各列の幅。 そのようなスタイルごとに、
Ext.util.CSS.updateRule
これは安易な操作ではないと言わなければなりません。 そして、20
スピーカーの顕著なブレーキが観察されました。 だから最適化する必要がありました
このメカニズムは、以降に発生した具体的な一時停止を削除します
ユーザーが実際に何かできるようになるまでダウンロードします。
また、プロセッサの負荷は100％でした。
最初は空のスタイルではなく、すぐに生成しました
設定された幅で塗りつぶされた作成
（幅）。 乗るが、それからしなければならなかった
きれいにします（以下を参照）。
だから、自分のために、私は結論付けました-使用しないでください
CSSテーブルの動的更新。
多数の要素、または「可能な限り
突き出す？」
各セルのほぼそのようなコードが表示されます
グリッド：
<td class = "x-grid-col x-grid-td-1
x-grid-cell-5-1 "tabindex =" 0 ">
<div class = "x-grid-col-1
x-grid-cell-inner»>
<div class = "x-grid-cell-text" unselectable = "on"> $ 31.61 </ div>
</ div>
</ td>
これは1つのセルのみです。 それに加えて、
td、不幸なブラウザはまだ維持する必要があります
少なくとも2つのDOMオブジェクト。 記憶がかかる
およびリソース。
私の意見では、これは避けるべきです。
DOM テーブルを操作するか、「まあ、死んだ」
フォーラムは正直な開発者であることに注意してください
多数の行で作業すると速度が低下し、
ページネーションを使用する必要があります。 しかし... ...ユーザーは常に正しい
ページは見たくありませんでした。 実際、簡単な方法があります
かなり多数の行で動作するようにグリッドを最適化します（私は持っています
ブレーキなしで500で動作します）。
何が問題でしたか？ 事実は
GridViewは、プレゼンテーションにテーブルを使用します。
削除/挿入/編集操作が非常に遅い場合
行数が20を超えていました（列数が15を超えていました）。 それと
テーブルが単なる配列ではなく、必要なオブジェクト全体であることは明らかです
再集計/再描画。 さらに、すべての値を変更するとき
列（外部パラメーターに依存する計算列など）
ブラウザーは単純に死に、それ自体には至りませんでした。
これはどのように決定されましたか？ プロファイルから、私は
大きなテーブル（> 20〜30行）は、
小さいもの（20行未満）。 その後、私は実装を見ました
Googleスプレッドシート。 ここに
私がそこで見つけたもの：彼らは1つの大きなテーブルを使用しませんが、に分割します
1つ下にある多くの小さなもの。 幅も
列はスタイルではなく、より論理的には最初の行の幅で設定されます
スタイルを使用して
テーブルのレイアウト：
修正されました。
結果
したがって、GridViewは次のルールを念頭に置いて書き直されました。
-CASCADEスタイルを使用する
-追加の要素を追加しないでください
ドム
-動的なスタイル更新を使用しないでください
-大きなテーブルをいくつかに分割する
小さい
その結果、私は得た
大規模に使用できるEditableGrid
行数。
コードリビジョンExt JS / GridView
All Articles