ページを選択

技術は常に進化しており、最新のウェブ アプリケーションに付随するために、ユーザーは最高水準を提供する必要があるブラウザを要求しています。 幸いにも、 今日使用しているブラウザは、メモリと CPU の割り当て、コードの実行などの機能を向上させました。 高品質のアプリケーションを実現するための重要な要素の 1 つは、優れた JavaScript フレームワークを使用することです。 反応、角度、および Vue は、最も人気のある JavaScript フレームワークの一部です。 JavaScript は、アプリケーションの応答時間を測定できる新しいパフォーマンス テスト レイヤーをブラウザに追加します。 これは、ターンアラウンドタイムがユーザーに大きな影響を与えるため、重要なステップです。 多くのカスタマー エクスペリエンス調査によると、ウェブ サイトの読み込みにかかる予想時間は 3 秒未満です。 3 秒後、ユーザーがサイトを継続する可能性は 50% に低下し、会社にとって大きな損失につながる可能性があります。

 

クライアント側の JavaScript パフォーマンスが重要

JavaScript の実行中、ブラウザーは、結果を受け取る時間に影響を与えているリソースを利用しています。 このような時間は、複数の実行サイクルによっても異なります。 これらの要因を分析すると、テスト戦略にクライアント側のパフォーマンス テストを含める必要がなくなります。 優れたクライアント側のパフォーマンス テスト ツールを使用すると、このような問題をかなり特定できます。 この記事では、さまざまな JavaScript フレームワークとそのプロパティについて説明します。 また、LoadView を使用してクライアント側のパフォーマンス テストを実行する方法を示す手順ガイドを説明する、 EveryStep Web Recorder、 複雑なユーザー パスとシナリオをスクリプト化します。

 

説明されたJavaScriptフレームワーク

JavaScript フレームワークの主な利点は、魅力的なユーザー インターフェイスとページの読み込み時間を短縮してアプリケーションを提供するのに役立ちます。 従来の方法では、ウェブ サイトのコンテンツはサーバー側で生成され、ブラウザーを使用して取得され、要求ごとにサーバーに接続する必要がありました。 ブラウザは非常に高度なので、開発者の介入をあまり受け入れずにサーバーと動的に通信できます。 したがって、最新の JavaScript フレームワークは、特に効率とリソースの使用率が向上し、その技法が高度に進んでいます。 最新の JavaScript フレームワーク機能の一部を以下に挙げました。

  • 効率的なデータ管理と高速なパフォーマンス。 ウェブ ページのコンテンツの更新は、必要な場合にのみ書き込まれます。 バーチャル ドキュメント オブジェクト モデル (DOM) は、コンテンツが変更された場合にのみ、レンダリングされたコンテンツと実際の DOM を管理します。
  • サイトのマークアップ内のデータは、適切にフォーマットされ、簡単に理解できます。
  • 内容はコンポーネントに基づいて表示されます。

 

JavaScript フレームワークの利点

以下は、ウェブ アプリケーションで広く使用されているJavaScriptフレームワークの利点のほんの一部です。

 

実行速度

JavaScriptはブラウザで実行しているので、非常に高速に実行されます。 時間のコンパイルでは、JavaScript はサーバーとの通信がないため、必要とされます。

 

コードのシンプルさ

すでに基本的なJavaの知識を持っているなら、JavaScriptを学ぶのは非常に簡単です。

 

人気

JavaScriptはウェブ上のどこにでもあります。 世界中の主要な組織は、実行速度とコードのシンプルさにより、アプリケーションにJavaScriptを適応させました。

 

サーバーの読み込み時間

JavaScript はクライアント側で使用されるため、サーバーの需要が減少します。 単純なアプリケーションでは、サーバーの必要性を完全に省略することもできます。

 

目を引くインターフェイス

JavaScriptを使用して、ユーザーインターフェイスを大幅に強化し、すべてのユーザーエクスペリエンスを向上させる機能を作成することができます。

 

Java スクリプトの欠点

 

安全

