最新の Web ページに含まれる Web テクノロジーがさまざまな組み込みであるため、パフォーマンスの監視と負荷テストは困難な作業になる可能性があります。 この記事では、監視ツールまたはソリューションの適切な種類を選択する際に考慮する必要がある動的 Web アプリケーションやその他の要素を監視する際の特殊性について説明します。

動的 Web ページと静的 Web ページ

Web ページの種類はすべて、静的および動的の 2 つの主要なグループに分けることができます。

一言で言えば、静的 Web ページは、すぐに使用できる形式でサーバー側で生成される HTML ページです。 一般に、ページ生成は ASP、PERL、PHP などのサーバー側のスクリプト言語を使用して実装されます。 ブラウザが URL に対して要求を行うと、サーバーは、応答に Web ページのテキストとグラフィック コンテンツを既に含む HTML ドキュメントを返します。

一方、現在最も一般的な Web ページやアプリケーションは動的です。 動的要素を実装するために、ウェブ開発では、反応、Vue、Angular JS、ノックアウト、およびエンバーなどの最新の JavaScript フレームワークが使用されます。

動的 Web ページは、静的 URL で実行されている間に、ユーザーアクションのコンテンツを取り込みます。 動的コンテンツは、その構造がより複雑です。 ページは、すぐに使用できる HTML ドキュメント内のサーバーから受信されませんが、クライアントのコンピューター上の新しい要求ごとに作成されます。 ユーザーがボタンをクリックしたり、Web ページで他のアクション (タブ間の移動、Web フォームへの入力など) を実行するたびに、ブラウザはウィンドウ内のページコンテンツを書き換える前に、いくつかの手順を実行します。

  • HTML ドキュメントをドキュメント オブジェクト モデル (DOM) に解析します。
  • CSS を処理します。
  • 埋め込まれた JavaScript を実行します。

JavaScriptベースのアプリケーションの監視のСhallenges

静的 Web ページ のパフォーマンスを監視している間、監視ツールはターゲット サーバーから受信した HTTP 応答を調べています。 ユーザーが静的 Web ページを操作するたびに、ブラウザーがサーバーを呼び出し、応答で準備完了の HTML を受信します。 ユーザーに表示する必要のあるすべてのコンテンツが既に生成され、サーバー側の応答に含まれるため、ツールはコンテンツとページ読み込みメトリックを検証できます。

ただし、最新の JavaScript フレームワークは、動的な Web ページの監視に関しては、いくつかの課題を提供します。

コンテンツと機能の検証

単一ページ アプリケーション

(SPA) と呼ばれる JavaScript ベースの Web ページは、一度読み込んだ後にブラウザーで新しいナビゲーションを実行しません。 最初の HTML ドキュメントには、任意のブラウザー イベントでトリガーされ、JSON データのサーバーを呼び出す JavaScript ファイルが含まれています。 これらのデータは、最初の HTML を更新し、ブラウザー ウィンドウのページコンテンツを動的に変更するために使用されます。

同時に、SPA と iFrame インライン要素を持つアプリケーションには、広告セクション、分析、ウィジェット (Google マップ、YouTube 動画など) などのサードパーティの埋め込みコンテンツを含めることができます。 このようなコンテンツを表示するには、ブラウザはページの HTML コードを解析し、サードパーティのスクリプトを実行します。 次に、サードパーティのスクリプトはコンテンツを取得してページに表示します。

監視の観点からは、HTTP ベースの監視ツールに対してイベントが生成され、表示されないため、新しいコンテンツがページに読み込まれた時点 (画像の読み込み、ダイアログ ボックスの開きなど) を正確に把握することは困難です。

実際のページ読み込み時間とパフォーマンスの決定

一般に、HTTP 応答は、ターゲット Web ページへの要求の成功した結果として使用されます。 しかし、すべてのJavaScriptファイルがブラウザによって解析され実行され、コンテンツがレンダリングされ、ユーザーに表示されたという意味ではありません。 最初の HTML が読み込まれると、ブラウザーはすべての埋め込み JavaScript の実行を開始します。 SPA と iFrame の観点から見ると、DOM ツリーはページ読み込みが完了したよりもずっと早くまたは遅くレンダリングできます。 つまり、実際のユーザーがページを操作できる時間と、”complete” イベントの読み込み時間の差は、数秒までです。

