ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript_javascript スキルにおける console.profile() 関数の詳細な紹介

JavaScript_javascript スキルにおける console.profile() 関数の詳細な紹介

WBOY
WBOYオリジナル
2016-05-16 16:23:451467ブラウズ

JavaScript プログラムを作成するときに、特定のコード部分の実行時間を知る必要がある場合は、console.time() を使用できます。ただし、より複雑なロジックを使用して JavaScript プログラムを分析し、パフォーマンスのボトルネックを見つけようとする場合、console.time() は適用できません。より複雑なロジックを使用した JavaScript プログラムの動作を詳細に分析するには、大量の console.time() を挿入する必要があります。 ) という声明は、間違いなく受け入れられません。複雑なロジックを使用した JavaScript プログラムのチューニングの場合、正しい方法は console.profile() を使用することです。

ブラウザのサポート

Firebug プラグインがインストールされている Firefox、Google Chrome、Safari はすべて console.profile() ステートメントをサポートしています。IE と Opera の最新バージョンでも Profile 関数が提供されています。 console.profile() の使用法は、いくつかの主要なブラウザで同様です。この記事では、Firebug での console.profile() の使用法のみを紹介します。注意すべき点の 1 つは、Firebug コンソールを使用して JavaScript 実験コードを直接記述する場合、console.profile() は無効であるということです。

console.profile() の使用法

console.profile() の使用は非常に簡単です。プロファイルを開始する必要がある場所に console.profile() を挿入し、プロファイルを終了する場所に console.profileEnd() を挿入します。次のコードを例として挙げます:

コードをコピーします コードは次のとおりです:

関数 doTask(){
doSubTaskA(1000);
doSubTaskA(100000);
doSubTaskB(10000);
doSubTaskC(1000,10000);
}
関数 doSubTaskA(count){
for(var i=0;i }

関数 doSubTaskB(count){
for(var i=0;i }

function doSubTaskC(countX,countY){
for(var i=0;i for(var j=0;j }
}

console.profile();
doTask();
console.profileEnd();

doTask()関数の実行前にconsole.profile()を実行し、doTask()関数の完了後にconsole.profileEnd()を実行することで、doTask()関数の動作中の詳細情報を取得できます。集めた。これは Firebug のコンソールで確認できます:

結果からわかるように、このプロファイル時間は合計 101.901 ミリ秒で、5 つの関数呼び出しが含まれています。結果のデフォルトのタイトルは「プロファイル」ですが、console.profile() 関数にパラメータを渡すことでカスタマイズできます。たとえば、console.profile("Test Profile") を使用すると、結果内のプロファイルのタイトルを「Test Profile」に変更できます。これは、複数のプロファイル プロセスを同時に実行する場合に特に便利です。特定のプロファイル結果の各列の意味は次のとおりです:

1.機能。関数名。
2. 電話をかける。通話数。たとえば、上の例では、doSubTaskA() 関数が 2 回実行されます。
3.パーセント。この関数呼び出しに費やされた合計時間の割合。
4.自分の時間。他の関数の呼び出しに費やされた時間を除いた、関数自体に費やされた時間。たとえば、上記の例では、 doTask() の実行には確かに長い時間がかかりますが、その時間はすべて他の関数の呼び出しに費やされるため、時間自体はそれほど長くなく、わずか 0.097 ミリ秒です。
5.時間。所有時間とは対照的に、関数にかかる合計時間は、他の関数の呼び出しを考慮せずに計算されます。上記の例では、doTask() 関数は 101.901 ミリ秒実行されました。 Time と Own Time に関しては、Time が Own Time より大きい場合、その関数には他の関数の呼び出しが含まれるという結論も導き出せます。
6.平均関数にかかる平均合計時間を計算します。計算式は、Avg=Time/Calls です。上記の例では、doSubTaskA() 関数が 2 回実行され、合計消費時間は 1.054 ミリ秒であるため、平均合計消費時間は 0.527 ミリ秒です。
7.分この関数を呼び出すのに必要な最小時間。たとえば、上記の例では、doSubTaskA() 関数が 2 回実行され、その最小時間、つまり時間のかからない呼び出しには 0.016 ミリ秒かかりました。
8.最大。この関数の呼び出しに必要な最大時間。たとえば、上記の例では、doSubTaskA() 関数が 2 回実行され、その最大時間、つまりより時間のかかる呼び出しには 1.038 ミリ秒かかりました。
9.ファイル。関数が配置されている JS ファイル。

Firebug の [プロフィール] ボタンの使用

Firebug では、JavaScript コードに console.profile() ステートメントを挿入するだけでなく、ページ内の JavaScript コードをリアルタイムで動的にプロファイリングするための [プロファイル] ボタンも提供します。ボタンの場所は次のとおりです:

プロファイリングが必要な場合は、このボタンを押すと、後続のページ操作で JavaScript コードがトリガーされる場合、Firebug がこれを記録します。プロファイリングプロセスの最後に、ボタンをもう一度押すだけです。最終結果は、console.profile() ステートメントを挿入して得られる結果と一致します。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。