JavaScriptは非常に悪意のある攻撃を受けやすいです。 ブラウザでJavaScriptの実行を無効にする以外に避ける以外に方法はありません。

 

比較: 反応対ヴュー対角度

新しい JavaScript フレームワークを学習し、作業することは興味深い場合があります。 それらのすべては、独自の長所と短所を持っています。 フレームワークについて話すとき、それはプロジェクト、チーム、およびそれらの能力の一意性に完全に依存します。 これらのフレームワークの主要な機能の一部を、さまざまな要因の観点から比較して説明します。

 

反応する

ReactはFacebookによって開発され、2009年にリリースされました。 ユーザー インターフェイスを構築するための柔軟な JavaScript ライブラリです。 これは、大規模な ウェブ アプリケーションで使用されている、現在最も急成長している JavaScript フレームワークの 1 つです。 また、シングル ページ アプリケーション (SPA) の構築にも使用されます。 フェイスブックやインスタグラムなどと同じように、おそらく世界中の大多数の人々が使用しています。

 

反応の利点

Reactは単純な抽象化を使用しており、開発者にとって好きな概念的な整合性を持っています。 彼らは、作業を開始する独自のテンプレートエンジンを持っています。Reactは、開発者にとって管理しやすいように、パラダイムコンポーネントとイベントモデルも装備されています。

 

反応の欠点

主な懸念事項は、リアクションが HTML 内で JavaScript を使用するため、セキュリティに関するものです。

 

角度

AngularはGoogleによって開発され、2010年にリリースされました。 膨大なアプリケーション・プログラム・インターフェースと標準化構造により、SPAに適しています。 Angular の大部分は TypeScript 言語で記述されていますが、ほとんどの開発者は JavaScript の代替機能を使用することを好みます。

 

角度の利点

AngularJSは独自のバインディングを管理し、開発者がステップインする必要はありません all.it、すべての変更が遅延なくモデルで即座に更新されることを保証します。 angular はキャッシングをサポートするため、アプリケーションサーバーからの労力を削減し、サーバーリソースを他の重要なタスクに効率的に利用できるようにします。 また、コーディングを少なくして、高品質のアプリプロトタイプを開発することは非常に簡単です。 他の重要な側面は、開発者がより効率的にテンプレートを再利用するのを助けているプレーンなHTMLテンプレートの使用です。

 

角度の短所

セキュリティは、すべての JavaScript フレームワークにとって大きな懸念事項です。 セキュリティの問題を回避する唯一の方法は、ブラウザでJavaScriptを無効にすることです。 JavaScript 無効モードでアプリケーションにアクセスしている場合、Angular ベースの主要なプロパティは機能しません。 Angularの学習プロセスは、オンラインで利用可能な限られた援助しか持たなさため、大きな問題になる可能性があります。

 

ヴュー

Vueは、以前Angularに取り組んでいた元Google従業員によって開発されたプログレッシブ、段階的に採用可能なJavaScriptフレームワークです。 2015年に初めてリリースされました。 スピード、コミュニティサポート、人気の面で他の主要な枠組みよりもずっと優れていた。 利点の数に比べてデメリットの数が少ないです。

 

ヴューの利点

VueJS を使用すると、アプリケーションの機能をさまざまな方法で構築できるため、開発者にとって好評です。 Vue は単一のファイルコンポーネントを使用し、HTML の属性、目的、セマンティクスなどをすべてオーバーライドします。 また、コンポーネントが相互に通信できるようにもなっていますが、これはこのフレームワークの重要な要素です。 ネットフリックス、アドビ、小米科技などの大手企業がVueを使用しています。

 

ヴューのデメリット

最初のバージョンのリリース以来、フレームワークの安定性に大きな問題がありました。 Vue は、組織に大きな影響を与える可能性がありますので、安定性とセキュリティが非常に重要な大規模なプロジェクトには使用できません。

 

サイドバイサイド比較:リアクションJS、VueJS、およびAngularJS

