多個腳本標記與單個腳本標記

Question

在使用單個腳本標記與嵌入代碼之間還是使用多個腳本標記以及遍佈HTML的相同代碼之間有什麼區別（性能，最佳實踐等）？

例如：

<script> 
    foo(); 
</script> 
... 
<script> 
    bar(); 
</script> 

與：

<script> 
    foo(); 
    bar(); 
</script> 

感謝

Answer 1

隨着直列腳本像你報什麼，有不太可能多差異;然而，每一次瀏覽器的HTML解析器遇到script標籤，它：

• 涉及到一個急剎車
• 積聚在標記了的文本字符串第一次看到串，直到"</script>"
• 手文本關閉的JavaScript解釋器，監聽輸出解釋發送它時，你的解釋做了document.write
• 等待完成
• 插入累計輸出接收到解析流
• 繼續解析

因此增加該序列具有發生在理論上可以，增加你的頁面加載時間的次數。它也會影響解析器在令牌流中「向前看」的程度，這可能會使效率降低。

所有這些聽起來都非常引人注目，但您必須在您關心的各種瀏覽器中剖析真實頁面，以確定它是否具有真實世界的影響。

因此，總之，儘可能多地合併它們。如果你不能合理地結合一對夫妻，除非你看到現實世界的問題，否則不要太擔心。

以上是針對內聯腳本的內容。當然，如果你有幾個script標籤引用了一堆外部JavaScript文件，那麼你也會遇到這樣的問題：每個文件都必須下載，而啓動HTTP請求是一件昂貴的事情（相對），所以最好在很大程度上，將這些組合成單個文件。

其他需要考慮的因素：

• 有很多script標籤遍佈你的HTML可能使其難以做到對劇本
• 你的HTML和腳本分離成單獨的文件維護有助於您限制再次幫助維護
• 將腳本放在單獨的文件中可以通過縮小器/壓縮器/打包器運行該文件，最大限度地減少代碼的大小並刪除註釋，從而讓您可以自由發表評論在你的源代碼知道th ose評論將是私人的
• 將您的腳本放入外部文件讓您有機會將功能分開，然後將它們合併爲單個文件（壓縮/縮小/壓縮）以便高效傳送到瀏覽器

更多：

• YUI's "Best Practices for Speeding Up your Web Site"
• Google's "Web Performance Best Practices"

Answer 2

儘可能多的結合你的腳本儘可能在我看來是更好的。一些瀏覽器必須在執行腳本塊時暫停渲染。看看答案在：Javascript Performance: Multiple script blocks Vs single bigger block

Answer 3

一些人認爲，最好的做法是將所有腳本合併到一個腳本塊或單個腳本文件中，只加載真正需要的JavaScript並儘可能晚加載，以免減慢html的渲染速度。

除此之外，我確信使用單個腳本塊加載速度比使用多個腳本塊要快，因爲它們必須單獨進行評估。然而，這種差異可能無法識別。

Answer 4

到目前爲止，所有的JavaScript代碼都在一個標籤中，這並不一定是這種情況。

您可以在文檔中包含儘可能多的標籤。

這些標籤會在遇到時處理。

希望這會有所幫助。