性能工具带：CSSEmbed

One of the biggest keys to improving the load time of your site is minimizing the number of HTTP requests. There’s a lot of overhead involved with each request, and many requests can very quickly slow down your site. One great way to eliminate extra requests is to use data URIs instead of images. If you want the nitty-gritty on what data URIs are, and how to use them, there are a few excellent posts by Stoyan Stefanov and Nicholas Zakas that walk you through the details.

缩短网站加载时间的最大关键之一就是最大程度地减少HTTP请求的数量。 每个请求涉及很多开销，许多请求会很快使您的网站速度变慢。 消除额外请求的一种好方法是使用数据URI而不是图像。 如果您想弄清楚什么是数据URI，以及如何使用它们，那么Stoyan Stefanov和Nicholas Zakas的一些出色文章将带您详细了解。

Data URIs can be tricky to implement efficiently however. Since they are a Base64-encoded representation of an image, there is a built-in level of obfuscation that can make manual maintenance tedious. Thankfully, Nicholas put together a command line tool called CSSEmbed which takes the pain out of using them.

但是，数据URI很难有效地实现。 由于它们是图像的Base64编码表示形式，因此存在内置的混淆级别，这会使手动维护变得乏味。 值得庆幸的是，Nicholas组合了一个名为CSSEmbed的命令行工具，从而减轻了使用它们的麻烦。

CSSEmbed is a very straightforward tool that parses a stylesheet and converts all references of images to their data URI equivalents. Installation is as simple as downloading the .jar file and placing it where you’d like. Then you use a simple command specifying any options, the file to output to, and the file to parse, like so:

CSSEmbed是一个非常简单的工具，可以解析样式表并将所有图像引用转换为等效的数据URI。 安装就像下载.jar文件并将其放置在所需位置一样简单。 然后，使用简单的命令指定任何选项，要输出到的文件以及要解析的文件，如下所示：

java -jar cssembed.jar -o styles_uri.css styles.css

Since versions of Internet Explorer prior to IE8 don’t support data URIs, you have to use MHTML as a workaround (again, Stoyan has an excellent post with more info). The command for that is very similar — you just need to make sure to declare a “root” (for example, I’d use http://timkadlec.com as my root for this site) which CSSEmbed will use in the MHTML.

由于IE8之前的Internet Explorer版本不支持数据URI，因此您必须使用MHTML作为变通办法(同样，Stoyan的出色文章中提供了更多信息)。 该命令非常相似-您只需要确保声明一个CSSEmbed将在MHTML中使用的“ root”(例如，我将使用http://timkadlec.com作为该站点的根)。

java -jar cssembed.jar -o styles_mhtml.css styles.css --mhtml --mhtmlroot http://timkadlec.com

Right now, to my knowledge, you can’t parse an entire directory of CSS files, but that’s about the only thing I can think of that I’d like to see added. It’s a great tool to use during an automated build to really simplify the process of using data URIs and I definitely encourage you to go download it and give it a try.

就目前而言，据我所知，您无法解析CSS文件的整个目录，但这是我唯一想看到的要添加的内容。 这是在自动构建过程中使用的一个很好的工具，可以真正简化使用数据URI的过程，因此我强烈建议您下载并尝试一下。

翻译自: https://timkadlec.com/2010/07/performance-toolbelt-css-embed/