次の図は、フレームワーク間の基本的な違いとパフォーマンス基準を示しています。

 

フレームワーク

 

 

反応対 Vue 対 角度: その他の考慮事項

安定性

角と反応はVueに比べてより安定しています。 Vue は、テクノロジーベースの高いアプリケーションに関して多くの問題を抱えています。

 

互換性

Angular は DOM ライブラリおよびフレームワークと互換性があります。 また、多くのサポートライブラリが含まれています。 Vue は、サードパーティーのライブラリサポートがはるかに少ないです。

 

ラーニングカーブ

Vue.jsの学習曲線は、より少ない数の抽象化を使用しているので、Reactと比較すると良いです。 角度はまた、比較的少ない学習曲線を有する。

 

セットアップの複雑さ

Angular は最も複雑なフレームワークですが、Vue は簡単に設定できます。

 

コミュニティサポート

Angularは、反応やVueよりも幅広いコミュニティサポートを提供しています。 無料のチュートリアル、サードパーティのツール、およびライブラリの多くはAngularとReactのために利用可能です。 Vueはコミュニティのサポートの面で彼らにはるかに遅れています。

 

フレームワークのサイズ

Vueは最小で、サイズに関してはAngularが最も大きいです。 サイズが大きくなると、アプリケーションのパフォーマンスが遅くなります。 Angular を使用してアプリケーションを開発する場合は、クライアント側で HTML ファイルを個別にダウンロードする必要があり、大量のデータが得られます。 反対に、Vue と React は実行に JavaScript ファイルのみを必要とします。

 

複雑さ

複雑な機能性アプリケーションでは、パフォーマンスが高く安定しているので、Reactが最初の選択肢となります。 Vue は小さなプロジェクトでも使用できますが、このフレームワークはプロジェクトのサイズに不安定になります。

 

ライセンス要件

React は 3 節 BSD ライセンスを使用します。 Vue と Angular には MIT ライセンスが必要です。

 

建築

Vue と Angular は、双方向データ バインディングをサポートする MVC アーキテクチャを使用して作成されます。 Reactは単方向フローをサポートします。 モバイル開発の複雑さから、より優れた安定性のためにReactを使用することをお勧めします。

最適化ケーススタディ

JavaScript で重いサイトは、パフォーマンスの問題が長い間知られていましたが、特にページの読み込み時間の領域で発生します。 自動車/電気自動車業界では、グラフィックスや技術的な詳細に重いサイトであるため、JavaScript関連のパフォーマンス上の問題を見ることがよくあります。 LoadViewを使用することで、 電気自動車 のウェブサイト Find My Electric は、使用済みの テスラモデル3ページ の負荷時間を合計で3.8秒以上短縮し、必要なスクリプトの数を減らすことができました。 この正味のパフォーマンス向上は、ウェブサイトユーザーにより良い体験を提供するのに役立つものでした。

 

パフォーマンスベンチマーク: 角度対ヴュー対反応

以下の図は、対話式の時間、スクリプトの起動時間、メモリ効率など、さまざまなパフォーマンスベンチマークの側面を表しています。

 

JavaScript フレームワークのスタートアップ メトリック

JavaScript 起動メトリック ,Stefankrause.net

 

 

ロードビューを使用した JavaScript アプリケーションのロード テスト

LoadView は、完全に管理されたクラウドベースのロード テスト プラットフォームであり、ユーザーは ウェブ サイト、ウェブ アプリケーション、API、ストリーミング メディアなどのパフォーマンスをテストできます。 LoadView は、Angular、React、Vue などの最新の JavaScript フレームワーク上に構築された ウェブ アプリケーションをテストできます。 LoadViewは、実際のブラウザを利用する市場で唯一のソリューションの1つでもあり、開発者はユーザーの視点から実際のパフォーマンスを測定して見ることができます。 これは、テスト JavaScript ベースのアプリケーションをロードするときに必要な内容です。

