基本的JavaScript流程 - 在各種瀏覽器中

-1

我想通過一個非常簡單的JavaScript示例學習JavaScript流程，但三種瀏覽器（Chrome，IE和Firefox）都顯示不同的流程模式和不同的最終結果。我知道有些跨瀏覽器的問題是值得期待的，但是這個問題非常簡單。所以我想了解如何解釋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在一種情況下被覆蓋而不在其他情況下。

來源

2016-08-20 kcityg

你有一個不屬於腳本標記的rouge'var x = 10;'。 – Script47

這裏有什麼問題？如果真的是「你怎麼知道的...」，那麼這是無關緊要的。 – JJJ

（可能）**相關**：[BlockingJS]（https://developers.google.com/speed/docs/insights/BlockingJS）。 – Script47

我努力學習JavaScript中的流動有一個很簡單的JavaScript 例如但三種瀏覽器（Chrome，IE和Firefox）所有三個顯示不同的流動模式和不同的最終結果。

你在說什麼是HTML engine in different browsers。所以這是關於處理HTML而不是處理JavaScript ...

你怎麼知道這是如何工作的？

這取決於...我喜歡創建單頁JavaScript應用程序，它在window.onload（或DOMContentLoaded）事件觸發之前不會加載太多的HTML。所以我從一個空的身體開始，用JavaScript完全構建頁面。通過某些項目，您需要優雅的降級，並從HTML實現一些基本功能開始，並且您可以添加JavaScript以實現更高級的功能。在這種情況下，如果您的代碼想要對DOM做任何事情，您需要等待之前提到的事件。否則，不能保證瀏覽器將呈現DOM元素和執行JavaScript命令的順序。所以我同意Diogo Sperb，你已經開始了一個不好的做法。 OFC。您可以在DOM加載之前運行JavaScript代碼，但這些代碼不應涉及DOM。你可以做例如XHR請求到服務器，或使用歷史API來覆蓋URI，等等......你甚至可以通過使用文檔片段來創建DOM元素，但是你不應該渲染它們。據我所知，渲染DOM元素是同步的，所以在DOM加載後你不會遇到類似的問題。

只要提及，現在沒有人使用alert()，我們使用console.log()，它不會阻止加載頁面。

說明：我不明白爲什麼人們會低估你的問題。我認爲這是一個很好的JavaScript初學者問題。我猜哈特會討厭。 :-)

來源

2016-08-20 23:08:43 inf3rno

歡迎來到來自JavaScript的瀏覽世界。預計跨瀏覽器的不同行爲，不是一個例外。

它應該有助於知道你的代碼不建議什麼。任何實際執行某些操作（如警報）的JavaScript語句都應該在關閉body標籤之前恰好出現。

當你不尊重它，並嘗試在瀏覽器仍在渲染頁面時運行代碼時，會發生不好的事情。在這之前你可以有任何數量的聲明，只要它們在文檔主體結束之前不被調用。

來源

2016-08-20 22:35:35

Diogo，這是一個基本的JavaScript書籍的例子;但在這裏通過擴展HTML之間的腳本元素，我試圖看到JavaScript解釋器將傳遞它以連續的順序呈現HTML和停止在下一個腳本並在未來之前執行它。 – kcityg

我明白了。請注意，瀏覽器渲染不會等待每個JavaScript語句的完成。但JavaScript解釋器將按照正確的順序執行代碼，即在第一次警報之前您不會看到第二次警報。你可以使用非交互式的'console.log（）'來替換'alert（）'調用來簡化測試。 –

基本的JavaScript流程 - 在各種瀏覽器中

回答

相關問題