Webページの読み込みと実行シーケンス?
私はいくつかのWebベースのプロジェクトを実行しましたが、通常のWebページのロードおよび実行シーケンスについてはあまり考えていません。しかし今、私は詳細を知る必要があります。GoogleやSOからの回答を見つけるのは難しいので、この質問を作成しました。 サンプルページは次のようになります。 <html> <head> <script src="jquery.js" type="text/javascript"></script> <script src="abc.js" type="text/javascript"> </script> <link rel="stylesheets" type="text/css" href="abc.css"></link> <style>h2{font-wight:bold;}</style> <script> $(document).ready(function(){ $("#img").attr("src", "kkk.png"); }); </script> </head> <body> <img id="img" src="abc.jpg" style="width:400px;height:300px;"/> <script src="kkk.js" type="text/javascript"></script> </body> </html> だからここに私の質問があります: このページはどのように読み込まれますか? ロードのシーケンスは何ですか? JSコードはいつ実行されますか?(インラインおよび外部) CSSはいつ実行(適用)されますか? $(document).readyはいつ実行されますか? abc.jpgはダウンロードされますか?それともkkk.pngをダウンロードするだけですか? 私は次のことを理解しています。 ブラウザは最初にhtml(DOM)をロードします。 ブラウザは、外部リソースを上から下に1行ずつ読み込み始めます。 a <script>が満たされている場合、読み込みはブロックされ、JSファイルが読み込まれて実行されるまで待機してから続行されます。 その他のリソース(CSS /画像)は並列に読み込まれ、必要に応じて(CSSのように)実行されます。 それとも次のようですか? ブラウザはhtml(DOM)を解析し、外部リソースを配列またはスタックのような構造で取得します。htmlが読み込まれた後、ブラウザは構造内の外部リソースの読み込みを並行して開始し、すべてのリソースが読み込まれるまで実行します。次に、JSに応じて、ユーザーの動作に応じてDOMが変更されます。 あなたがhtmlページの応答を得たときに何が起こるかについて誰かが詳細な説明をすることができますか?これはブラウザによって異なりますか?この質問についての参照はありますか? …