Firebug:パート4-プロファイリング

優れたコードはデバッガーでのデバッグを回避するのに役立つため、この記事で得たスキルを決して使用しないのにも役立ちます。

あなたのサイトであなたのブラウザがjavascriptオーバーロードから「死ぬ」なら、あなたはそれを読む必要があります(そしてそれも適用します)。



全体のサイクル: コンソールコマンドデバッグプロファイリング







今日は、javascriptを作成して最適化します。 これが私たちの目標です。

すべてのアクションはメインハブラで行われます。

小さなことから始めて、ページ上のすべてのリンクを集めましょう。

links = $$( 'a' );









それらは私たちのm笑の対象になります。

次に、意図された目的のためにハブで使用される「非表示」クラスを追加および削除する2つの関数を作成します。

hide = function (el) {el.addClass( 'hidden' );}

show = function (el) {el.removeClass( 'hidden' );}









次に、ページ上のすべてのリンクを非表示および表示する関数を作成します。

js = function () {

for ( var n=0; n<links.length; n++) {

hide(links[n]);

show(links[n]);

}

}










そして、プロファイラーを実行します。

console.profile( 'js' );

js();

console.profileEnd();










少し待って、呼び出した関数でremoveClass()とgetComputedStyle()が最も長く実行されることを示す結果を取得します。 この主な理由は、それらのそれぞれへの401呼び出しです。



2番目の方法を試してみましょう-組み込みのmootools $それぞれを呼び出します:

each = function () {

$each(links, function (link) {

hide(link);

show(link);

})

}










そして結果を見る:

console.profile( 'each' );

each();

console.profileEnd();










増加(最大2ミリ秒)がありますが、メインの「ブレーキ」を除去していません。



また、要素の配列でaddClass()およびremoveClass()関数を呼び出すことができることを忘れないでください。

mass = function () {

hide(links);

show(links);

}








console.profile( 'mass' );

mass();

console.profileEnd();












そして今、私たちが見たすべての後、私たちはあまり違いがないことに気づきました。 それから、401リンクを非表示にしてから表示する必要があるかどうかを考えますか?



この記事はMichael Syncブログに基づいています。



*このソースコードは、 ソースコードハイライターで強調表示されました。



PSそれにもかかわらず、時々コードに多くのナンセンスを見つけることができます。



All Articles