2016-08-20 10 views
-1

私はJavaScriptのフローをとても単純なJavaScriptの例で学習しようとしていますが、3つのブラウザ(Chrome、IE、Firefox)では3つすべてが異なるフローパターンと異なる結果を示しています。私は予想されるクロスブラウザの問題があることを知っていますが、これは非常に簡単です。 JavaScriptが実際にどのように流れるかを解釈する方法を理解しようとしています。ここでさまざまなブラウザでの基本的なJavaScriptの流れ

はコードです:私は見ています何

<!DOCTYPE html> 
<html> 
<head> 
<title>Test 01</title> 
    <script type="text/javascript"> 
    document.bgColor = "red"; 
    </script> 

</head> 

<body bgColor="yellow"> 

<p>Paragraph 1</p> 
<script>alert("after para 1");</script> 
<p>Paragraph 2</p> 
<script>alert("after para 2");</script> 
<p>Paragraph 3</p> 
<script>alert("after para 3");</script> 

</body> 
</html> 

は、「第1項」のテキストは、警告後にChromeで、最大表示なども他の二つのアラートとされていることです。 IEとFirefoxはここで正しいことをしているようだ - アラートの前にテキストを表示する。

IEとFirefoxの間で、IEは赤い背景とFirefoxに黄色で終わっています。したがって、何を解釈するのか正確にはわからない。すべてのブラウザで動作が異なる。

これが正確にどのように機能するのか、どうやって学びますか?

編集:この質問には該当しないvar x = 10を削除します。そして、問題は関連するテキストの前にアラートが表示されている場合のクロムの動作をどのように解釈するのか、またbgcolorが1つのケースではオーバーライドされるのはなぜですか。

+0

スクリプトタグにはない 'var x = 10;'があります。 – Script47

+1

ここに質問がありますか?それが本当に "あなたはどのように学びますか..."なら、これは話題にはなりません。 – JJJ

+0

(おそらく)**関連**:[BlockingJS](https://developers.google.com/speed/docs/insights/BlockingJS) – Script47

答えて

1

私は非常に単純な とJavaScriptでの流れを学ぶことを試みているJavaScriptの例が、3つのブラウザ(クローム、IEとFirefox)すべて 3は、異なるフローパターンと異なる最終結果を示しています。

話題はHTML engine in different browsersです。これは、JavaScriptを処理するのではなくHTMLを処理することです。

これは正確にどのように動作するはずですか?

私はwindow.onload(またはDOMContentLoaded)イベントが発生する前にHTMLをあまり読み込まないシングルページのJavaScriptアプリケーションを作成するのが好きです。だから私は空のボディから始まり、JavaScriptを使って完全にページを構築する。プロジェクトの中には、優雅な劣化が必要なものがあります。まずは基本的な機能を実装したHTMLから始めて、さらに高度な機能を実装するためにJavaScriptを追加することができます。このシナリオでは、あなたのコードがDOMを使って何かをしたい場合は、前述のイベントを待つ必要があります。そうしないと、ブラウザがDOM要素をレンダリングしてjavascriptコマンドを実行する順序が保証されません。だから私はDiogo Sperbに同意します。あなたは悪い習慣から始めました。 Ofc。 DOMをロードする前にjavascriptコードを実行できますが、DOMには関係しません。たとえば、サーバーへのXHRリクエストや、履歴APIを使用してURIなどを上書きすることができます。ドキュメントのフラグメントを使用してDOM要素を作成することもできますが、レンダリングしないでください。私が知っている限り、DOM要素のレンダリングは同期しているので、DOMがロードされた後でも同様の問題は発生しません。

言い換えれば、誰も今日alert()を使用していません。私たちはconsole.log()を使用します。これはページの読み込みをブロックしません。

注: なぜ人々があなたの質問をd​​ownvotingするのか分かりません。私はそれが良いjavascriptの初心者の質問だと思う。私は憎しみが嫌になると思う。 :-)

3

ブラウザでJavaScriptの世界へようこそ。ブラウザ間で異なる動作が予想されますが、例外はありません。

あなたのコードが行うことは推奨されていませんが、それを知るのに役立つはずです。実際に何かを行うJavaScriptステートメント(アラートなど)は、bodyタグを閉じる前にのみ呼び出す必要があります。

悪いことは、ブラウザがまだページをレンダリングしている間にコードを実行しようとすると、それを尊重しないと起こります。ただし、文書本体の最後まで呼び出されていない限り、それ以前に宣言することはできます。

+0

Diogo、これは基本的なjavascriptの本の例です。ここでhtmlの間にスクリプト要素を広げることで、javascriptインタプリタがhtmlをレンダリングして次のスクリプトで停止し、それを実行する前に実行することを確認しようとしています。 – kcityg

+0

私は参照してください。ブラウザのレンダリングでは、すべてのJavaScriptステートメントの完了を待つことはないことに注意してください。しかし、JavaScriptインタプリタはコードを適切な順序で実行します。つまり、最初のアラートの前に2番目のアラートが表示されません。 'alert()'呼び出しを非対話的な 'console.log()'に置き換えてテストを簡単にすることができます。 –

関連する問題