Document.write 塞入script 會如何?

今天看到一則噗浪討論串,感覺很有趣,便花點時間研究一下這個課題,問題如果使用document.write塞入script會有什麼優缺點?

在實做上大部分都是使用非同步載入,主要都是為了讓頁面載入時間能夠重疊,感覺上讀取時間就會縮短,幾乎使用document.createElement(‘script’),塞入head當中,這樣子執行上就不會有阻塞的問題。

如果頁面上是使用document.write?

這個問題還真的沒有研究過,稍微Google一下之後,發現有一篇討論串解決心中的疑惑,不過還是隨手寫一下sample page藉由瀏覽器來驗證。

**測試1**
**sample.html**`







` **before.js** `alert("Before");

` **after.js** `alert("After");

` 為了讓容量上有些差異因此,使用[javascript 混淆器](http://utf-8.jp/public/jjencode.html),將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("