3

このコードは、jQueryとDOMのパフォーマンスをベンチマークするために作成しました。パフォーマンスはすべてのブラウザで異なり、FirefoxX25の実行速度が最も遅いjQueryを使用します。これは予想される動作ですか？私はjQueryでそのような影響が見られるとは思っていませんでした。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script  type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script language="JavaScript" type="text/javascript">
$(function () {
    var i=0;
    var dtb = new Date();
    while(i < 1000000)
    {
        var index = Math.floor(Math.random()*30);
        i++;
        var elem = document.getElementById('d'+index);
    }
    var dte = new Date();
    alert(dte-dtb);

    i=0;
    var dtb2 = new Date();
    var body = document.getElementById('cog');
    while(i < 1000000)
    {
        var index = Math.floor(Math.random()*30);
        i++;
        var elem = body.childNodes[index];
    }
    var dte2 = new Date();
    alert(dte2-dtb2);

    i=0;
    var dtb3 = new Date();
    while(i < 1000000)
    {
        var index = Math.floor(Math.random()*30);
        i++;
        var $elem = $("#d"+index);
    }
    var dte3 = new Date();
    alert(dte3-dtb3);



    /////EDIT//////
    ///// Implemented an Array as suggested by Erik Reppen  ////////


    i = 0;
    var idNames=new Array(30);
    while(i<30){
        idNames[i] = $("#d"+i);
        i++;
    }


    i=0;
    var dtb4 = new Date();
    while(i < 1000000)
    {
        var index = Math.floor(Math.random()*30);
        i++;
        var $elem = idNames[index];
    }
    var dte4 = new Date();
    alert(dte4-dtb4);

    /////EDIT//////////////////////////////////////////////



});

</script>
</head>

<body id="cog">
<div id="d0">sdfkjjfgdfd@@@</div><div id="d1">sdffgdfd@@@</div><div id="d2">sddfgfd</div><div id="d3">sdasfd</div><div id="d4">swqedfd</div><div id="d5">sddfdsfd</div><div id="d6">sdfd</div><div id="d7">sdsdffd</div><div id="d8">sdfsdfd</div><div id="d9">sdfkjlkjd</div><div id="d10">sdm ,nfd</div><div id="d11">sdcxvfd</div><div id="d12">sdxzcmfd</div><div id="d13">shgjmdfd</div><div id="d14">sdfvcbd</div><div id="d15">sdf;k;d</div><div id="d16">sdjklfd</div><div id="d17">sd412fd</div><div id="d18">sdfkyhkd</div><div id="d19">sdasdfd</div><div id="d20">sdhdfgsfd</div><div id="d21">sdfdsad</div><div id="d22">sdasdfd</div><div id="d23">sddfgdffd</div><div id="d24">sdklugiffd</div><div id="d25">sddfsafd</div><div id="d26">sdfq21fd</div><div id="d27">42324sdfd</div><div id="d28">sdnhmjkgufksfd</div><div id="d29">sdqwefdLAST</div>
</body>
</html>
4

4 に答える 4

11

これ：

$('#someId');

最終的にはJQuery関数に要約すると

document.getElementId('someId'); // and then wrap it in a JQuery object and return it

しかし、最初に、送信した引数に基づいて意図が何であるかを理解するために、一連のロジックを実行する必要があります。次のようなもの（そして私はこれ以上のものがあることを知っています）：

文字列ですか？はい。スペースはありますか？いいえ。「＃」、「。」、または有効なtagNameで始まりますか？それでは始まります '＃'。すばらしいです。IDを取得し、パッケージ化して返送してください。

次に、これをテストしてみてください。

$('#someId.active > .someClass:visible')

対 IE7のDOMのために書かなければならない不敬虔な混乱が何であれ、JQueryの要点がすべてわかります。