次の手順は、最新の JavaScript アプリケーションのロード テストのプロセスの概要を示しています。 LoadView は実際のブラウザーのように動作し、ブラウザー レベルで JavaScript の実行と認証ロジックをサポートします。 必要なのは、組み込みの EveryStep Web Recorderを使用して SPA ページでユーザー アクションをスクリプト化し、ロード テストを設定することだけです。 それは本当にそれと同じくらい簡単です。 LoadViewを使用すると、追加のハードウェアやサードパーティ製ソフトウェアのセットアップを心配する必要はありません- それはすべて設定され、テストの準備ができています。 堅牢な機能に沿って、最も高度なロードおよびパフォーマンステストプラットフォームを探しているなら、LoadViewよりも良い選択肢はありません。

 

ステップ 1. 初期セットアップと EveryStep Web レコーダーの使用

私たちがテストしようとしているウェブサイトは histography.io です.これは、単一のページビューで世界の歴史イベントを表示する純粋なJavaScriptベースのアプリケーションです。

histography.io ホームページ

 

LoadView アカウントをお持ちの場合は、 無料試用版にサインアップできます。 ロード テスト クレジットで $20 が自動的に受け取ります。 すでにアカウントをお持ちの場合は、アカウントに直接ログインするか 、EveryStep Web Recorder を起動 してスクリプトを開始します。 または、アカウントにログインした場合は、[ 新しいテスト ] をクリックすると、次のようにレコーダーウィンドウが開きます。 [ウェブ アプリケーション] をクリックします。

ウェブアプリケーション

 

 

ステップ 2. URL を入力して新しいスクリプトを記録する

ウェブ アプリケーションをクリックすると、EveryStep Web レコーダーが起動します。 ウェブ アプリケーションのアドレスを入力する必要があります。 私たちの場合、それは histography.ioです. 要件に基づいて デスクトップ/モバイル を切り替えることもできます。 選択内容に応じて、録音モードが変更されます。 アンドロイド、iPhoneなど、さまざまなモバイルオプションがあります。 また、モバイル/画面の動作を模倣する画面の向きを切り替えるオプションもあります。 要件を入力したら、[ 今すぐ記録] をクリックします。

URL を入力する

 

記録が開始され、ロード テスト用に記録する必要があるフロー内を移動できます。 スクリプト コード セクションでは、記録の詳細を確認でき、必要に応じてコードを変更できます。 特定の要件に応じて 、遅延、Crypt 変数、ネットワーク条件などの特定のパラメータを追加できます。

JavaScriptの記録開始

 

ステップ 3. スクリプトを完成する

録音が完了したら 、[停止 ] をクリックします。 [ 今すぐ再生 ] をクリックして、スクリプトを再生します。 これにより、記録中にキャプチャされたエラーが発生しません。 スクリプトは、記録したユーザー パスで再生されます。

JavaScriptの停止記録

 

スクリプトにエラーがある場合は、エラー メッセージが表示されます。 それ以外の場合は、エラーがない場合は、以下の成功メッセージが表示されます。 必要に応じて、スクリプトを保存し、後で変更します。

 

JavaScript 再生結果

 

[スクリプトの保存] ボタンをクリックすると、記録された スクリプト の詳細が表示されます。 このスクリプトは、さらに拡張できるように変更できます。

  • ステップを追加する。 スクリプトの最後にステップを追加するには、単にレコードボタンを押し、ステップの追加を続けるオプションを選択します。
  • ツールを使用してスクリプトを変更する。 ウィザードを使用してスクリプトの途中で新しい行を追加する。新しい行を追加する編集ウィンドウ (画面の下部) 内でスクリプトを右クリックできます。 新しいステップとして追加するツールを含むコンテキストメニューが表示されます。
  • 変数の編集: キーワード、フィールド値(ユーザー名やパスワードなど)を編集するには、下線付きのフィールドラベルを左クリックして値を編集します。
  • コンテキスト パラメーター。 スクリプト メソッドのパラメータをコンテキストに変換できます。

 

スクリプトの編集の詳細については、 ナレッジベースのページを参照してください。

