CSS files are (typically) small files with (typically) simple syntax. It might seem that where performance is concerned there is little to be done to make a difference, and that improvements will be slight. In many cases, this may be true. However, when we are dealing with CSS at a grander scale, where our files may be reaching larger sizes and we expect them to be served millions or tens of millions of times a day, small improvements make big differences—both to the user and the developer. One kilobyte may seem a tiny amount of data by today’s standards, but do the math—those kilobytes soon add up to gigabytes of data that the business needs to pay for in bandwidth. And when we are considering the payload the user downloads and the speed of the page rendering, it is a truism to say that every little bit counts.

CSS文件(一般)都是体积小巧、语法简单。似乎对性能没什么太大影响,就算有也是微乎其微。在大多数情况下的确如此。但是当我们大规模使用CSS时,文件体积可能就会变得很大,且我们预计这些文件每天会有成百上千万次的访问,那么小小提升则大有不同——不论对于用户还是开发者来说都是如此。以今天的标准看来1KB是极其微小的数据,但仔细算算——这些1KB的数据一点一点加起来,很快就会达到GB级别,这是需要支付带宽费用的。此外当我们考虑到用户的下载速度和页面的渲染速度时,我们常说的积少成多就显得非常有道理了。

There are several angles we must look at when concentrating on performance. From the user’s perspective, it is important that the files are small, can be well cached (and hence loaded more quickly) and that the files are up to date. From the browser’s perspective, we want our CSS to be as efficient as possible and for the content to be rendered (and re-rendered in response to interaction or animation, if necessary) as fast as possible. From the businesses’ perspective, we want to serve from the user’s cache (primarily, and our server cache secondarily) as much as possible and keep the amount we are sending to (and receiving from) the user to a minimum, while still being sure the user has the latest version of our code.

我们得从多个角度来关注性能问题。从用户的角度出发,重点是文件的体积要小,可以被缓存(因此可以被更快地加载),且要保证文件是最新版本。从浏览器的角度出发,我们希望CSS能尽可能地高效,使页面内容能尽快渲染出来(还包括必要时为响应界面交互或动画效果而重新渲染)。从公司的角度出发,我们希望尽可能多地从用户的缓存中加载文件(以此为主,以服务器端缓存为辅),并保证我们发送给用户(以及从用户那里接收的)的数据量最小,同时要确保用户使用的是最新版本的代码。

In this chapter, we will concentrate on how to improve performance from these three distinct angles, and you will learn several important things about each. You will learn about the following:

• File size concerns and best practices
• Having fewer HTTP requests is more important than file size
• Caching strategies
• Browser rendering and blocking

在本章,我们将关注如何从这3个不同的角度来提升性能,你将会学习一些非常重要的知识,具体内容如下:

• 文件大小问题及最佳实践
• 减少HTTP请求数远比文件大小问题重要
• 缓存策略
• 浏览器的渲染与阻塞

The Payload—Worry About File Size

净荷1——注意文件大小

1Payload,科技名词委翻译为净荷,计算机行业中指的是数据传输的有效载荷

Best practices in CSS require us to consider the number of characters we enter and the implications of them. Every character counts. Although high speed Internet is more widespread these days, as an author of CSS on a high-traffic website, you have many more demographics to worry about than most other companies. As such, your users may be on dial-up Internet access (out of choice or because of their location), using mobile devices in areas with poor reception, in countries far from the point of origin of your site (your servers), or any combination of these. Preprocessing may be taking place at many levels such as their ISP, firewalls and routers at their location, or firewalls and routers at levels even higher up the pathway of data. One of our primary concerns with our data reaching these machines as quickly as possible is the amount of data that we are sending. When we send data via TCP/IP (Transmission Control Protocol and Internet Protocol), the networking protocol typically used by the Internet, our information is grouped into bundles called packets. On networks there is a concept of maximum packet size, or maximum transmission unit (MTU), typically 1500 bytes on an Ethernet network. Having a packet that exceeds this size incurs a performance penalty (how big a penalty is dependent on many factors: MTU, packet size, network speed, and so on). Since we cannot be certain what the MTU of any particular network is—and even if we did, knowing which packet will exceed the limit is very difficult—to avoid this packet boundary all we can do is our very best to provide the smallest amount possible.

