2015-08-16 73 views
6

這將導致更高的速度/效率:引用目錄中所有文件的一個JavaScript文件或引用目錄中每個文件的不同JavaScript文件?引用單獨的JS文件與一個JS文件

所以基本上,在所有網頁中引用相同的JavaScript文件與每個網頁的唯一JavaScript文件。

注意:我認爲引用單個文件會比較慢,因爲那裏有一些代碼已經被某些文件淘汰,從而運行無用代碼並導致文件運行效率降低。

+0

關於從其他文件讀取無用的代碼,不應該由於其他文件涉及過時的代碼而導致一個JS文件變慢? –

回答

8

涉及權衡,所以您可能最終需要衡量您的具體情況,以確保。但是,我會解釋一些權衡。

  1. 如果你有數據或巨代碼量的巨大金額,只在一個或幾個頁面中使用,那麼你可能會想單獨說出來到自己的文件,所以您只能加載它,初始化它,並在實際需要時使其佔用內存。但是,請注意現代計算機(甚至是手機)的內存量,數據或代碼必須相當大才能保證單獨下載。

  2. 除了第1項,您幾乎總是想要優化爲最大緩存效率。從緩存中檢索文件(即使是比需要更大的文件)比通過網絡檢索任何文件(甚至是小文件)要快得多,因爲這些文件是您真正想要針對緩存進行優化的文件。而且,檢索這些文件的時間通常會超過JS分析時間(現在的CPU速度非常快),因此觸發額外的下載以節省一些JS分析時間的速度可能不會更快。

  3. 優化緩存的最佳方式是到讓大多數頁面引用相同的通用腳本文件。然後,當觀衆第一次訪問您的網站時,它們會被加載一次,並且所有後續加載都會從瀏覽器緩存中正確顯示。這是理想的。這種緩存效率很容易克服在主文件中有一些未被使用或未被觸發的代碼在某些頁面中沒有被使用。

  4. 許多小的下載量(甚至來自緩存)比一個更大的下載效率低。對於瀏覽器或服務器來說,更多不同的請求通常不會那麼高效。所以,將JS文件組合成更大的連接文件通常是件好事。

  5. 所有這些都是有限制的。如果你已經將100個獨立頁面的代碼完全分開,並將所有代碼連接在一起,並且每段代碼都會搜索DOM中的多個頁面元素(並且99%的時間未找到它們),那麼這可能不是一種有效的方法。但是,通常情況下,您可以根據高級類名將事物劃分爲多個類別,從而使共享代碼更智能。因此,例如,基於<body>標籤上的類名稱的存在,您將只運行部分初始化代碼,跳過其餘部分,因爲它的分類不存在。因此,在組合代碼時,其中大部分代碼在任何給定頁面上都不相關,因此明智地決定如何確定共享文件中實際運行的初始化代碼。

3

您需要測量您的特定情況 - 因爲每個站點/頁面在加載較少文件/加載額外不必要的腳本(同樣適用於CSS)之間有自己的平衡。

通常單個文件在HTTP v1中速度更快,因爲並行下載的總數有限制,HTTP v2應該消除差異。

相關問題