今天看到一則噗浪討論串，感覺很有趣，便花點時間研究一下這個課題，問題如果使用document.write塞入script會有什麼優缺點？
在實做上大部分都是使用非同步載入，主要都是為了讓頁面載入時間能夠重疊，感覺上讀取時間就會縮短，幾乎使用document.createElement('script')，塞入head當中，這樣子執行上就不會有阻塞的問題。
如果頁面上是使用document.write？
這個問題還真的沒有研究過，稍微Google一下之後，發現有一篇討論串解決心中的疑惑，不過還是隨手寫一下sample page藉由瀏覽器來驗證。
測試1
sample.html
before.js
after.js
為了讓容量上有些差異因此，使用javascript 混淆器，將after.js 內容調整為
接著可以看到sample.html，程式內部先使用document.write載入，after.js，再載入before.js，先預期一下結果：
結果1
結果看到，先執行after，再執行before ，因此可以判斷如果採用document.write，頁面的script 是會同步載入資料。
測試2
接著測試看看，如果頁面上資料跟載入的頁面有相關性會是什麼情況呢？
sample.html
多寫入一個function callContent。
before.js
呼叫sample頁面上的during函式 ，如果正確的話，應該是before之後就會執行during 。
after.js
混淆碼，內容不變。
依據上面的順序，預測輸出結果應該是after, before, during。
結果2
透過瀏覽器測試，發現during 執行時會顯示錯誤。
測試3
修改一下，sample.html 順序
其餘程式不變，測試之後發現，順序果然如預期after, before, during，正常執行。
線上測試頁面 online demo
結論
使用document.write方式，確定可以使script節點同步載入，會等待資料載入結束後才會繼續執行後續程式，與javascript 載入有相同問題，必須要注意宣告先後順序，需要優先執行的函式盡量在最開始就宣告完畢，以避免錯誤發生。
在實做上大部分都是使用非同步載入，主要都是為了讓頁面載入時間能夠重疊，感覺上讀取時間就會縮短，幾乎使用document.createElement('script')，塞入head當中，這樣子執行上就不會有阻塞的問題。
如果頁面上是使用document.write？
這個問題還真的沒有研究過，稍微Google一下之後，發現有一篇討論串解決心中的疑惑，不過還是隨手寫一下sample page藉由瀏覽器來驗證。
測試1
sample.html
<body>
<!--javascript-->
<script language="javascript" type="text/javascript">
document.write("<script language='javascript' type='text/javascript' src='after.js'><\x2Fscript>");
document.write("<script language='javascript' type='text/javascript' src='before.js'><\x2Fscript>");
</script>
</body>
before.js
alert("Before");
after.js
alert("After");
為了讓容量上有些差異因此，使用javascript 混淆器，將after.js 內容調整為
$=~[];$={___:++$,$$$$:(![]+"")[$],__$:++$,$_$_:(![]+"")[$],_$_:++$,$_$$:({}+"")[$],$$_$:($[$]+"")[$],_$$:++$,$$$_:(!""+"")[$],$__:++$,$_$:++$,$$__:({}+"")[$],$$_:++$,$$$:++$,$___:++$,$__$:++$};$.$_=($.$_=$+"")[$.$_$]+($._$=$.$_[$.__$])+($.$$=($.$+"")[$.__$])+((!$)+"")[$._$$]+($.__=$.$_[$.$$_])+($.$=(!""+"")[$.__$])+($._=(!""+"")[$._$_])+$.$_[$.$_$]+$.__+$._$+$.$;$.$$=$.$+(!""+"")[$._$$]+$.__+$._+$.$+$.$$;$.$=($.___)[$.$_][$.$_];$.$($.$($.$$+"\""+$.$_$_+(![]+"")[$._$_]+$.$$$_+"\\"+$.__$+$.$$_+$._$_+$.__+"(\\\"\\"+$.__$+$.___+$.__$+$.$$$$+$.__+$.$$$_+"\\"+$.__$+$.$$_+$._$_+"\\\");"+"\"")())();
接著可以看到sample.html，程式內部先使用document.write載入，after.js，再載入before.js，先預期一下結果：
- 非同步，先執行before.js，再執行after.js
- 同步載入，執行after.js，再執行before.js
結果1
結果看到，先執行after，再執行before ，因此可以判斷如果採用document.write，頁面的script 是會同步載入資料。
測試2
接著測試看看，如果頁面上資料跟載入的頁面有相關性會是什麼情況呢？
sample.html
document.write("<script language='javascript' type='text/javascript' src='after.js'><\x2Fscript>");
document.write("<script language='javascript' type='text/javascript' src='before.js'><\x2Fscript>");
document.write("<script language='javascript' type='text/javascript'>function during() { alert('during'); }<\x2Fscript>");
多寫入一個function callContent。
before.js
alert("Before");during();
呼叫sample頁面上的during函式 ，如果正確的話，應該是before之後就會執行during 。
after.js
$=~[];$={___:++$,$$$$:(![]+"")[$],__$:++$,$_$_:(![]+"")[$],_$_:++$,$_$$:({}+"")[$],$$_$:($[$]+"")[$],_$$:++$,$$$_:(!""+"")[$],$__:++$,$_$:++$,$$__:({}+"")[$],$$_:++$,$$$:++$,$___:++$,$__$:++$};$.$_=($.$_=$+"")[$.$_$]+($._$=$.$_[$.__$])+($.$$=($.$+"")[$.__$])+((!$)+"")[$._$$]+($.__=$.$_[$.$$_])+($.$=(!""+"")[$.__$])+($._=(!""+"")[$._$_])+$.$_[$.$_$]+$.__+$._$+$.$;$.$$=$.$+(!""+"")[$._$$]+$.__+$._+$.$+$.$$;$.$=($.___)[$.$_][$.$_];$.$($.$($.$$+"\""+$.$_$_+(![]+"")[$._$_]+$.$$$_+"\\"+$.__$+$.$$_+$._$_+$.__+"(\\\"\\"+$.__$+$.___+$.__$+$.$$$$+$.__+$.$$$_+"\\"+$.__$+$.$$_+$._$_+"\\\");"+"\"")())();
混淆碼，內容不變。
依據上面的順序，預測輸出結果應該是after, before, during。
結果2
透過瀏覽器測試，發現during 執行時會顯示錯誤。
測試3
修改一下，sample.html 順序
document.write("<script language='javascript' type='text/javascript' src='after.js'><\x2Fscript>");
document.write("<script language='javascript' type='text/javascript'>function during() { alert('during'); }<\x2Fscript>");
document.write("<script language='javascript' type='text/javascript' src='before.js'><\x2Fscript>");
其餘程式不變，測試之後發現，順序果然如預期after, before, during，正常執行。
線上測試頁面 online demo
結論
使用document.write方式，確定可以使script節點同步載入，會等待資料載入結束後才會繼續執行後續程式，與javascript 載入有相同問題，必須要注意宣告先後順序，需要優先執行的函式盡量在最開始就宣告完畢，以避免錯誤發生。
An outstanding share! I've just forwarded this onto a coworker who had been conducting a little research on this. And he actually ordered me lunch simply because I stumbled upon it for him... lol. So allow me to reword this.... Thanks for the meal!! But yeah, thanks for spending some time to discuss this matter here on your website.
回覆刪除Also visit my webpage chelsea transfer news squad