2009-02-17 102 views
42

我的web應用程序使用jQuery和一些jQuery插件(例如驗證,自動完成)。我想知道是否應該將它們粘貼到一個.js文件中,以便它可以更容易地緩存,或將它們分解爲單獨的文件,並且只包含給定頁面所需的文件。將JavaScript放入一個.js文件或將它分解爲多個.js文件?

我還應該提及,我關心的不僅僅是下載.js文件所需的時間,還有根據加載的.js文件的內容減慢頁面的速度。例如,添加自動完成插件往往會使我的基本測試的響應時間減緩100ms左右,即使在緩存時也是如此。我的猜測是,它必須掃描DOM中導致延遲的元素。

+0

HTTP的重複:// stackoverflow.com/questions/490618/multiple-javascript-css-files-best-practices – cletus 2009-02-17 06:52:27

回答

1

如果有人要訪問您網站中的多個頁面,最好將它們全部放在一個文件中以便緩存。他們會在最前面花一點時間,但這將是他們花在您網站上的整個時間。

1

在一天結束後,這取決於你。

但是,每個網頁所包含的信息越少,終端用戶下載的信息就會越快。

如果你只包括每個頁面所需的js文件,似乎更可能是你的網站將更有效率和精簡

29

共同但相關答案:

這取決於項目。

如果你有一個相當有限的網站,其中大部分功能在網站的多個部分被重複使用,將所有腳本放到一個文件中是有意義的。

但是,在我所研究的幾個大型Web項目中,將常見站點範圍的功能放入單個文件並將更多特定於部分的功能放入其自己的文件中更有意義。 (我們所說的大腳本文件在這裏,爲幾個不同的網絡應用程序的行爲,同一個域下的所有服務。)

的好處分手了腳本成單獨的文件,就是你不必爲用戶提供他們不使用的不必要的內容和帶寬。 (例如,如果他們從未訪問網站上的「應用程序A」,他們將永遠不需要「App A」部分的腳本100K,但他們需要常見的站點範圍的功能。)

好處將腳本保存在一個文件中很簡單。服務器上點擊更少。用戶下載量更少。

儘管如此,YMMV。沒有硬性規定。根據用戶的使用情況並根據您的項目結構進行對用戶最有意義的選擇。

2

如果每個頁面都需要這些文件,請將它們放在一個文件中。這將減少HTTP請求的數量,並將改善響應時間(對於大量訪問)。

其他提示

1

Yahoo best practice如果你喜歡在開發單獨的文件中的代碼,你可以寫一個快速腳本將它們連接成微小前一個文件。

一個大文件更適合於減少HTTP請求,正如其他海報所示。

0

我也認爲你應該按照其他人的建議走單行路線。但是,對於只是被包含在您的大型js文件中的插件吃掉週期:

在執行昂貴的操作之前,請使用一些檢查來確保您甚至在需要操作的頁面上。也許你可以在運行自動完成插件之前檢測到dom節點的存在(或不存在),並且只在必要時初始化插件。沒有必要浪費頁面或部分的dom遍歷的開銷,而永遠不需要某些功能。

昂貴的代碼塊之前的一個簡單的條件會給你兩種方法的好處,你正在決定。

2

我會非常贊同bigmattyh說的,它的確取決於。

作爲一般規則,我嘗試儘可能多地聚合腳本文件,但是如果您有一些腳本僅用於網站的某些區域,尤其是那些在加載時執行大型DOM遍歷的腳本,將它們放在單獨的文件中是有意義的。
例如如果您只在聯繫頁面上使用驗證,爲什麼將它加載到您的主頁上?另外,有時候你可以將這些文件潛入間隙頁面,在那裏沒有太多其他的事情發生,所以當用戶登陸一個需要它的非常沉重的頁面時,它應該已經被緩存 - 謹慎使用 - 但是當你有人以你爲基準時,這可能是一個方便的技巧。

因此,儘可能少的腳本文件,在合理範圍內。

如果您發送的是100K的monolith,但只有80%的頁面使用了20K,請考慮將其拆分。

1

這很大程度上取決於用戶與您網站的互動方式。

一些問題供大家思考:

  • 有多重要,你的第一個頁面加載速度非常快?
  • 用戶通常是否將大部分時間用於網站的不同部分並提供了子功能?
  • 當頁面準備就緒時,您是否需要準備好所有腳本,或者在頁面加載後插入<script>元素以加載一些腳本?

對於用戶如何使用您的網站以及想要優化的內容有一個很好的想法是一個好主意,如果您真的希望提高性能。

但是,我的默認方法是隻連接並將我的所有javascript縮減爲一個文件。 jQuery和jQuery.ui很小,開銷很低。如果你使用的插件對頁面加載時間有100毫秒的影響,那麼可能是錯誤的。

有幾件事情要檢查:

  • 是使用gzip壓縮您的HTTP服務器上啓用?
  • 您是否生成具有唯一名稱的靜態文件作爲部署的一部分?
  • 你是否提供永不停止的緩存過期的靜態文件?
  • 您是否將您的CSS放在頁面頂部,腳本放在底部?
  • 有沒有更好的(更小,更快)的jQuery插件,做同樣的事情?
43

我認爲這取決於他們多久更換一次。讓我們以這個例子:

  • JQuery的:改變每年一次
  • 第三方插件:更改每6個月
  • 您的自定義代碼:每個星期換

如果您的自定義代碼僅代表總代碼的10%,你不希望用戶每週下載另外90%的代碼。你至少要分成兩個j:JQuery +插件和你的自定義代碼。現在,如果您的自定義代碼佔全尺寸的90%,則將所有內容放在一個文件中更有意義。

當選擇如何JS文件組合(和同爲CSS),我平衡:

  • 文件的相對大小
  • 更新的數量預計
+0

當用戶返回訪問該頁面時,這對於瀏覽器緩存也是有意義的。您甚至可以利用CDN託管庫在各個網站上緩存(例如:https://developers.google.com/speed/libraries/devguide#jquery)。 – styfle 2013-07-10 19:55:51

相關問題