現在、グラフから頂点を追加および削除するための管理パネルを開発しています。それぞれ約 500 個のノードを持つ 3 つの大きな「ネットワーク」グラフがあり、問題なくロードしてビルドできます。現在、HTML5 でグラフィカルに表示されるのは 1 つだけです。グラフ用のすべての HTML5 オブジェクトを作成するには、かなり時間がかかります (約 5 秒程度)。グラフは将来的に拡大する可能性があり、今回は増加する可能性があります。グラフ UI の構築中に Web サイトが応答しないため、これを解決しようとしています。「setTimeout」を使用しましたが、期待どおりの結果が得られませんでした。
ajaxで呼び出すことができる外部ファイルにjavascript-Objectを構築することが可能かどうか疑問に思っていましたか? ビルドするオブジェクトは、JavaScript 関数と HTML5 ベースのものであることに注意してください。
ありがとうございました。
この質問に対する私の仮定は次のとおりです。1) 問題なくデータを取得している 2) HTML へのレンダリングが速度低下の原因です。
DOM は、世界で最も応答性の高いものではありません。奇妙に聞こえるかもしれませんが、実際には膨大な HTML 文字列を作成し、それを div.innerHTML または $('#graph').html() の呼び出しで一度に設定するのは非常に高速です。
その理由は、文字列が構築されると、複雑な文字列処理と DOM 操作が、JavaScript エンジンではなく、高度に最適化された C または C++ で記述されたブラウザーで行われるためです。
もう 1 つのオプションは、レンダリングをセクションに分割し、setTimeout を使用して他のイベントに「譲る」ことを試みることです。
これにより、一度に 50 個のノードを 50 個反復処理し、setTimeout(next, 0) を呼び出して次の 50 個のノードを続行できます。これにより、多くの作業を行う前に他のイベントを処理できます。
setTimeout によって DOM が続行する前にその部分をレンダリングできるようになるため、1 つの副作用としてグラフが段階的に表示されることがあります。
nodejs を使用してサーバー上でプロセッサを集中的に使用するコードを実行し、単純な ajax 呼び出しで JSON の結果だけを返すことができます。
コードを見ないと、これをどのように実装するかについて詳細を説明するのは困難です。しかし、オブジェクトが既に JS で構築されている場合、ノードへのオフロードは難しくありません。
ノードを使用して単純なサーバー応答を作成する方法については、この回答を参照してください: node.js を使用した基本的な Ajax 送受信