ページ読み込み JS とパフォーマンス分析方法についての簡単な説明_JavaScript スキル

1.

を読み込み中

まず、静的ページの参照 js ファイルを読み込み、その参照ファイルに onload 関数が含まれているかどうかを確認します。たとえば、main.js に他の js ファイルへの参照があるかどうかを確認します。 . ファイルを最初にロードします。参照されるファイルのロード順序は main.js の順序と一致します。
ロードが完了すると、onload関数の実行が開始されます。 js の実行順序はシーケンシャルであるため、ページの応答速度を向上させるために、onload でページを描画するだけで、一部のイベント バインディング関数や ajax メソッドなどを後で記述することが一般的です。

2. 応答速度分析

1. 分析にツールを使用する

主要なブラウザ (Firefox がお気に入り) の開発者ツールでは、各 js ファイル、html ファイル、css ファイル、画像の読み込み時間と実行時間を簡単に確認できます。

2. ハードコーディング分析

最初のステップでは、基本的にボトルネック js ファイルを見つけることができます。ボトルネック js では、console.time('test') ステートメントと console.Endtime('test') ステートメントを使用して、js 関数とコード ブロックをピンチできます。 . 実行時間を取得します。ただし、console ステートメントは IE 以外のブラウザで実行した場合にのみ有効であり、IE ではエラーが報告されます。 IE を使用したい場合は、タイムスタンプを使用してください。ピンチする場合、より便利な方法は、js ファイル全体を直接ピンチし、Firefox ブラウザーを使用して F12 を押して、コンソール内のターゲット js 内のすべての関数とコード ブロックの消費時間を確認し、ボトルネック コードを特定することです。 。 で。