CSS开发的最佳实践要求我们既要考虑代码的字符数量,又要考虑它们所带来的影响。每一个字符都很重要。虽然如今的高速互联网已经很普及,但作为高流量网站的CSS开发者,会有比其他大多数公司更多样化的用户群体需要你费心。因此,你的用户可能使用拨号连接上网(别无选择或是受地理环境所限),也可能在信号欠佳的地方使用移动设备,又或者他所处的国家离你的网站(服务器)非常远,如此种种。数据可能会被其所处网络中的ISP、防火墙及路由器进行多层预处理,也可能会被数据传输路径之上的防火墙及路由器进行预处理。为了让我们的数据尽快传输到用户的机器中,我们最应该关注的一点就是发送数据量的多少。当我们通过互联网中常用的TCP/IP网络协议(Transmission Control Protocol and Internet Protocol,即传输控制协议/因特网互联协议)来传输数据时,信息会被划分为若干个“包”2。在网络通信中有一个概念称之为最大数据包大小,或者叫做最大传输单元(MTU),在以太网中其大小通常是1500字节。如果包大小超过这个限制就会对性能产生影响(影响程度的大小取决于多个因素:MTU、包大小、网络速度等等)。由于我们无法确定某一特定网络的最大传输单元(即MTU,该值可被动态修改)——即使我们确定了,想知道具体是那个数据包超出了大小限制也绝非易事——为了避开包大小限制,我们所能采取的最佳措施就是提供尽可能最小的数据量。

2packet,分组,包,科技名词委推荐在计算机通信中使用分组

Users of the Internet are more fickle than, say, users in a shopping center. Deciding that a website is too slow and browsing to another affords instant gratification, whereas finding another store that sells saucepans requires a commitment from the user to leave the current store, locate another store, locate the product, and so on. The goodwill the user has toward our website is finite, and we must do whatever we can to keep the user happy and moving toward whatever our business goal is—be it buying products or services, viewing pages, or consuming content.

互联网用户比之其他用户,比如说商场的顾客,显得更加浮躁。其原因是,如果一个网站的速度太慢,用户可以方便地转而浏览其他网站,这仅会损失片刻的连贯性,而在现实中另找一家卖平底锅的商场则需要顾客做出一定的牺牲,他得离开当前所在的商场,去另一家找他所需的商品。用户访问网站的好感是有限的,所以我们得极尽所能地保持他的愉悦感,并引导他们向我们的商业目标靠近——不论这个目标是购买产品或服务、浏览网页还是消费内容。

Keeping file size down and speed up isn’t just good for our visitors. It’s good for our business too—the less data we serve, the fewer bandwidth costs we incur. And furthermore, Google and other search engines care about how quickly our pages load. Performance of websites is fast becoming an important factor for effective SEO strategies. Additionally, Internet Explorer (IE) versions 7 and below cannot cope with CSS files above 288 KB.

精简提速不仅仅只对访问者有利,对公司同样有好处——我们传送的数据越少,承担的宽带费用也越少。此外,谷歌及其他搜索引擎也很在意网页的加载速度。网站性能很快成为了高效SEO策略的一个重要因素。另外,IE 7及更低版本的IE无法处理体积大于288 KB的CSS文件。

NOTE: With CSS files exceeding 288 KB, IE7 and below will only parse the first 288 KB of the file. Although it is possible to break files larger than this into multiple files (with the performance implications of more requests), it is obviously preferable to keep our CSS smaller in the first place.

注意:如果CSS文件大小超过288K,IE7及更低版本仅会解析文件的前288K代码。虽然也可以将大于此尺寸的文件拆分成多个文件(请求太多也会对性能有影响),但一开始就提供较小的CSS文件显然更可取。

So what can we do to keep our file sizes down?

那我们能做些什么,以保证文件小巧精悍呢3

3谷歌提供了精简网络净荷的指导文章,请见:http://code.google.com/speed/page-speed/docs/payload.html。雅虎也提供了自己的提升网站性能的指导文章,请见:http://developer.yahoo.com/performance/rules.html