ステップ 4. デバイスの作成

[デバイスの 作成] ボタンをクリックして、テスト実行ステップを開始します。

JavaScript 構成タスク

 

続行する前に、必要に応じて最終的な変更を行うことができます。 ユーザーの動作を調整するか、デバイスを編集して、さらに変更を加えます。 ユーザー数と期間に基づいて、実行の総コストを確認できます。

JavaScript テスト シナリオのセットアップ

 

ステップ 5. ロード テストの作成

要件に応じて、荷重タイプのカーブを選択します。 LoadView では、荷重ステップカーブ、ゴールベースカーブ、動的調整可能曲線の 3 つの選択肢があります。 特定のパフォーマンス要件に基づいて、負荷タイプを決定できます。 このテストでは、荷重ステップ曲線を選択しました。

JavaScript ロードカーブタイプ

 

世界中のユーザーがアプリケーションにアクセスしている場合は、顧客の場所に基づいて LoadView 負荷ジェネレータを選択できます。 ミネソタ州の場所を選択しましたが、LoadViewプラットフォームでは15以上の場所から選択できます。 必要なユーザー数に基づいて、サーバーの数を選択できます。 クライアント側/JavaScriptパフォーマンステストは非常にリソースが多くなります。

ジャバスクリプトジオディストリビューション

 

ステップ 6. ロード テストを開始する

テストの種類とサーバーを選択したら、[ 続行] をクリックします。 テストが完了したら通知する必要があるメールアドレスを尋ねられます。 既定のテスト結果は LoadView アカウントの所有者にも送信されます。 テストを開始するには、2 つのオプションがあります。 テストを今すぐ開始するか、後でスケジュールすることができます。

ロード テストの開始

 

テストが開始されると、テストの状態に関するリアルタイムの情報を確認できます。 サーバーに関するすべての情報とシナリオの詳細が提供されます。 直前の変更を行う場合は、テストをキャンセルするオプションもあります。 テストの初期状態が送信され、テストが再開されると、テストの状態が実行中に変わります。

ロード テスト レポート

 

 

ステップ 7. ロード テストの実行

作業モデルグラフ(実行プラン情報)は 、[テストの概要] タブで利用でき、テストを実行しているユーザーの最大数に関する情報も表示されます。 また、実際のユーザー数と予想されるユーザー数も表示されます。

Java スクリプト実行プラン

 

JavaScript 平均応答時間

 

成功セッションの合計数とエラー セッションの合計数。 このグラフは、エラーに関する情報を提供します。

 

エラーの数

 

ステップ 8. パフォーマンス テストの分析とレポート

テストが完了すると、ロード テスト レポートと実行の詳細が表示され、実行に関する全体的な情報が提供されます。 また、詳細とPDF添付ファイルを含むロードテストレポートを電子メールで受信します。 これはチーム メンバーと共有できます。

JavaScript ロード テスト レポートの完了

 

最終的な考え方: JavaScript アプリケーションパフォーマンステストの実行方法

JavaScript フレームワークは、独自のユーザー エクスペリエンスを提供するためのアプリケーションを作成する独自の機能を提供します。 JavaScript アプリケーションをロードテストして、JavaScript フレームワークに対して行った時間と投資を確認します。 EveryStep Web Recorderの主な利点は、コーディング経験やスキルが不要なため、誰でも簡単に使用できる点です。 EveryStep Web レコーダーの使用の詳細については、こちらをご覧ください

LoadViewプラットフォームは、ブラックフライデー/サイバーマンデーのような大きなトラフィックイベントのためにあなたのウェブサイトやアプリケーションをテストするのに役立ちます。 Eコマースサイトやアプリケーションがトラフィックの急増の下で実行できることを保証するのは、早期に行う必要があります。

今すぐ開始して LoadView 無料試用版にサインアップするか、パフォーマンス エンジニアと 1 対 1 のデモに サインアップしてください。 彼らは、LoadViewが提供するすべての機能を歩き、デモンストレーションを喜んで行います。