更快速地提供靜態文件的提示，如JavaScript，CSS和圖像

Question

我想從我們的SO用戶那裏獲得一些關於在網站上提供靜態文件的提示—像JavaScript，CSS，圖像和Flash文件—更快。任何有用的提示？

Answer 1

最好的提示，我可以給你的是：購買Steve Sounder's book High Performance Web Sites裏面充滿了容易遵循的提示。基於靜態圖像：使用內容交付網絡（CDN），這意味着：只需將您的靜態內容放置在另一個服務器上，另一個（子）域上，並且您可以獲得靜態內容的最佳性能。

優點是：沒有cookies來回發送（這佔用了很多開銷！），使用外部CDN和您自己的服務器時，沒有其他HTTP開銷，超時時間，穩定的性能，獲得更少的流量。有許多商業（如亞馬遜S3），但也有免費的CDN供應商。

一些不太重要，但提示仍然是有價值的：

• minify your JavaScript（加速僅第一負載）;
• combine your JavaScripts and CSS-files into one和;
• use CSS sprites爲您的（小）圖像。

注：StackOverflow上是一個很好的例子網站，如下所有這些提示，下載YSlow來測試自己的網站。

Answer 2

對靜態內容使用內容傳遞網絡 - CDN。

或者，你可以創建一個子域，即gfx.yoursite.com，託管您的所有靜態內容。通過積極緩存來禁用Cookie並優化網站性能。

您可能還想研究一下CSS精靈，它們可以提高常見圖形的性能。

爲了減少外部資源的數量在一個頁面中，您還可以使用基地64編碼直接嵌入小圖片在你的CSS文件。這將減少DNS查找的數量並提高性能。但是，它增加了很多複雜性，維護很快就成爲一場噩夢。這是一個漂亮的工具來幫助你，但要小心。 :)

Answer 3

退房雅虎在http://developer.yahoo.com/yslow/和http://developer.yahoo.com/performance/rules.html建議。一些一般性的要點：

1. （在CDN領域和禁用cookie）使用CDN靜態文件
2. 確保圖像的尺寸進行了優化
3. 縮減大小的JS文件
4. 將在腳本標記底部你的HTML，並儘可能使用「defer =」屬性（這加快了瀏覽器加載頁面）