問題タブ [domready]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 遅いのにjQuery.readyが推奨されるのはなぜですか？
私は以前に同様の質問をしましたが、私の主張を正確に明確にしたことはありません。少なくとも、それを取り上げて誰かが洞察に満ちた考えを与えることができるかどうかを確認する価値があるほど関連性の高い質問だと思います。
jQueryを使用する場合、私たちの多くは、DOMがロードされjQuery.readyたときに関数を使用してを実行します。initこれは、jQueryを使用してDOM操作プログラムをWebページに追加するデファクトスタンダードの方法になりました。関連するイベントは一部のブラウザにネイティブに存在しますが、jQueryは一部のIEバージョンなどの他のブラウザでそれをエミュレートします。例：
現在、すべてのテストで、このイベントは非常に遅くなる可能性があることが示されています。ほど遅くはありませんwindow.onloadが、実行までに約100ミリ秒の遅延が発生することがよくあります。FFの場合、特に更新時に最大200〜300ミリ秒になる可能性があります。
これらは非常に重要なミリ秒です。これは、DOM操作（ドロップダウンの非表示など）が行われる前に初期レイアウトが表示される時間であるためです。多くの場合、レイアウトの「ちらつき」は、主に低速のDOM対応イベントを使用することで発生し、プログラマーは代わりにCSSを使用して要素を非表示にし、アクセスしにくくなる可能性があります。
代わりに、bodyタグを閉じる前にスクリプトタグにinit関数を配置すると、実行速度が大幅に向上します。通常は約半分の時間ですが、場合によってはさらに高速になります。
違いを証明する簡単なテストページ：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ミリ秒をスライスするのはかなり簡単なようです...
javascript - 待ち時間の長いスクリプトがロードされるのを待っている間、DOMContentLoadedの前にdocument.writeが無視されました
私はこの質問をグーグルらに言い表すために多くの異なる方法を試しましたが、運がありませんでした。この質問のタイトルが問題のニュアンスを捉えているかどうかさえわかりません。説明してから実験を見せてみます。誰かが何が起こっているのかについての説明を指摘できるようになることを願っています。
与えられた：
- BODYが終了する前に、リモートスクリプト（B）を参照するドキュメントにスクリプト要素（私の好みの手法であるdocument.createElementを使用）をプログラムで挿入するスクリプト（A）があります。
- remote-script Bは、任意のコンテンツ（ "hello、world"など）のdocument.writeを実行します。
- BODYの終了前とスクリプトAの直後に、ロードに時間がかかるリモートスクリプトを参照するスクリプト（C）があります（例：1s）
何が起こるかというと、Aが実行され、Bがドキュメントに挿入され、リソースのダウンロードが開始されます。Bがダウンロードしている間、遅延のため、Cは実行して待機します。Cが待機している間に、Bがダウンロードされて実行されます。まだDOMContentLoadedをヒットしていません。document.readyStateはまだ「ロード中」です。Bからのdocument.writeは無視されます。DOMContentLoaded後のように、ぐちゃぐちゃになりました。その後、Cはダウンロードを終了して実行します。
実験：
- 出典： http： //jsfiddle.net/jaknowlden/pwHG8/
- 直接試してみてください：http：//jsfiddle.net/jaknowlden/pwHG8/show/
- ウォーターフォール：手動リンク[cl.ly/423P2M1d0r0e0k3h370g]
- リモートスクリプト：MANUAL LINK [thumblemonks.com/js/stackoverflow-script-b.js]
遅延を作成するためにCuzillionを使用しています。ウォーターフォールイメージをチェックアウトすると、console.logメッセージも表示されます。このメッセージは、DOMが「インタラクティブ」readyState（つまり、DOMContentLoaded）に達する前にすべてが実行されたことを示しています。
ブラウザでの出力として期待するのは次のとおりです。
出力として取得するものは次のとおりです。
私の実験では、AとCとして定義するものの間に別のスクリプトを追加したことに気付くでしょう。これをA'と呼んでください。これは、document.writeを含むテキストを含むスクリプト（つまり、リモートスクリプトではない）を動的に追加すると、A'のdoc.writeが機能することを示しています。
また、dummy.jsとCSSファイルはJSFiddleから取得されます。彼らは犯人ではありません。この問題はどこでも再現できます。
私が知っていること：
- CをIMGに置き換えても、問題はありません。
- CをIFRAMEに置き換えても、問題はありません。
- AをCの後に移動しても、問題はありません。
今：
おそらく、これには完全に正当な理由があります。私がテストしたすべてのブラウザはほぼ同じように動作するように見えるので、あるに違いありません。私が知りたいのはなぜですか？説明、ヒント、および/またはポインタは大歓迎です。「スペックにあるよ、ダンビー:)」のようなヒントでさえ、私は厚い肌を持っています。対処できます。
免責事項：私はdocument.writeを嫌います。私の意図は、いかなる方法でもその使用をサポートまたは強化することではありません。しかし、私の仕事の性質を考えると、私は今のところそれを回避する必要があり、この奇妙なことが私に起こりました。したがって、「document.writeを使用しないでください」というコメントは避けたいと思います。これは、私がすでに信じているからです:)
javascript - LESS JSが.lessファイルをロードするのを待つ方法は？
私のウェブページには、のless代わりにファイルが含まれていますcss。これはlessjsスクリプトによって解析されます。私のサイトのjsスクリプトは、dom対応で、ページのさまざまなdomディメンションレイアウトに基づいて起動します。
問題は、低速のネットワークでは、jsがファイルlessをダウンロードする 前にjsファイルが起動する可能性があることlessです。<head>これは不明なファイルタイプであるため、ブラウザは、このファイルがダウンロードされるのを待ってから、セクションにある場合でもdomreadyを起動する必要はありません。このシナリオでは、CSSルールがまだ適用されていないため、jsが誤ったディメンションを読み取ります。
lessだから、私の質問は、ファイルがいつダウンロードされたかをどうやって知るのかということです。lessダウンロードしてdomの準備ができた後、私のjsコードを起動できるようにします。
javascript - 情報ウィンドウ (Google Maps API v3) にドロップダウン リストを入力するにはどうすればよいですか?
2 つの配列があります。1 つは記事名用で、もう 1 つは各記事への URL リンク用です。情報ウィンドウ内のドロップダウン リストに記事名を入力し、選択すると各記事にリンクしようとしています。
リンクはonchangeイベントの使用に関係しているように見えますが、それ以外の場合は を使用して要素の id タグ
"domready" eventListenerにアクセスしています。
ここに私がこれまで持っていた関連コードがありますが、これは機能していません:
<select>
javascript - What is the difference between DOMContentLoaded and DOMContentReady?
According to the MDN wiki, DOMContentLoaded will fire when "page's DOM is ready, [although] the referenced stylesheets, images, and subframes may not be done loading."
What about DOMContentReady? Is it just an alias?
javascript - JSを複数のファイルに分離する
私のWebプロジェクトには、まったく同じJS関数で動作する複数のページがあります。すべてのページのjsファイルに同じ関数をコピーして貼り付けていました。しかし、最近、共通の関数を、という名前の別のjsファイルに分離しcommon_fns.jsました。作成されたすべてのページに対して、セレクターでキャッシュされた変数のみが作成され、すべてのページの上部に順番に配置されましsome_page.jsたcommon_fns.js。そんな感じ
some_page.js
common_fns.js
共通の関数をすべてのページのファイルにコピーして貼り付けたときに機能していました。しかし、今はそうではありません。Firebugはundefined SelectBoxOptions、最初の関数に対してもエラーメッセージを表示します。私は何が欠けていますか？すべてのページのjsファイルに同じ関数をコピーして貼り付ける唯一の方法は？
jquery - JQuery .ready関数がDOMを待機しないことがあるのはなぜですか？
JQueryを使用していくつかのコンボボックスをセットアップし、.combobox呼び出しを.ready関数でラップして、コントロールが使用可能であることを確認しましたが、ページを読み込むたびに、コンボボックスに使用される要素は使用できません。 DOMで。何が起こっているのですか、そしてこれはどのように可能ですか？
私の外部JavaScript
IEの問題に気付いたのは何らかの理由だけですが、それは他のブラウザに存在しないということではありません。
考え？
angularjs - angle.js：domReadyと同等
警告：Angular初心者が先にいます。
このコードはangular.jsページにあります
次に、コントローラーを次のように定義しました。
そしてそれはうまくいきます。
domの準備ができたらsearch（）関数を実行したい...
$（function（）{...から呼び出してみましたが、コントローラーから手動でメソッドを実行する方法がわかりません
また試してみました
しかし、それを機能させることができませんでした（そして多くのドキュメントも見つけることができませんでした...）
javascript - DOMレディイベントとは何ですか？
ページコンテンツ（HTML要素全体）が受信されたらすぐにスクリプトを起動する必要がありますが、まだレンダリングする必要はありません。
ページの最上部にコードを実行する単純な<script>タグがあるだけでうまくいくと思いますか？
質問を別の方法で定式化するには、DOMの準備ができているということは、すべての要素とリソースがプルされてレンダリングされていることを意味しますか？