瞭解有關DOM和腳本執行的HTTP請求/響應

我已經遠離網頁設計/開發很長一段時間了，現在已經開始重新進入它。我開始做的只是爲了讓它們工作，現在我又回到了它，我想更清楚地理解一些事情 - 包括瀏覽器請求DOM何時完全加載DOM，以及腳本放置在頁面頂部和底部之間的區別。瞭解有關DOM和腳本執行的HTTP請求/響應

我意識到這是更多的http://doctype.com的職位，但我想我會從這裏得到更多的技術性答案。我也想把這個社區維基做成這個，但是我還沒有足夠的觀點。

請隨時在這裏糾正我 - 我的問題/假設：

當瀏覽器對頁面的請求時，服務器與包含腳本的層次/順序文檔對象，CSS響應和HTML - 正確？
一旦收到，瀏覽器就會建立一個文檔對象樹 - 這是DOM準備好的時候，還是在瀏覽器的頁面上開始渲染元素的時候？
在這方面，「何時加載DOM」和「何時DOM準備就緒」之間有什麼區別？
把（java）腳本放在頂部（在head標籤中）還是在底部（在</body>標籤之前）有什麼區別？
當瀏覽器加載所有資源（css，images，javascripts等）時，是否有一個DOM事件觸發完全？我問這是因爲有時我可能會有一個仍然由瀏覽器加載的背景圖片，並且在它完成之前，我的Javascript動畫已經開始執行。

感謝您花時間閱讀本文，我期待您的回覆！

來源

2010-08-30 magz

瀏覽器向服務器發送有條件和無條件的請求。（服務器響應查詢和客戶端渲染響應...有信息的吞吐量有限，並從用戶（隱私設置&等等）

無條件要求：

客戶端瀏覽器本地沒有資源可用的緩存副本時會發出無條件請求在這種情況下，服務器是預計會返回資源一個 HTTP/200 OK響應。如果響應的標頭允許它，則客戶端可能會緩存此響應，以便在稍後重新使用它時以的順序。如果瀏覽器稍後需要本地緩存中的資源，則將資源的標頭檢查爲確定緩存副本是否仍爲新鮮。如果緩存的副本是新鮮的，則則不會發出網絡請求，並且客戶端僅從緩存中重新使用資源。

條件要求：

如果瀏覽器以後需要的資源是在緩存中，但過去的到期日期是響應比其最大年齡到期（舊的或），然後客戶端將作出到服務器的條件請求到確定先前的緩存響應是否仍然有效，並且應該被重用。條件請求包含和/或If-None-Match標頭，其中向服務器指示瀏覽器在其緩存中已經具有的內容的哪個版本。該服務器可以指示客戶端的副本仍然是新鮮通過返回HTTP/304未修改頭，沒有身體，也可以指示客戶端的副本陳舊返回一個HTTP/200 OK 新迴應版本的資源。

文檔對象模型 - 是的信息的模型，因爲它涉及到一個瀏覽器的請求/響應。在許多方面，ECMA/Javascript是作爲訪問頁面元素的直接關係而誕生的，併成爲許多瀏覽器對象（document.frm等）的默認DOM Library解決方案。但是，實施和支持在所有瀏覽器中都是非統一和稀疏的。

本質上，被加載的DOM只是一個定義，表示頁面正在被渲染並且內容已被調用。這是訪問DOM Object時不能指望的東西，所以這是不利的交互方法。通常，您應該使用就緒狀態，這意味着DOM處於準備就緒狀態並處於等待狀態。

錯誤加載的差異 - 客戶端代碼的執行順序意味着它將被加載的位置。加載整個頁面對象或在所有內容之後加載。

是和否:)沒有真正的保證，但使用javascript/jquery，您可以使用body的onload事件來識別成功加載的頁面的所有元素。這是一個狡猾的問題btw。沒有真正的答案就我所知，除非是我弄錯了你問什麼...

來源

2010-08-30 22:14:43

感謝ü喬，這也幫助不少。我覺得自己像一個小菜一樣，再次穿過這一切......但我寧願覺得自己只是一個小菜，而不願意繼續不瞭解基本面！因此，如果在頁面的頂部有腳本訪問或修改某個HTML元素，那麼當頁面（以及所有資源被加載）或被抓取時它會運行嗎？ – magz 2010-08-30 23:56:13

我們只能使用方法加載時，我知道它是否異步hapens – blackHawk 2016-11-18 05:30:07

爲了更快的頁面加載，我們把腳本放在body標籤的底部 – blackHawk 2016-11-18 05:30:59

腳本變量與您的標記在線同步與標記（除了的瀏覽器的處理中執行，請參閱＃2 ），所以如果 - 例如 - 這些標籤引用外部文件，它們往往會減慢頁面的處理。（這是因爲瀏覽器可以處理document.write語句，這會更改他們正在處理的標記。）
具有defer屬性的腳本標記可能在一些瀏覽器上不會執行，直到DOM已完全渲染。自然，這些不能使用document.write。（類似地，有一個異步屬性使腳本異步，但我對它的瞭解不多，或者它的支持程度如何;細節。）
在DOM加載（通過innerHTML和類似方法）之後，您分配給元素的內容中的腳本標記完全不會被執行，除非您使用像jQuery或Prototype這樣的庫來爲您執行此操作。（除了Andy E指出的一個例外：在IE上，如果它們具有延遲屬性，它將執行它們，但在其他瀏覽器中不起作用。）
如果通過實際腳本元素附加到文檔元素＃appendChild，瀏覽器立即執行該腳本（如果你願意，你可以愉快地移除該元素，該腳本已經被執行和處理）。（您通常會將這些添加到head元素中，但實際上它並不重要。）
在發生相關事件時，腳本內部的屬性（）而不是腳本標記中的事件處理程序會執行。

原創作者 - 來自：When does the browser execute Javascript? How does the execution cursor move?

要回答你的最後一個問題 - 以及有時...

來源

2010-09-02 14:30:52

瞭解有關DOM和腳本執行的HTTP請求/響應

回答

相關問題