このトピックでは、ページのパフォーマンス最適化に関するよくある質問とその回答を紹介します。
ビジュアルページの読み込みに影響を与える一般的な要因は何ですか?
コンピューターのハードウェア構成。たとえば、グラフィックカード、CPU、メモリの 3 つの側面です。
ネットワーク速度。
アプリケーションで使用される静的リソースを可視化します。たとえば、GIF、SVG イメージ、ファイルなどです。
コンポーネント構成データインターフェイスの応答速度と読み込まれるデータ量。
この操作を呼び出して、アプリケーションで使用されるコンポーネントの数、タイプ、バージョンが古いかどうかを確認できます。
可視化アプリケーションでは、ネットワークとコンピューターの構成が大きな影響を与え、次に静的リソースとデータインターフェイスの応答時間が影響します。
アプリケーションのカスタムコンポーネントによって導入されたサードパーティライブラリのタイプとバージョンが一貫しているかどうかを確認します。
マシン構成の影響。

一般的なページの読み込み時間はどのくらいが妥当ですか?
ブラウザのページ読み込み時間はコンテンツに関連しています。ビジュアルページでは、通常の Web ページのように 5 秒以内に開くように最適化することはより困難です。一般的に、ビジュアルアプリケーションは多数のコンポーネントを使用して表示コンテンツを充実させるため、ページの読み込み速度に影響します。この問題は、どのプロダクトを使用するかに関係ありません。
ページのパフォーマンスに関する問題のトラブルシューティングを行う一般的な方法は何ですか?
前提条件
コンピューターの構成を確認します。コンピューターの CPU 構成は i5-6500 以上、グラフィックカード構成は GTX960 以上、メモリは 8GB 以上を使用することをお勧めします。特定の構成は、解像度サイズや 3D 都市ビルダーコンポーネントが利用可能かどうかなど、実際の可視化アプリケーションに応じて決定する必要があります。
ネットワーク速度を確認します。100 Mb/s 以上のネットワーク速度を使用することをお勧めします。
次のステップを実行して、問題をトラブルシューティングします。
ネットワークのトラブルシューティング: ブラウザコンソールを開き、[Network] タブオプションを見つけ、キーボードで ctrl + r を押してページを強制的にリフレッシュします。各リソースのリクエスト期間と DOM レンダリングに必要な時間を観察します。


DataV サーバーによって開始されたデータインターフェイスを使用してデータをクエリする場合、プレビューページのリクエスト名はネットワークリクエストで 0 になり、公開ページのリクエスト名は可視化アプリケーション ID になります。
説明DataV サーバーを使用してデータをリクエストする場合、リクエスト期間は 10 秒に制限されます。データインターフェイスのリクエスト期間が約 8 ~ 9 秒である場合、一部のコンポーネントインターフェイスの応答速度が遅すぎて、リクエストがタイムアウトします。特定のリクエストの応答情報を表示し、タイムアウトがプロンプト表示されるかどうかに応じて対応するコンポーネント ID を見つけ、レイヤーリストを検索して、どのコンポーネントインターフェイスがデータ読み込みに影響しているかを判断できます。
パフォーマンスのトラブルシューティング: ブラウザコンソールを開き、[Performance] タブを見つけ、ショートカットキー ctrl + e を押すか、リフレッシュアイコンをクリックして [Performance Monitoring] ページに移動し、特定のリクエスト期間を確認します。
ページのパフォーマンス最適化とは何を意味しますか?
比較的高い構成と高速ネットワークアクセスを備えたコンピューターを使用することをお勧めします。
使用されているイメージまたはビデオのリソースが大きすぎないか確認します。イメージまたはビデオのリソースが大きすぎる場合は、別のフォーマットに置き換えることを検討してください。たとえば、gif の使用を避け、可能な限り webp または webm を使用します。OSS エンドポイントを使用してアクセス速度を向上させることもできます。
説明ビデオの場合は、.webm ビデオフォーマットを使用することをお勧めします。.mp4 ビデオフォーマットの場合は、.webm フォーマットに変換できます。同じ解像度では、.webm フォーマットは .mp4 よりも速く読み込まれます。
Chrome ブラウザを使用して chrome://gpu にアクセスし、対応する構成のハードウェアアクセラレーションステータスがアクティブであるかどうかを確認します。

コンポーネントデータインターフェイスの応答が遅すぎないか確認します。
データインターフェイスから返されるデータ量が大きいかどうかを確認します。大量のデータは、ウィジェットのレンダリング時間に影響します。条件付きのフィルターを使用してクエリ結果をフィルター処理し、返されるデータ量を減らすことができます。
冗長なコンポーネントが存在するかどうかを確認します。冗長または未使用のコンポーネントが存在する場合は、削除することをお勧めします。
Windows コントロールパネルの表示設定が 100% であるかどうかを確認します。
可視化アプリケーションでカスタムコンポーネントが使用されているか、またカスタムコンポーネントに導入されている依存ライブラリのバージョンとタイプが同じであるかを確認します。また、導入された js のサイズも制御します。たとえば、echarts.js は echarts.min.js と共に導入されます。
古いバージョンのコンポーネントが使用されていないか確認します。すべてのコンポーネントを最新バージョンに更新し、コンポーネントを更新する前に、バックアップとしてビジュアルアプリケーションのコピーを作成することをお勧めします。

パフォーマンス最適化に関する FAQ
ブラウザはどのようにページを読み込みますか?
ブラウザの解析
ブラウザはページリクエストを通じてドメイン名を解決し、サーバーにリクエストを開始し、ファイル (HTML、CSS、JS、イメージなど) を受信します。
HTML ファイルが読み込まれた後、DOM Tree の構築を開始します。
CSS スタイルファイルが読み込まれた後、CSS Rule Tree の解析と構築を開始します。
Javascript ファイルが読み込まれた後、DOM API と CSSOM API を通じて DOM Tree と CSS Rule Tree が操作されます。
ブラウザのレンダリング
ブラウザエンジンは、CSS Rule Tree から Rendering Tree を構築します。
レイアウトフェーズ: レンダリングツリー内のすべてのノードの幾何学的プロパティ (位置、幅、高さ、サイズなど) を画面に描画します。このプロセスは Flow または Layout と呼ばれます。
要素の描画: すべてのノードの視覚的属性を描画します。
レンダリングレイヤーのマージ: 上記で描画されたすべてのレイヤー (PhotoShop の「レイヤー」に似ています) をマージして、画像を出力します。