HTML5 ネットワーク トポロジ図のパフォーマンス最適化の詳細な図による説明

HTML5 Canvasのテキストレンダリング（fi​​llText、ストロークText）のパフォーマンスがあまり良くありません（設定など）フォント（フォント）、テキストの回転（回転）、多くのテキストを描画すると、一部のインタラクティブな操作が手動で大きな影響を及ぼし、操作がそれほどスムーズではなくなり、エクスペリエンスが非常に低下します。さらに絵の描画と比較すると、絵の描画とテキストの描画はパフォーマンスの点で同じレベルではないことがわかります

HT について話しましょう。 パフォーマンス関連の問題。 HT では、各ノードに 2 つのラベルと 2 つのノート テキストを設定できる場所がたくさんあります。それらがすべて有効になっている場合、ノードを描画するには 4 つのテキストを描画する必要があります。テキスト描画の消費パフォーマンスが画像描画の3倍だとすると、テキストを4つ描画することは12倍のパフォーマンス消費に相当し、それ以上のノードがあれば、どのエンジンであっても維持することは不可能であると考えられます。

テキストの描画によるパフォーマンスの消費は避けられないため、別の考え方として、テキストの描画により高いパフォーマンスが消費され、動作の遅延や遅延が発生する可能性があります。なので、操作中にテキストを描画せず、テキスト描画によって消費されるパフォーマンスを保存し、他のパフォーマンスの消費に使用することはできますか？これで操作の遅延とラグの問題を解決できますか？ 、GraphView

にいくつかのノード、エッジ、グループ、その他のノードを追加し、各ノードにテキスト(上の図に示すように線を含む)を表示して、トポロジを確認します。2つ待つ必要がありますか?この種のアプリケーションは明らかに不適格です。具体的なデモを見て、コードの実装を詳しく分析してみましょう。コードはページの初期化コードです。まず、異なる devicePixelRatio 画面の切り替えによってページが不鮮明になるのを防ぐために、メディアの値の変化を監視します。これは、デバイスピクセル比を格納する変数を

更新します。 HT システムを更新し、ページが不鮮明にならないように、ページ上のすべての HT コンポーネントを更新します

次に、共通ネットワーク トポロジ図 GraphView コンポーネントが DOM に追加され、オーバーロードされます。 GraphView の getLabel メソッドを使用してグラフィック要素のテキストを設定し、各ノードにテキストが含まれるようにします。

次に、createNodes メソッドを呼び出してすべてのノードを作成します。自動レイアウトにより、開発者の手動レイアウトの時間が節約され、効率が大幅に向上します。 GraphView のノードは画面に適応して、すべてのノードが現在のページに表示されます。

最後に FormPane を作成し、右上隅に配置して、いくつかのコントロール ボタンといくつかの ComboBox の選択を保存します。これにより、

GraphView をさまざまなレイアウト モードで実行できるようになります。ページのパフォーマンスを検出し、レイアウト プロセス中にスムーズであるかどうかを確認し、ブラウザのソースを通じて特定のコードを表示できます。

テキストが常に表示される場合は、前述したように、まだパフォーマンスが良くありません。では、パフォーマンスを定性的に向上させるためにどのように最適化できるのでしょうか?

記事の冒頭で述べたように、操作インタラクション中にテキストを描画しないことにより、パフォーマンスが向上し、ページのプレゼンテーションがよりスムーズになります。では、操作の対話中にテキストが描画されないようにするには、どうすればよいでしょうか?コードを表示します:

var init = function() {
    window.matchMedia('screen and (min-resolution: 2dppx)').
        addListener(function() {
            ht.Default.setDevicePixelRatio();
        });    var g2d = new ht.graph.GraphView(),
        dm = g2d.dm();
    g2d.addToDOM();
    g2d.getLabel = function(data) {        
    if (data.s('label'))            
    return data.s('label');        
    if (data instanceof ht.Edge)            
    return 'from:' + data.getSourceAgent().toString() + 
                ' to:' + data.getTargetAgent().toString();        
                return data.toString();
    };

    createNodes(dm);    
    var autoLayout = new ht.layout.AutoLayout(g2d);
    autoLayout.setAnimate(true);
    autoLayout.layout('symmetric', function() {
        g2d.fitContent(true);
    });

    createFormPane(g2d, autoLayout);
};

まず、GraphView

は isLabelVisible メソッドを提供し、ユーザーがカスタム テキストを表示するかどうかをオーバーライドできるようにします。状態変数は、現在の操作ステータスをマークするために使用されます。 GraphView はズームとパンを行っており、現在の GraphView がシーン全体を移動していることを意味し、autoLayout は自動レイアウト操作を行っていることを意味します。

GraphView の mp (addPropertyChangeListener) メソッドは、GraphView のプロパティの変更を監視します。ズーム プロパティの変更が監視されると、ズーム プロセス中にアニメーションが開始されない場合、onZoomEnded コールバックが設定されます。したがって、タイマーを自分で追加し、しばらくしてからズーム状態を変更し、GraphView を再描画する必要があります。

GraphView の mi (addInteractorListener) メソッドは、GraphView でのユーザーの操作アクションをリッスンし、beginPan をリッスンするときにパンニング ステータスを true に設定し、endPan をリッスンするときにパンニング ステータスを false に設定します。そしてGraphViewを再描画します。

FormPaneの一部の操作はGraphViewにノードを自動的にレイアウトするため、FormPaneにautoLayout状態が設定されます。コードが多いので、ここにコードを貼り付けます。上記のコードを追加した後の GraphView 操作の効果を見てみましょう:

上の図は、GraphView をスケーリングしたときの効果であり、すべてのテキストが消えていることがわかります。操作性 起動時の遅延やラグがないため、ユーザー操作インタラクションのパフォーマンスの問題が解決されます。

以上がHTML5 ネットワーク トポロジ図のパフォーマンス最適化の詳細な図による説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。