《高流量網站CSS開發技術》-第8章 效能-試譯

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

淨荷¹——注意檔案大小

¹Payload，科技名詞委翻譯為淨荷，計算機行業中指的是資料傳輸的有效載荷

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，即傳輸控制協議/因特網互聯協議）來傳輸資料時，資訊會被劃分為若干個“包”²。在網路通訊中有一個概念稱之為最大資料包大小，或者叫做最大傳輸單元（MTU），在乙太網中其大小通常是1500位元組。如果包大小超過這個限制就會對效能產生影響（影響程度的大小取決於多個因素：MTU、包大小、網路速度等等）。由於我們無法確定某一特定網路的最大傳輸單元（即MTU，該值可被動態修改）——即使我們確定了，想知道具體是那個資料包超出了大小限制也絕非易事——為了避開包大小限制，我們所能採取的最佳措施就是提供儘可能最小的資料量。

²packet，分組，包，科技名詞委推薦在計算機通訊中使用分組

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?

那我們能做些什麼，以保證檔案小巧精悍呢³？

³谷歌提供了精簡網路淨荷的指導文章，請見：http://code.google.com/speed/page-speed/docs/payload.html。雅虎也提供了自己的提升網站效能的指導文章，請見：http://developer.yahoo.com/performance/rules.html。