ブラウザはどのようにJavaScriptを処理しますか？

Question

ウェブブラウザはどのようにウェブページのJavaScriptコンテンツを処理しますか？ JavaScriptコンテンツがDOMに解析されてレンダリングされていますか？

仕様は必要ありませんが、その仕組みを知る必要があります。 JavaScriptのコンテンツをWebページで処理するプロセス全体を教えてください。

Answer 1

ウェブページのセクションはブラウザのJavaScriptインタプリタによって処理されますが、ブラウザの本質的な部分である可能性がありますが、通常は別個のモジュールです（ChromeはV8を使用します; IEはJScriptを使用します。 FirefoxはSpiderMonkeyなどを使用します）。 HTMLパーサはscript要素に到達

、パーサは読んで終了</script>タグを通じてテキストを格納（またはsrc属性経由で参照されたファイルを取得）されないことをすべて。その後、作成者がdefer or async attributesを使用していない限り、すべてのHTMLの解析とレンダリングが停止し、HTMLパーサーはスクリプトのテキストをJavaScriptインタプリタに渡します。 JavaScriptインタプリタは、windowオブジェクトのコンテキストでJavaScriptコードを解釈し、終了するとHTMLパーサーに戻ります。これにより、解析と表示が続けられます。このストップ・オール・アンド・ザ・ラン・ザ・ジャパンはなぜページの顕著な人々recommend putting scripts at the bottomが知覚された読み込み時間を改善するのかです。また、scriptタグがという順序でで処理されることも意味します。これは、1つのスクリプトが別のスクリプトに依存している場合に重要になります。 deferまたはasync属性が使用されている場合、スクリプトの実行は、後でそれをサポートするブラウザまで遅延させることができます。ページ上のすべてのスクリプトは、同じグローバル実行コンテキスト内で実行され、同じグローバル名前空間とメモリ領域を共有します（したがって、互いにやりとりすることができます）。

ページが解析されてレンダリングされると、さまざまなイベントが発生する可能性があります。  —ユーザーが何かをクリックしたり、ブラウザウィンドウのサイズを変更したり、マウスを要素に移動したりできます。 scriptタグの結果として実行されたJavaScriptコードは、イベントが発生したときにブラウザがJavaScript内の関数を呼び出すようにこれらのイベントを「フック」することができます。これにより、JavaScriptは対話的になります  —ユーザーがページ上の要素をクリックすると、ブラウザはJavaScriptインタプリタに、JavaScriptコード内で関数Xを実行するように指示します。

あなたが上見ることができるように、JavaScriptコードを実行することができる2つのやや異なる状況があります：ページの解析/レンダリング処理の間（deferまたはasync属性を使用していないscript要素が最初に処理されているときは） の後に解析/レンダリングプロセス（遅延スクリプト、イベントに応答して実行されるコード）が含まれます。パース/レンダリング処理中に実行されるJavaScriptは、document.write関数を介してHTMLパーサにコンテンツを直接出力できます。パース/レンダリングが完了した後に実行されるJavaScriptはそれを行うことはできませんが、非常に強力なDOM HTML APIを使用してDOMとやりとりすることができます。

noscript要素には注意が必要です。JavaScriptが有効になっているブラウザでは、noscript要素は完全にスキップされます。 JavaScriptを使用しないブラウザまたはJavaScriptを無効にした場合、scriptの要素は完全にスキップされ、代わりにnoscriptの要素が読み込まれます。これにより、ページがレンダリングされたときにブラウザでJavaScriptが有効になっている場合、または有効になっていない場合にのみ表示されるコンテンツを簡単に含めることができます。

推奨読書：

• http://en.wikipedia.org/wiki/Client-side_JavaScript
• http://www.w3.org/TR/html5/scripting-1.html
• http://www.ecma-international.org/publications/standards/Ecma-262.htm