更快地提供静态文件的提示，如JavaScripts，CSS和图像

Question

我想从SO用户那里获得一些关于在网站上提供静态文件的提示 - 比如JavaScript，CSS，图像和Flash文件 - 更快。任何有用的提示？

Answer 1

我能给你的最好的建议是：购买Steve Sounder's book High Performance Web Sites，这里有很多易于理解的提示。在静态图像的帐户上：使用内容传送网络（CDN），这意味着：只需将静态内容放在另一个服务器上，另一个（子）域上，您就可以获得静态内容的最佳性能。

优点是：没有cookie来回发送（这会产生很多开销！），没有其他HTTP开销，良好的超时，使用外部CDN时性能稳定，而且您自己的服务器的流量要少得多。有许多商业（如亚马逊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精灵，它们可以提高常见图形的性能。

要减少页面中的外部资源数量，您还可以使用base 64编码将小图像直接嵌入CSS文件中。这将减少DNS查找次数并提高性能。然而，它增加了相当多的复杂性，维护很快成为一场噩梦。这是一个很好的工具来帮助你Convert any image into a base64 string，但要小心。 ：）

Answer 3

在http://developer.yahoo.com/yslow/和http://developer.yahoo.com/performance/rules.html查看雅虎的建议。一些一般性观点：

1. 将CDN用于静态文件（并禁用CDN域上的cookie）
2. 确保优化图像尺寸
3. 缩小您的JS文件
4. 将您的SCRIPT标记放在HTML的底部，并尽可能使用“defer =”属性（这会加快浏览器加载页面的速度）。