在等待加載高延遲腳本時，在DOMContentLoaded之前忽略document.write

Question

我嘗試過很多不同的方法來對google等人提出這個問題。 甚至不確定這個問題的標題是否抓住了問題的細微差別。 我會嘗試解釋然后展示實驗。 我希望有人可以指出對正在發生的事情的一些解釋。

鑒於：

• 在BODY結束之前，你有一個腳本（A）以編程方式將腳本元素（使用我的首選技術，document.createElement）插入到引用遠程腳本的文檔中（B）
• remote-script B執行任何內容的document.write（例如“hello，world”）
• 在BODY結束之前和腳本A之后你有一個腳本（C）引用一個需要一段時間來加載的遠程腳本（例如1s）

會發生什么是A執行，將B插入文檔並開始下載資源。 當B正在下載時，由於延遲，C將執行並等待。 當C在等待時，B被下載並執行; 我們還沒有點擊DOMContentLoaded; document.readyState仍在“加載”。 來自B的document.write被忽略; 狼吞虎咽，好像我們是post-DOMContentLoaded。 C然后完成下載並執行。

實驗：

• 資料來源： http ： //jsfiddle.net/jaknowlden/pwHG8/
• 直接嘗試： http ： //jsfiddle.net/jaknowlden/pwHG8/show/
• 瀑布：手動鏈接[cl.ly/423P2M1d0r0e0k3h370g]
• 遠程腳本：手動鏈接[thumblemonks.com/js/stackoverflow-script-b.js]

我正在使用Cuzillion來制造延遲。 如果你看看瀑布圖像，你還會看到console.log消息，它顯示在DOM命中“interactive”readyState（即DOMContentLoaded）之前所有內容都已執行。

我期望在瀏覽器中輸出的是：

TOP
hello, world
hello again, world
BOTTOM

我得到的輸出是：

TOP
hello, world
BOTTOM

你會在我的實驗中注意到我在我們定義為A和C的內容之間添加了另一個腳本。請調用此A'我想; 它表明，如果你動態添加一個包含document.write的文本（即非遠程腳本）的腳本，A'中的doc.write將起作用。

此外，dummy.js和CSS文件來自JSFiddle。 他們不是罪魁禍首; 我可以在任何地方重現這個問題。

我知道的事情：

• 如果用IMG替換C，則沒有問題
• 如果用IFRAME替換C，則沒有問題
• 如果你在C之后移動A，則沒有問題

現在：

也許有一個完全正確的理由。 必須有，因為我測試的所有瀏覽器似乎都以大致相同的方式運行。 我想知道的是為什么？ 歡迎任何解釋，提示和/或指示。 甚至提示“這是規格，dumby :)”我的皮膚很厚; 我能應付。

免責聲明：我厭惡document.write。 我的意圖不是以任何方式支持或加強其使用。 然而，鑒於我的工作性質，我現在必須解決它，這種奇怪的現象在我身上浮現。 因此，我想避免沿着“你不應該使用document.write”這句話的評論，因為這，我已經相信:)

Answer 1

在HTML5中不支持從異步加載的腳本執行document.write，正是因為它很活潑：您無法知道您的腳本是在DOMContentLoaded之前還是之后運行。 見http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#ignore-destructive-writes-counter和http://www.whatwg.org/specs/web-apps /current-work/multipage/elements.html#dom-document-write step 2 and http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting-1.html#execute-the -script-block第3步。關鍵是如果腳本擊敗DOMContentLoaded，但如果失去競爭就被忽略，那么寫入工作會很奇怪，會導致頁面有時工作，有時不依賴於網絡條件。

Answer 2

SEC7112：來自https://raw.github.com/gist/2141272/1a6bf0111ce10d55e628e3736a9d381d82e8a780/external-with-docwrite.js的腳本由於mime類型不匹配而被阻止

這是你的問題。 該腳本以text/plain傳輸，這不是JavaScript的有效MIME類型。