更快地提供静态文件(例如 JavaScript、CSS 和图像)的技巧
我想从我们的 SO 用户那里得到一些关于更快地在网站上提供静态文件(例如 JavaScript、CSS、图像和 Flash 文件)的提示。有什么有用的提示吗?
I would like to get some tips from our SO users about serving static files on a website — like JavaScript, CSS, images and Flash files — faster. Any useful tips?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
我能给你的最好建议是:购买 Steve Sounder 的书高性能网站 其中充满了易于遵循的提示。对于静态图像:使用内容交付网络 (CDN),这意味着:只需将静态内容放在另一台服务器上的另一个(子)域上,您就可以获得静态内容的最佳性能。
优点是:没有 cookie 来回发送(这会带来很大的开销!)、没有其他 HTTP 开销、良好的超时、使用外部 CDN 时的稳定性能以及您自己的服务器的流量少得多。有许多商业(如 Amazon S3),但也有免费的 CDN 供应商。
一些不太重要但仍然有价值的提示:
注意:StackOverflow 是一个很好的示例网站, 遵循所有这些技巧并下载 YSlow 来测试您自己的网站。
The best tip I can give you is: buy Steve Sounder's book High Performance Web Sites which is full of easy-to-follow tips. On the account of static images: use a content delivery network (CDN), which means: just place your static content on another server, on another (sub) domain and you have the best performance you can have for static content.
The advantages are: no cookies send back and forth (this accounts for much overhead!), no other HTTP overhead, good timeouts, solid performance when using external CDN and your own server gets much less trafic. There are many commercial (like Amazon S3), but also free, CDN suppliers.
Some less-important but still valuable of tips:
Note: StackOverflow is a fine example website that follows all these tips and download YSlow to test your own website.
查看雅虎的建议,网址为 http://developer.yahoo.com/yslow/ 和 http://developer.yahoo.com/performance/rules.html。一些一般要点:
Check out Yahoo's suggestions at http://developer.yahoo.com/yslow/ and http://developer.yahoo.com/performance/rules.html. Some general points:
使用内容交付网络 - CDN - 传输静态内容。
或者,您可以创建一个子域,即 gfx.yoursite.com,来托管所有静态内容。禁用 cookie 并通过积极的缓存优化站点性能。
您可能还想研究 CSS 精灵,它们也可以提高常见图形的性能。
为了减少页面中外部资源的数量,您还可以使用 Base 64 编码将小图像直接嵌入到 CSS 文件中。这将减少 DNS 查找次数并提高性能。然而,它增加了相当多的复杂性,并且维护很快就变成了一场噩梦。这是一个很棒的工具,可以帮助您将任何图像转换为 base64 字符串,但要小心。 :)
Use a Content Delivery Network - CDN - for static content.
Alternatively you can create a subdomain, i.e. gfx.yoursite.com, to host all your static content. Disable cookies and optimize the site performance with aggresive caching.
You may also want to look into CSS sprites, they can improve performance as well for common graphics.
To reduce the number of external resources in a page, you can also embed small images directly in your CSS files using base 64 encoding. This will reduce the number of DNS lookups and improve performance. However, it adds quite a bit of complexity and maintenance quickly become a nightmare. This is a nifty tool to help you, Convert any image into a base64 string, but be careful. :)