さらに、JavaScript ベースのページが読み込まれると、そのページで以降に行われたすべての変更によって、サーバーへの新しいブラウザー要求がトリガーされません。 その結果、HTTP ベースの監視では、最初のページ読み込み後にページに変更のメトリックが提供されません。 実際の読み込み時間を受け取るためには、実際のブラウザウィンドウでJavaScriptイベントを監視する必要があります。

包括的な監視の鍵となるフルスタックソリューション

前に示したように、最新の Web アプリケーション ロジックの特徴は、プロトコル レベルで動作し、ブラウザーを使用しないツールを使用して監視とテストに制限を置きます。

実際のユーザー エクスペリエンスを模倣するには、完全な JavaScript ランタイム環境で監視を実行するために、実際のブラウザーが必要です。 Dotcom-Monitor監視プラットフォームやLoadView負荷テストソリューションなどのフルスタックソリューションは、実際のブラウザを使用して、説明されているすべての課題を克服し、現実的な結果を確実に実現します。

動的 Web ページの監視: EveryStep Web レコーダー

JavaScript エンジンで実行されている読み込まれたページでユーザーが適切なコンテンツを受け取るように、Dotcom-Monitor は、実際のブラウザー ウィンドウにアサート キーワードとイメージ検証機能を提供します。 実行する必要がある簡単な手順を次に示します。

  1. EveryStep Web レコーダーを使用して、ターゲット Web ページでユーザーアクションをスクリプト 化します。
  2. 各ステップに 対してコンテンツ検証 を設定します。

たとえば、JavaScript ベースの Web ページの例として、Dotcom モニタ の電子メール レポート履歴 ページの監視を設定してみましょう。

まず 、EveryStep Web レコーダー を開き、ターゲット URL を指定する必要があります。

記録が開始されたら、ページのドロップダウンが正しく機能し、指定されたコンテンツが読み込まれたことを確認するために、ドロップダウン要素をチェックし、ドロップダウンごとにassertキーワードを設定する必要があります。 コンテンツ検証エラーの場合、監視デバイスに対してアラートが生成されます。

SPA のパフォーマンスの問題を発見する方法

SPA ロジックは JavaScript テクノロジに大きく依存しています。 したがって、アプリケーションの SLA 要件を満たしていることを確認するには、ページ上で生成された JavaScript イベントのパフォーマンス メトリックを監視する必要があります。

Dotcom-Monitor を使用すると、JavaScript 要求の実行時刻、またはターゲット ページで特定のユーザー アクションを処理して実行した時間に関するレポートを構成できます。 デバイス レポートの JavaScript メトリックに関するデータを受信するには、ES レコーダーで ネットワーク 監視 機能と タイム ウォッチャー インライン関数を使用します。

また、AJAX テクノロジを使用して構築された Web アプリケーションの場合は、デバイスの ウォーターフォール チャートで AJAX 要求メトリックを見つけることができます。

概要: 動的 Web アプリケーションの監視

つまり、動的な Web ページやアプリケーションの監視を設定する際に、ブラウザー ウィンドウで JavaScript イベントをすべてキャッチするために実際のブラウザーを利用する監視ソリューションを使用して、最も正確な監視結果を得ることをお勧めします。

