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

Question

我想从So用户那里获得一些有关在网站上使用静态文件的提示，例如JavaScript，CSS，Images和Flash Files - 更快。有用的提示吗？

Answer 1

我能给你的最好的提示是：购买 史蒂夫·声音的书 高性能网站 这充满了易于遵循的技巧。在静态图像的帐户上：使用内容输送网络（CDN），这意味着：只需将静态内容放在另一个服务器上，在另一个（子）域上，您拥有静态内容的最佳性能。

优点是：没有cookie来回发送（这说明了开销很多！），没有其他HTTP开销，良好的超时，使用外部CDN时的稳定性能，并且您自己的服务器会变得更少。有许多商业（例如Amazon S3），也有免费的CDN供应商。

一些不太重要但仍然有价值的技巧：

• 缩小您的JavaScript （仅加速首先加载）;
• 将您的JavaScript和CSS文件组合到一个 和;
• 使用CSS精灵 对于您的（较小）图像。

注意：Stackoverflow是一个很好的示例网站 全部 这些技巧并下载 是的 测试您自己的网站。

Answer 2

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

1. 使用CDN进行静态文件（并在CDN域上禁用cookie）
2. 确保优化图像尺寸
3. 缩小您的JS文件
4. 将您的脚本标签放在HTML的底部，并在可能的情况下使用“ defer =”属性（这会加速浏览器加载页面）

Answer 3

使用内容输送网络-CDN-用于静态内容。

另外，您可以创建一个子域，即gfx.yoursite.com，以托管所有静态内容。禁用cookie并使用敏捷的缓存优化站点性能。

您可能还想研究CSS Sprites，它们也可以提高常见图形的性能。

为了减少页面中的外部资源数量，您还可以使用基本64编码直接将小图像嵌入CSS文件中。这将减少DNS查找的数量并提高性能。但是，它增加了相当多的复杂性，维护迅速成为一场噩梦。这是一个可帮助您的漂亮工具 将任何图像转换为base64字符串, ， 不过要小心。 :)