更快地提供静态文件的提示，例如 JavaScript、CSS 和图像答案

【问题标题】：Tips for serving static files faster, like JavaScripts, CSS and images更快地提供静态文件的提示，例如 JavaScript、CSS 和图像
【发布时间】：2011-04-03 02:07:38
【问题描述】：

我想从我们的 SO 用户那里获得一些关于在网站上更快地提供静态文件（如 JavaScript、CSS、图像和 Flash 文件）的提示。有什么有用的提示吗？

【问题讨论】：

这应该是社区 wiki，尽管我认为它有点过于笼统......
@Nick 更改为社区 wiki..

标签： asp.net performance static-files

【解决方案1】：

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

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

一些不太重要但仍然有价值的提示：

minify your JavaScript（仅加速首次加载）；
combine your JavaScripts and CSS-files into one 和；
use CSS sprites 用于您的（较小的）图片。

注意：StackOverflow 是一个很好的示例网站，遵循所有这些提示并下载YSlow 以测试您自己的网站。

【讨论】：

如何将你的 JavaScript 和 CSS 文件合二为一？有什么好的入门文章吗？
@Pandiya：这在很大程度上取决于您如何为他们服务。即，如果它们是动态生成的，则必须更改动态生成。一般来说，合并 JavaScript 文件或 CSS 只不过是将它们原封不动地粘贴到一个文件中（但请确保保持加载顺序）。
@Pandiya：我更新了帖子，并添加了指向另一篇关于该主题的 SO 文章的链接。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

对静态内容使用内容交付网络 - CDN。

或者，您可以创建一个子域，即 gfx.yoursite.com，来托管您的所有静态内容。禁用 cookie 并通过积极缓存优化网站性能。

您可能还想研究 CSS sprite，它们也可以提高普通图形的性能。

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

【讨论】：

我以为IE还不支持data-scheme，所以排除了大部分用户... :(