SPA での動的コンテンツと機能のパフォーマンスを監視するには、実際のブラウザー環境でのコンテンツ検証 (イメージとキーワードの検証)、および JavaScript パフォーマンス メトリックの監視を実行する必要があります。

  • 動的 Web アプリケーションを構築するためのフロントエンド フレームワーク

    フロントエンド フレームワークは、Web アプリケーションの一部としてブラウザー ウィンドウに表示されるページの外観を定義します。 サーバー フレームワークとは異なって、フロントエンド フレームワークは Web アプリケーションのビジネス ロジックでは機能しません。 これらのフレームワークは、すべての作業をブラウザで実行します。 さまざまなタイプのフロントエンド フレームワークを使用して、新しいユーザー インターフェイスを作成し、複雑なアニメーションを Web ページに追加し、単一ページ アプリケーションを実装できます。 この記事では、JavaScript ベースのフレームワークについて詳しく説明し、UI 開発プロセスを容易にするためにそれらを使用することの利点と欠点について説明します。

    今日では、市場にはJavaScriptフロントエンドフレームワークが一握りあります。 Web 開発コミュニティで最も好まれる 6 つのフレームワークのリストを次に示します。

    • Angular – GoogleによるJavaScriptに基づくオープンソースのフロントエンドフレームワークです。 これは、シングル ページ アプリケーション (SPA) の開発を専門としています。 フレームワークでは、テンプレート言語として HTML を使用して、クライアント側の Web アプリを最初から作成できます。 追加のカスタム HTML 属性を使用すると、アプリケーション コンポーネントを明確に記述できます。 AngularJS ベースのアプリケーションの監視の詳細については、 ブログ記事をご覧ください。
    • React – 正式には JavaScript フレームワークではなく、ユーザー インターフェイスの作成に使用されるフロントエンド ライブラリです。 Facebookが導入したオープンソースであり、世界中のウェブ開発者によって広く使用されています。 ReactJSで書かれたWebアプリケーションの監視の詳細については 、ブログ記事で参照してください。
    • Vue.js – 単一ファイル コンポーネントと、それらの間の一方向のリンクで動作するフロントエンド フレームワークです。 Vue CLI ツールと呼ばれる Vue のコマンド行インターフェースにより、開発プロセスがより速く、より簡単になります。 VueJS でビルドする Web アプリケーションの監視の詳細については、この 記事 を参照してください。
    • エンバー – EmberJSの主な機能はデータバインディングです。 データ バインディングの方法では、JavaScript 変数を作成でき、その変数の値が変更されると、その変数にバインドされているアプリケーションの部分が更新されます。
    • ノックアウト – MVVM (モデルビュービューモデル)モデルで動作するオープンソースのフレームワークです。 これは、外部の依存関係を持たない JavaScript で開発されています。 ノックアウトは軽量で使いやすく、特にデータバインディングが効率的です。 このフレームワークは、単一ページ アプリケーションを作成する場合に適しています。 ノックアウトのウェブアプリの監視に関する課題.js詳細については、 ブログで参照してください。
    • AJAX – 実際には、AJAX (非同期 Javascript と XML) は、Javascript と XML のテクノロジの合成です。 これは、Web 2.0 という用語に関連付けられるフレームワークで、最新の Web アプリケーションとして宣伝されます。 AJAX ベースのアプリケーションの監視の詳細については、この 記事 を参照してください。

    JavaScriptフレームワークとは何ですか? なぜあなたはそれを試してみる必要がありますか?

    JS フレームワークは、Web 開発者が一般的なプログラミング関数やタスクを実装するために使用できる、あらかじめ記述されたコードを持つ JavaScript プログラミング ライブラリです。 これは、周りのウェブサイトやWebアプリケーションを構築するための基盤です。
    JavaScript フレームワークが UI 開発者の間で非常に多くのフォロワーを集めた理由を説明しましょう。 フレームワークを使用しなくてもコーディングプロセスは完全に可能ですが、適切な環境でこのプロセスを非常に簡単にすることができます。 さらに、JSフレームワークの大半は自由でオープンソースであり、開発プロセスへの統合がさらに簡単になります。
    まず、JSフレームワークを使用すると生産性が向上します。 UI 開発者は手動で多くのコードを記述する必要がなくなり、あらかじめ作成されたすぐに使用できる関数やコード スニペットを使用できます。 ここでは、事前に作成されたコードテンプレートを展開して、ウェブサイト上にいくつかの標準 Web コンポーネントを作成できます。 フレームワークは、ウェブサイトのデザインに対してより応答性が高く、ウェブサイト開発者によってより高く評価されています。 最適な JS フレームワークを見てみましょう。

    今日の市場の大きなシェアは、React、Angular、Vueの3つの一般的なフレームワークによって保持されています。 これらのフレームワークは、アプリケーションの状態の変更に反応し、ユーザー インターフェイスを自動的に更新するため、リアクティブと呼ばれます。 たとえば、Web ページ上のテキスト フィールドのサイズを制御する変数を宣言し、その変数を変更すると、手動でコーディングしなくてもフィールドのサイズが変更されます。 任意のプログラミング言語を使用してデータを抽出し、JSON、XML、または他のマシンで読み取り可能な他の言語でバックエンドにパックし、フロントエンドに渡すことができます。 その結果、JSフレームワークはフロントエンドに残されたすべての作業を行います。 フレームワークは、コントロールの描画、アニメーションの設定、データのチェック、ユーザーの好みに応じた情報の提示、およびビジネス ロジックの実装を行います。 すべての作業はブラウザで実行され、データ (場合によっては、テンプレートとビジネス ロジック ルールの新しい部分) のみがブラウザと Web サーバの間で転送されます。 したがって、リアクティブフレームワークは、すべての作業が1つの画面で行われるときに、単一ページアプリケーションの概念を実装するための不可欠なツールです。

    ヴュー.JS

    Vue は、人気のあるフロントエンド フレームワークの 1 つです。 洗練された角度に比べてシンプルで簡単です。 軽量であることに加えて、その主な利点は、ビジュアル DOM、コンポーネントアプローチ、および双方向データバインディングです。 Vue は多用途でマルチタスクが可能で、簡単にシンプルなプロセスと動的プロセスの両方を処理できます。 Web アプリケーションとモバイル アプリケーションの両方を作成するために使用できます。 さらに、Pinterest、Spotifyなどのデバイスやネットワークタイプに依存しないプログレッシブウェブアプリ(PWA)の作成に成功します。

    Vue には、フレームワークの概念に関する高レベルで詳細な情報を得るのに役立つ、広範かつ詳細なドキュメントがあります。 このフレームワークは、JavaScript プログラマが簡単に使用して理解できる簡単な構文をサポートしています。 フレームワークの主な利点の 1 つは、コンパイル段階で潜在的なエラーを防ぐことを可能にする組み込みの Typescript サポートです。 型スクリプトのサポートは、大規模なアプリケーションを構築する場合に非常に便利です。

    Vue.jsは柔軟なデザインに推奨され、すべてをゼロから構築し、大規模なプロジェクトを正常に開発することができます。

    あなたがそれを使用するのを止めるかもしれない唯一のものは、FacebookやGoogleなどの業界の巨人からのサポートの欠如です。 また、中国語でのみ利用可能な説明もあることを、我々は述べるべきです。 これは、いくつかの段階で開発プロセスにいくつかの困難をもたらします。 しかし、このフレームワークがどれほど普及しているかを考えると、近い将来にトレンドが変わる可能性があります。

    反応する

    Reactは、最も簡単なフレームワークの1つです。 このフレームワークは、アプリケーションに機能が絶えず追加されているため、メンテナンスの問題を修正するためにFacebookによって開発されました。 Reactは、ウェブサイト上のトラフィックの多くを期待し、それを維持するために安定したプラットフォームを必要とする人のための完璧なプラットフォームです。 最新のオープン ソース React は、その優れた機能を提供し、Web アプリケーションの安定性と円滑な実行を保証するその仮想ドキュメント オブジェクト モデル (DOM) で注目に値します。 フレームワークはクライアント側だけでなく、サーバー側で使用することができ、さらに、Reactは他のフレームワークでも使用できます。

    それを際立たせるReactの主な特徴は、UIコンポーネントを再利用する機能です。 UI コンポーネントは、一度作成し、アプリケーションの他の部分で再利用できます。 さらに、新しいクラスを記述せずに UI コンポーネントを作成できます。 これにより、Reactを学ぶのが簡単になります。 また、React開発者ツールは、Reactコンポーネント階層の検査を支援するために常に手に取られます。

    反応には多くの利点があります。 この記事では、これらの一部のみを説明しましたが、再利用可能な UI コンポーネントを使用してユーザー インターフェイスを構築する必要があるユーザーには、フレームワークが適している可能性があります。 要するに、Reactは、インタラクティブなインターフェースを開発したい場合に市場で最も信頼性の高いフロントエンドフレームワークです。

    JsXをマスタリングしてReactプロジェクトを作成する場合、Javascriptで少なくとも基本的な経験がない限り、JSXを使用するのは難しいかもしれません。 また、多数の更新プログラムが更新され続けるため、Reactドキュメントを最新の状態に保つことで、いくつかの困難に直面する可能性があります。

    角度

    最適なフロントエンド フレームワークのリストは、Angular なしでは完全ではありません。 Reactとは異なり、Angular は双方向データバインディング機能で一意です。 つまり、モデルとビューは常にリアルタイムで同期されます。 つまり、モデルの変更はビューとその逆に即座に反映されます。 Angular は、コンポーネントを再利用し、依存関係の注入を使用して簡単にコンポーネントを管理する機能を提供します。 フレームワークには、最も広く使用されている関数が付属しており、プロジェクトのコードを少なくできます。

    Angular は、双方向データ バインディングを使用して、コンテンツを短時間で動的に更新することで、Web アプリケーションのパフォーマンスを向上させます。 エンタープライズ アプリケーションや動的 Web アプリケーションに最適です。