一般的に言って、DOMの選択を何度も繰り返すことは、コアDOMメソッドを使用しているか、特にJQueryを使用しているかに関係なく、一種のばかげたことです。これは、ループ内で関数が使用されていない場合の関数呼び出しのオーバーヘッドを把握するようなものです。代わりに、最初の要素グラブをキャッシュした後、いくつかのDOMメソッドと同等のJQメソッドを比較してみてください。JQはまだ遅いかもしれませんが、私は何でも25倍遅いとは思えません。

var $_someId = $('#someId');
dom_someId = document.getElementById('someId');
//now try looping a JQuery method vs an equivalent set of DOM methods for each

===無関係ですが、元のテストを支援します===

以下にコメントごとの例をいくつか示します。ループの前に行うことについては、質問に戻ってください。

//caching ID names before loop
var i = 30,
idNames = [];
while(i--){ //confusing but tests as i, then inside i is i-=1
idNames[i] = 'd'+(i+1);
}

注：配列に0〜30のインデックスを付けるため、ループ内のランダムインデックス作成ステートメントの後で+1を強制終了します。実際、1-31が最初の要素にヒットすることはなく、そこにない2つにアクセスしようとしているため、1-31がchildNodesループを爆破しない理由はわかりません.+1を削除すると、0-30が選択されます。上記のループでは、1-31が必要であると想定していますが、HTMLは30までしか上がらず、1から始まることがわかりました。

//caching object/property lookup and DOM Access/HTMLCollection/obj instantiation
var bodyChildren = body.childNodes; //DOM object lookups cost performance

//caching JQ so you can use the exact same loop afterwards
var bodyChildren = $('body').children();

//inside loops
bodyChildren[index];
于 2012-05-23T00:52:39.467 に答える
4

これは$("#d"+index);、と同じことをしないためdocument.getElementById('d'+index);です。後者はDOMオブジェクトを取得します。これはネイティブタイプのオブジェクトであり、ブラウザに組み込まれています。

$ただし、jQueryオブジェクトを作成します。まず、jQueryはクラス、属性、祖先などで物事を検索できるのに対し、jQueryはdocument.getElementByIdIDで要素を検索するだけなので、セレクターを解析する必要があります。jQueryオブジェクトはネイティブオブジェクトではないため、作成に時間がかかり、さらに多くの可能性があります。たとえば、jQueryオブジェクト（実際にはネイティブDOMオブジェクトのラッパー）は、、、nextおよびメソッドをval提供します。jQueryの作成者はおそらくあなたよりもJavascriptの方が優れているため、選択の実行（または少なくともこの単純な選択の実行）は、ネイティブDOMオブジェクトよりもjQueryの方が遅くなりますが、プログラミングが容易になり、実行が速くなることがよくあります。bindon

于 2012-05-23T00:21:42.390 に答える
3

jQueryは、すべての主要なブラウザーで一貫して機能する方法でDOM操作を正規化するラッパーです。直接のDOM操作よりも25倍遅いパフォーマンスを実行することは完全に合理的です。パフォーマンスの低下は、簡潔なコードを持つこととのトレードオフです。

JavaScriptは一般に、高度に非同期の言語です。その使用法の多くは、ユーザーがトリガーするコールバックまたはタイマーを待つことを含みます。時間があるので、パフォーマンスが問題になることはほとんどありません。ユーザーは、1ミリ秒で実行されるプロセスと25ミリ秒で実行されるプロセスの違いに気付くことはありません。

スクリプトの1つでパフォーマンスが大幅に低下した場合は、ツールを使用して、コードに最も時間がかかっている場所を分析します。

結局のところ、時期尚早の最適化はすべての悪の根源です。

于 2012-05-23T00:21:12.003 に答える
1

蚊を殺すためにハンマーのようにjQueryを使用しています。実行するたびに$("#d"+index)、jQueryにセレクターを解析し、セレクターをDOMに適用して、結果をメモリを消費するオブジェクトにラップするように指示します。これは本当に時間がかかります。

士気：必要なときにjQueryを使用してください。パフォーマンスは、関数のライトモティーフではありません。

于 2012-05-23T00:21:27.370 に答える