document.createElement（'script'）vs <script src =「」>

爲什麼像Google和Facebook這樣的服務使用document.createElement('script')而不是<script>？document.createElement（'script'）vs <script src =「」>

的谷歌Analytics（分析）片段：

<script type="text/javascript"> 
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); 
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); 
</script>

可以寫成剛：

<script src="//www.google-analytics.com/ga.js" type="text/javascript"></script>

和Facebook的喜歡按鈕：

<script>(function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) return; 
    js = d.createElement(s); js.id = id; 
    js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=xxx"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script>

可以簡化爲只：

<script src="//connect.facebook.net/en_GB/all.js#xfbml=1&appId=xxx"></script>

我知道這裏有一些安全的玩法，但除此之外，我不明白爲什麼我們不應該使用HTML5？

來源

2013-02-02 webjay

第一個（谷歌）不，它不能爲ssl的url不同。而這個語法只能用於javascript，所以如果客戶端沒有js或者它被停用，那麼就不會有資源請求。 –

'// www.google-analytics.com/ga.js'可以通過'http'和'https'使用，如果禁用JavaScript，''，甚至可能將其放在頁面的底部。 – webjay

@webjay另請注意，facebook腳本包含其他邏輯：它會檢查腳本是否已添加到頁面，如果是這種情況，請不要再添加腳本。 – bfavaretto

是的，甚至不必在底部！ –

是的，可以寫在腳本標記，但你引用的例子是那些網站提供給用戶一些代碼塊，他們需要複製粘貼到他們的網站
所以注射更好，因爲這這樣的網站像谷歌和臉書

1.你可以看到在谷歌的例子中，再次下載，就像在Facebook上做的一樣

3.有更多的控制什麼是b eing注入。因爲被注入的腳本可以動態改變而不需要用戶改變被注入的腳本的URL，這是很必要的，因爲許多瀏覽器只是將腳本保存在緩存中

4.這些網站保持它們的代碼排序並且不太容易受到用戶干擾

來源

2013-02-02 21:27:52

但除了它們不是更快？ – webjay

不，他們不是..事實上他們是慢的，因爲正在使用動態注入的腳本也佔用其空間 –

除了Salman A關於延遲加載的優點之外，當靜態解決方案不起作用時，會使用此技術。

我已經看到當緩存是一個問題（唯一的時間基於散列被添加到URL）
在上述SSL所示可以是谷歌鏈路的情況下動態地接通它使用。
在facebook代碼中，它檢查腳本是否已經存在（這可以避免兩次加載相同腳本的錯誤）。

也可能有其他原因。所有這些都需要動態解決方案。

來源

2013-02-02 21:41:27 Hogan

我看不到facebook代碼的原因 - 如果你會閱讀我的，你會 –

@ParvSharma - 我的答案中沒有看到Facebook代碼的原因，但Salman A的確給出了一個令人信服的理由。 – Hogan

這種方式網站可以檢查是否存在相同的腳本，然後選擇不再下載它，因爲在facebook中完成示例 –

document.createElement（'script'）vs <script src =「」>

相關問題