32

私は以前に同様の質問をしましたが、私の主張を正確に明確にしたことはありません。少なくとも、それを取り上げて誰かが洞察に満ちた考えを与えることができるかどうかを確認する価値があるほど関連性の高い質問だと思います。

jQueryを使用する場合、私たちの多くは、DOMがロードされjQuery.readyたときに関数を使用してを実行します。initこれは、jQueryを使用してDOM操作プログラムをWebページに追加するデファクトスタンダードの方法になりました。関連するイベントは一部のブラウザにネイティブに存在しますが、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倍以上遅くなることがあります（300ms対2ms）。

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

また、jsPerfと、10000回の実行ごとに数ミリ秒のセレクターの最適化について非常に多くのファズがあるので、なぜこれについてあまり話がないのでしょうか？これは基本的にユーザーが直面する最初の遅延であり、ページの読み込みごとに50〜100ミリ秒をスライスするのはかなり簡単なようです...

4

4 に答える 4

8

最初に要点：

いいえ、をinit閉じる前に電話をかけることに不利な点はありません<body>。お気づきのように、依存するよりもパフォーマンスが向上し$.ready()、すべてのブラウザーで問題なく動作します（IEでも）。

ただし、を使用する理由がありますが$.ready()、あなたの場合はおそらく当てはまりません。

  1. $.ready()開発者が正しい順序で作業を行うのが簡単になります。特に重要なことは、ロードされていないDOM要素を参照しないことです。これは十分に単純ですが、多くの開発者は依然として混乱を招きます。$.ready()遅いものではありますが、簡単です。
  2. あなたがする必要があるいくつかのスクリプトを言っている場合、あなたの体の終わりにそれを手動でinit()行うことは必ずしも簡単/便利ではありません。それには、これらのスクリプトが何をするかについての規律と知識が必要です。特に、jQueryに依存するライブラリでは、開発者がライブラリをロードするためにどのように使用するかに関係なく動作するため、よく見られます。$.ready()
  3. 非同期モジュール定義（たとえばrequire.js）がJavaScriptをロードする方法として普及しているため、<body/>メソッドの終了は保証されていません。
于 2012-03-04T20:40:16.013 に答える
6

1つの利点は、ページのどこにでもコードを配置できることです。この例では、CMSでテンプレートシステムを使用して、さまざまなパーツの約10〜30個のテンプレートからページをつなぎ合わせます（複雑さに応じて）。

テンプレートを使用するすべてのページで機能させるため、必要なJavascriptをテンプレートに含める必要があります。そのような場合、このready()関数は実際の節約になります。

于 2012-03-04T19:01:36.170 に答える
2

他の人が自分のページに含めているJSファイルを作成した場合は、そのファイル内でdocument.readyを使用する方が安全です（DOMの準備ができた後に自動的に何らかの処理を行う必要があると仮定します）。ファイルは頭または体の端に含まれます。

完全に制御できるページに関しては、明らかにその心配はありません。したがってinit()、本文の最後から呼び出すのではなく、document.readyを使用する方が「安全」であるとは思えません。 。document.ready（またはonload）を使用することと、本文の最後にスクリプトを配置することは、それを行うための2つの最も一般的な方法であり、どちらもうまく機能するため、一般的です。

例外の可能性として言及document.write()しましたが、どちらの方法でもページ全体がすでに解析されているため、document.readyまたは本文の最後から呼び出したくありません。

于 2012-03-04T20:38:22.143 に答える
0

domReadyとwindow.loadが遅くなるためです。

実際のユーザーエクスペリエンスではなく、指標に合わせて最適化するのは簡単です。そのため、対話性が遅れても、「実際のユーザー最適化」グラフは低下します。

于 2013-11-13T00:26:46.680 に答える