爲什麼內聯腳本放在頁面底部時會阻止渲染？

這在this example中說明。外部腳本標記塊同時下載下載和漸進式渲染的一個頁面，所以解決方案是把它放在頁面的底部。

但是，在他的第二本書Even Faster Web Sites: Performance Best Practices for Web Developers中他談到了Inline JavaScript標記。

內聯腳本還會阻止下載和呈現頁面，因此他建議將它們也移動到頁面的底部。但是，這種行爲仍然塊全部爲this example

說明爲什麼移動外部腳本到頁面底部讓頁面逐步在執行移動內嵌腳本塊完全呈現直到腳本渲染頁面的渲染？

PS：

的問題不是爲什麼在頁面的底部添加JavaScript，而不是把他們的頭。這是關於爲什麼底部內聯腳本阻止呈現，而底部外部腳本沒有。

2013-08-17 Songo

在內聯腳本中，運行腳本所花費的時間可能會改變DOM。嘗試在變異時呈現DOM是一團糟。所以渲染只發生在JS停滯的時候，因此DOM是穩定的。

在等待外部腳本下載時，腳本的運行會停止，因此可以安全地呈現DOM。下載的JS將不會運行，直到渲染完成。

2013-08-18 00:25:03 Alohci

有趣的是，如果我有一個外部腳本後跟一個內聯腳本，並且都放在主體底部，內聯腳本將等待外部腳本下載並執行。這樣，直到兩個腳本都被執行，頁面纔會渲染，對嗎？ – Songo

否。瀏覽器可能會呈現DOM，同時等待外部腳本下載。此時，它甚至不會（在邏輯上）意識到標記中存在內聯腳本，因爲解析器尚未達到它。請注意，外部腳本可能包含一個'document.write（）'調用，它可以阻止內聯腳本被解釋爲腳本。 – Alohci

我測試了你說的話，這是真的，但如果外部文件沒有被緩存。第一次打開頁面並且沒有等待內聯腳本，但是在隨後的請求中外部文件已經被緩存，所以渲染被暫停直到內聯腳本完成。順便說一句，我正在使用一個自定義的內聯腳本，需要6分鐘才能完成測試目的。 – Songo

回答