爲什麼人們總是鼓勵一個網站的單個js？

Question

我在網上閱讀了一些網站開發資料，每次有人要求組織一個網站的js，css，html和php文件時，人們都會爲整個網站建議單個js。而論點是速度。

我清楚地知道有更少的請求，頁面響應得越快。但我從不理解單個js的論點。假設你有10個網頁，每個網頁都需要一個js函數來操縱dom對象。將10個函數放在一個js中，並讓這個js在每個網頁上執行，10個函數中有9個是無用的工作。在尋找不存在的dom對象時CPU浪費時間。

我知道單個客戶端計算機上的CPU時間與單服務器計算機上的帶寬相比非常微不足道。我並不是說你應該在單個網頁上有很多js文件。但是，如果每個網頁引用1到3個js文件並且這些js文件都緩存在客戶端計算機中，我不會看到任何問題。有很多好的方法來做緩存。例如，您可以使用過期日期，或者您可以在您的js文件名中包含版本號。相比於在一個大的js文件中混淆了一個網站的許多網頁的所有需求的功能，我更願意將js代碼分割成更小的文件。

對我的論點有任何批評/協議嗎？我錯了嗎？謝謝你的建議。

Answer 1

除非被調用，否則函數不起作用。所以9個空函數都是0的工作，只是一點確切的空間。

客戶端只需要下載1個大JS文件的請求，然後緩存在其他頁面上。比在每個頁面上做一個小的請求的工作少。

Answer 2

該Javascript的設計應該使額外的功能不會執行，除非他們需要。

例如，您可以在腳本中定義一組函數，但只能在頁面中自己調用（非常短）<script>塊。

Answer 3

我能想到的兩個原因：

較少的網絡延遲。每個.js都需要對從其下載的服務器的另一個請求/響應。

更多的字節在線和更多的內存。如果它是一個文件，你可以刪除不必要的字符並縮小整個事情。

Answer 4

我的思路是你的要求較少。當您在頁面的標題中發出請求時，它會停止頁面其餘部分的輸出。在獲得javascript文件之前，用戶代理無法渲染頁面的其餘部分。同時javascript文件也會下載，他們排隊而不是立即拉（至少這是理論）。

Answer 5

我會給你我總是給的答案：這取決於。

所有的東西結合成一個文件有許多好處，包括：

1. 減少網絡流量 - 你可能會檢索一個文件，但你發送/接收多個數據包，每筆交易都有一個通過TCP發送的一系列SYN，SYN-ACK和ACK消息。大部分傳輸時間正在建立會話，並且數據包頭中有很多開銷。

2. 一個位置/可管理性 - 雖然只有幾個文件，但函數（和類對象）在各個版本之間很容易增長。當你使用多文件方法時，有時函數會從一個文件中調用另一個文件中的函數/對象（例如，一個文件中的ajax，然後是另一個文件中的算術函數） - 您的算術函數可能需要調用ajax並具有某種變量類型回）。最終發生的事情是你的文件集需要被看作是一個版本，而不是每個文件都是它自己的版本。如果你沒有良好的管理，事情就會變得毛骨悚然，並且很容易與Javascript文件脫節，這些文件總是在變化。擁有一個文件可以輕鬆管理您的（1到多個）網站中每個網頁之間的版本。

其他議題來考慮：

1. 休眠代碼 - 你可能會認爲多餘的功能可能受佔用內存空間降低性能和你是對的，但是這表現如此如此如此微不足道，無所謂。函數在內存中索引，而索引表可能會增加，但在處理小型項目時尤其如此，尤其是考慮到今天的硬件。

2. 內存泄漏 - 這可能是爲什麼你不希望將所有的代碼的最大理由，但是這是給內存在今天的系統量這麼小的問題，更好的垃圾收集瀏覽器有。此外，作爲程序員，您可以控制這些功能。質量代碼導致這樣的問題較少。

爲什麼它取決於？

雖然很容易將所有的代碼扔到一個文件中，但這是錯誤的。這取決於你的代碼有多大，有多少函數，維護它等等。當然，你不會將你本地編寫的函數打包到JQuery包中，並且你可能有不同的程序員維護不同的代碼塊 - 這取決於你的建立。

它也取決於大小。一些程序員將編碼後的圖像作爲ASCII嵌入文件中，以減少發送的文件數量。這些可以膨脹文件。當然你不想把所有東西都打包成1個50MB的文件。特別是如果有頁面加載所需的核心功能。因此，爲了使我的反應結束，我們需要更多關於您的設置的信息，因爲它取決於。當然3個文件是可以接受的，無論大小，結合你認爲合適的地方。它可能不會真的傷害網絡流量，但50個文件更不合理。我使用手工規則（不超過5個），但您肯定會看到將這5個1KB文件合併到1個5KB文件中的好處。