HTML中兩種JS實現之間的差異

Question

HTML文件中這兩種JavaScript實現之間的區別是什麼？

1. <script src="foo.js" type="text/javascript"></script>

2. 隨着谷歌Analytics（分析）做它編程：

   (function() { 
   var ga = document.createElement('script'); ga.type = 'text/javascript'; 
   ga.async = true; 
   ga.src = ('https:' == document.location.protocol ? 
   'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
   var s = document.getElementsByTagName('script')[0]; 
   s.parentNode.insertBefore(ga, s); 
       })(); 
   

是否有瀏覽器的加載/如何呈現HTML網頁或者是有與一些差異的任何差異連接緩存這樣的JS腳本？

Answer 1

您的第一個腳本標籤強制瀏覽器同步拉入該文件;換句話說，在繼續渲染頁面之前，瀏覽器將停止所有其他活動來下載，解析並執行腳本。

在第二種情況下（您的谷歌的東西），是動態創建的腳本元素，該文件是異步加載。

第一個標籤是blocking，第二個不是。

更多async：

• https://developer.mozilla.org/en-US/docs/HTML/Element/Script

更多的 「堵」 腳本的影響：

• http://developer.yahoo.com/performance/rules.html

摘要：把SC如果他們被阻止，它會在頁面底部肆虐。

Answer 2

一般來說，沒有。

在該特定情況下：Google正在使用不同的主機名來提供SSL版本。

如果您使用的HTTP和HTTPS版本相同的主機名，你可以只使用：

<script src="//example.com/ga.js" async></script> 

...達到相同的效果。

注意添加async屬性，這是在谷歌Android2.1版本（2），但不是你的（1）。