☰

jQuery.ready は遅いのになぜ推奨されるのでしょうか? 質問する

tag-icon • tag-icon javascript jquery performance optimization domready
jQuery.ready は遅いのになぜ推奨されるのでしょうか? 質問する

私は尋ねました同様の質問以前にも質問しましたが、私は自分の意見を明確に述べたことがありませんでした。少なくとも、これは非常に関連性のある質問なので、取り上げて、誰かが洞察力のある意見を述べてくれるかどうか見る価値があると思います。

jQuery.readyjQueryを使用する場合、DOMがロードされたときに関数を実行することがよくinitあります。これは、jQueryを使用してWebページにDOM操作プログラムを追加する事実上の標準方法になっています。関連するイベントが存在します。ネイティブ一部のブラウザではサポートされていませんが、jQuery は IE の一部バージョンなど、他のブラウザでもエミュレートします。例:

<head>
<script>
    var init = function() { alert('hello world'); };
    $.ready(init);
</script>

現在、すべてのテストで、このイベントがかなり遅くなる可能性があることがわかりました。 ほど遅くはありませんwindow.onloadが、実行前に約 100 ミリ秒の遅延が発生することがよくあります。FF の場合は、特に更新時に最大 200 ～ 300 ミリ秒かかることがあります。

これらは非常に重要なミリ秒です。これは、DOM 操作 (ドロップダウンの非表示など) が行われる前に初期レイアウトが表示される時間であるためです。多くの場合、レイアウトの「ちらつき」は主に、遅い DOM 準備完了イベントの使用によって発生し、プログラマーは代わりに CSS を使用して要素を非表示にせざるを得なくなり、アクセシビリティが低下する可能性があります。

ここで、代わりに body タグを閉じる前にスクリプト タグに init 関数を配置すると、実行速度が大幅に向上します。通常は半分程度の時間で済みますが、場合によってはさらに速くなります。

<head>
<script>
    var init = function() { alert('hello world'); };
</script>
</head>
<body>
<!-- some HTML -->
<script>init();</script>
</body>

違いを証明する簡単なテスト ページ:http://jsbin.com/aqifon/10

つまり、効果的なセレクタの使用に関して「最適化警察」の一部が推奨するような、ほとんど目立たない違いについて話しているわけではありません。大きな遅延ロード時に DOM 操作を実行する場合。この例を FF で試してみると、domready は 100 倍以上遅くなることがあります (300 ミリ秒対 2 ミリ秒)。

さて、私の質問です。jQuery.ready他の方法よりも明らかに遅いのに、なぜ の使用が推奨されるのでしょうか? また、initを使用するのと比べて、 を閉じる前にを呼び出すことの欠点は何でしょうかjQuery.ready? を使用する方が「安全」であることは間違いありませdomReadyんが、他のオプションよりも安全なのはどのような状況でしょうか? ( や遅延スクリプトのようなものを考えていますdocument.write) 私たちは、多くのクライアントサイトで の方法を 5 年近く使用していますBODYが、問題は一度も発生していません。 はるかに高速です。

また、jsPerf やセレクターの最適化 (10000 回の実行につき数ミリ秒) について多くの議論があるのに、なぜこれについてはあまり話されていないのか疑問に思います。これは基本的にユーザーが直面する最初の遅延であり、各ページの読み込みで 50 ～ 100 ミリ秒を削減するのはかなり簡単なようです...

ベストアンサー1

まず要点を述べます。

initいいえ、閉店前にお電話いただいても不利益はございません<body>。ご存知のとおり、この方法は、 に頼るよりもパフォーマンスが向上し$.ready()、すべてのブラウザで問題なく動作します (IE でも)。

ただし、 を使用する理由はいくつかあります$.ready()が、あなたのケースではおそらく当てはまりません。

  1. $.ready()開発者が正しい順序で作業を行うことが容易になります。特に重要なのは、ロードされていない DOM 要素を参照しないことです。これは十分に単純ですが、多くの開発者は依然として混乱しています。は、$.ready()時間はかかりますが、考える必要はありません。
  2. いくつかのスクリプトが必要なのでinit()、必ずしも簡単/便利ではありません手動でこれを本文の最後に記述します。これには、これらのスクリプトが何を行うかについての規律と知識が必要です。特に、$.ready()jQuery に依存するライブラリでよく見られます。jQuery を使用すると、開発者がどのような方法でライブラリをロードしても、問題なく動作するからです。
  3. 非同期モジュール定義（例えばjs が必要です) は JavaScript をロードする方法として人気が高まっていますが、<body/>メソッドの終了は保証されません。

おすすめ記事