ページ読み込みjsとパフォーマンス解析手法の紹介_javascriptスキル

1.

をロードします。まず、静的ページの参照先の js ファイルをロードし、次に、参照先のファイルに onload 関数が含まれているかどうかを確認します。たとえば、main.js に onload 関数が含まれているかどうかを確認します。他の 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 内のすべての関数とコード ブロックの消費時間を確認し、ボトルネック コードを特定することです。 。 で。