ノックアウト.jsは、単なるノックアウトJS、ノックアウト、または単にKOとして知られており、開発者が近代的でダイナミックなウェブサイトを構築するのに役立つモデルビュービューモデル(MVVM)パターンに基づくオープンソースのスタンドアロンJavaScriptライブラリです。 マイクロソフトの開発者/アーキテクトであるスティーブ・サンダーソンは、2010 年 7 月 5 日に作成しました。 MVVM パターンを実装しているため、表示されるデータ (ユーザー インターフェイス)、ビュー コンポーネント (JavaScript 表現モデル)、およびドメイン データ (格納されたデータ) の間に、ビュー コンポーネント間の動作を管理するコードのレイヤーを明確に定義することで、個別のロールを設定します。 これは、コンポーネント同士の相互作用が簡単になるため、ネイティブイベントを管理するJavaScriptの機能を実際に強調しています。
Knockout が提供する最も関連性の高い機能には、宣言バインディング、自動ユーザー インターフェイスの更新、依存関係の追跡、テンプレートの使用法、および拡張性があります。 KO はデータ バインド属性を通じてモデルを DOM にリンクし、より動的な方法でデータを表示し、ユーザー エクスペリエンスを豊かにするのに役立ちます。 自動更新は、追加のコードを記述することなく、モデル データに変更があった場合に、ウェブ ブラウザーの DOM を更新するのに役立ちます。 ノックアウトの依存関係の追跡は、ノックアウトのライブラリ関数を利用して、KO属性を監視し、自動的に更新します。 さらに、Knockout のテンプレート機能は、堅牢なユーザー インターフェイスをシンプルかつ便利な方法で構築するのに役立ち、最終的にカスタム動作を拡張するのに役立ちます。 ノックアウトは、Google ChromeやFirefoxのようなすべての主要なウェブブラウザでサポートされています。
ノックアウトでの一般的なパフォーマンスの問題
Knockout 2.0 では、制御フロー バインディングと呼ばれるきちんとした機能が導入され、テンプレート バインドに制御層が追加されました。 レイヤーは、子コンポーネントをテンプレートとして使用し、トリガーされるたびに再レンダリングします。 しかし、開発者は、このリソースを過度に、計画なしで利用しないように意識する必要があります。
通常、Knockout 開発者は、if
と
with binding を不適切に使用して、頻繁にレンダリングするコンポーネントに遭遇します。 これが発生する一般的なシナリオは
、if
バインディングを使用して監視可能な配列が設定されている場合にのみ、特定のコンポーネントを表示する場合です。 このような実装は、観察可能な配列の要素に依存し、変更が発生するたびにノックアウトが改訂および更新されます。 同様に
、with
バインドは、入れ子になったオブジェクトを管理するのに非常に役立ちます。 ただし、変更が発生するたびに、その要素を受信データにバインドするのではなく、セクション全体を新しい要素で再レンダリングします。 コンポーネントが複雑で、ノックアウトの外部にイベントが添付されている場合、これはコストのかかる操作になる可能性があります。
ロード時間を高めるためのパフォーマンスツール
残念ながら、ユーザーインターフェイス上にパフォーマンス統計をオーバーレイすることができるKnockoutJS用のChromeの拡張ストアにはカスタムパフォーマンスツールはありません。 したがって、Knockout 開発者は、他のリソースを使用して、潜在的なパフォーマンスの問題を視覚化して特定する必要があります。
クロム開発ツールと灯台
Chrome 開発ツールは、あらゆる種類の ウェブ 診断やデバッグの問題について開発者を支援する一連の ウェブ 開発ツールです。 利点は、ツールがブラウザ内に構築され、開発者がエラーをすばやく見つけて修正できる点です。 ノックアウト アプリケーション用の拡張機能が含まれている Chrome DevTools では、特定の要素やコンポーネントの読み込み方法や、ユーザーが操作できるとおりにレンダリングを行う方法を示すことができます。 開発者は、アプリケーションのセッションを記録して、パフォーマンスのボトルネックが発生する可能性がある場所を適切に測定し、結果を別のサイドバーに表示できます。 これは、大きなビューモデル内でラグタイムを診断する場合に特に重要です。
ライトハウスは Chrome DevTools のセット内のオープン ソース ツールで、ウェブ ページやアプリケーションのパフォーマンス面 (アクセシビリティや ウェブ サイトの SEO の機能強化など) の診断と修正に役立ちます。 灯台には、例えばKnockoutJSを使用して作成されたPWA(プログレッシブウェブアプリケーション)をテストする機能もあります。 このツールは、ページの読み込み速度をテストし、推奨される修正を報告します。 主な指標の2つは、ウェブ ページの可視セクションを表示するのにかかる時間(ミリ秒単位)で定義される知覚速度指数であり、推定入力待ち時間は、ページまたはアプリケーションの読み込み中にウェブ ページまたはアプリケーションがユーザーの入力に応答するのにかかる推定時間です。
LoadView によるノックアウト アプリケーションのパフォーマンスの最適化
LoadView は、ウェブ サイトと ウェブ アプリのクライアント側の対話を複製して複雑なシナリオを評価する、ポイントとクリック スクリプト ツールである EveryStep Web Recorder を利用します。 この 強力なスクリプトツールは、 マウスのクリック、ホバー、および動き、画像とテキストの検証、メニューの選択、および多くのような複雑なユーザー操作をシミュレートすることができます。 スクリプトは LoadView にアップロードされ、ユーザーは複数のテスト シナリオ、地理的な場所、 およびその他の多くの機能から選択できます。
開発者は、ポイントとクリックスクリプトツールに加えて、必要に応じて C# で手動でスクリプトを編集できます。 これにより、アカウントへのログイン、製品の検索、その他の重要なユーザー パスの検索など、反復的または動的なユーザー シナリオを複製するスクリプトを作成し、それらのアクションをアップロードして、ロードが適用されたときに実行される方法を確認できます。 これにより、開発者は、意図しないラグタイムを引き起こしている可能性のある要素や、一般的なユーザーには見えない要素をキャッチできます。 たとえば、サードパーティの要素とのやり取りにより、全体的な応答時間が長くなる可能性があります。 ユーザーには気付かないかもしれませんが、ロード時間を短縮するのに役立つマイナーな機能強化は良いものです。
結論: ノックアウトで記述されたロードテストアプリケーション.js
ノックアウト.jsは、競合他社のように十分なスポットライトを受け取りません。 しかし、その軽量性と、レイヤー間のデータフローの容易さによって、開発者はアプリケーションをより迅速かつ強固な基盤で構築できます。 ウェブ アプリケーションの増加とニーズが高まるにつれ、一貫性のあるパフォーマンスを確保するために Knockout フレームワークだけに頼ることはできません。 開発者は、アプリケーションが大量のトラフィックに対して実行できることを確認する必要があり、また、LoadView ソリューションと組み合わせた EveryStep Web Recorder のようなツールを使用して、パフォーマンスのボトルネックを効果的に診断し、隠れたタスクがアプリの応答時間とユーザー エクスペリエンスに影響を与える可能性があるシナリオを診断する必要があります。
LoadView無料トライアルを開始し、あなたのノックアウトアプリケーションのテストを開始するためにロードテストクレジットで$ 20を取得! LoadViewプラットフォームのフルウォークスルーをご利用の場合は、当社のパフォーマンスエンジニアの1人とライブ デモにサインアップ してください。 スクリプト、セットアップ、テストの各プロセスを順を追って説明し、パフォーマンス テストに関する質問に答えます。