2010-03-09 48 views
1

我建立一個AJAX密集型的Web應用程序(使用ASP.NET,jQuery和WCF Web服務),並期待到建立一個處理腳本組合和壓縮我的JavaScript文件和我的CSS HTTP處理程序文件。我不知道相結合的腳本通常不太優選的方法,我敢肯定,它可能我會在最後走的方向,但我的問題是這樣的......的Javascript腳本合併和緩存

因爲很多我的JS文件是由於我使用的控件在第一次加載後不會被瀏覽器緩存?由於可以在我的Web應用程序的許多頁面上找到許多這些控件,因此將所有腳本組合起來併爲其提供一個文件(每個頁面會有所不同)或爲單個文件提供服務會更快緩存?我想我得到的是,通過啓用腳本結合我現在失去了瀏覽器的緩存能力的一部分?我知道我可以緩存組合的腳本,但組合的腳本對於每個頁面都會有所不同,但對於單獨的控制腳本,每個頁面調用都會緩存每個腳本,並且新腳本的數量也會最小。

這是否有意義?思考?

回答

1

你成爲JS文件的數量越少,速度就越快的網頁會,由於往返於服務器的數量較少。我會手動將所有常見的js代碼放入一個文件(或儘可能少的文件),將所有css代碼放入一個文件等,而不用擔心使用處理程序來合併文件。處理程序將花費處理時間來合併文件,所以你也要支付這個懲罰。你可以打開IIS上的gzip壓縮,並讓它爲你處理。我會在生產中使用的Javascript文件上運行諸如YUI Compressor之類的東西。

如果處理程序從網頁更改文件內容頁面,瀏覽器將無法進行緩存。如果你使用的是SSL,這一點將是沒有意義的,因爲瀏覽器不會緩存這些文件。

編輯 我已經改正了一些瀏覽器(如FF)可以緩存SSL內容而不是全部。

+0

有趣的是,我沒有意識到SSL在所有這一切中扮演着重要的角色。 Web應用程序正在使用SSL,並且會有大量需要加載的JS文件。我需要保持文件分離(至少對於開發),以維護代碼分離和可伸縮性。我可以讓Visual Studio處理一些編譯時的組合,但我真的不介意處理HttpHandler的懲罰代價,因爲我沒有看到它在性能方面成爲問題。 – Chris 2010-03-09 19:01:11

+0

另外,我相信Firefox 3+現在可以緩存來自SSL URL的CSS和JS文件。 – Chris 2010-03-09 19:05:10

0

通常較不優選的

是活的js?我想到了JavaScriptMVC,它將所有的代碼壓縮到一個文件中,而不是編譯時生成,而不是開發......我相信這是一個沉重的重量。

0

通常最好是所有腳本結合起來。在這種情況下,你會減少HTTP開銷。精簡的控制腳本通常很小。在極少數情況下,當你使用相當大的控制時,你無法將它與主要的js結合起來。

1

正如其他提到的:在一個靜態的JS文件和一個靜態的CSS文件中,minify,gzip和打開緩存(設置過期時間和支持etags)。在此之上,建議儘可能早地加載CSS文件,並儘可能晚地加載JS文件(JS文件加載阻止其他下載,並且如果瀏覽器儘快獲得CSS,則瀏覽器渲染速度會更快)。如果你有很多小圖片/圖標,精靈也有幫助。從子域加載靜態內容將有助於瀏覽器同時下載更多的內容,並且您可以刪除所有這些子域的cookie以降低http頭的大小。
你可以諮詢YSlow進行性能分析,這是一個很棒的工具!