Best Practices for Speeding Up Your Web Site(1)

寫在前面的一些話：

       從事IT行業，英文有時總會成爲咱們的硬傷，由於一些好的資料大可能是英文的，爲了跨越技術門檻，有時咱們不得不先把英文搞定，這倒不是要求咱們的英文水平有多高，要咱們都能作到能拿操着一口流利的英語去和老外對罵（哈哈），可是一些起碼的理解性的障礙是咱們必定要克服的！因此對於挨踢人們來講，咱們只好忍啦！好的技術性文章值得你們細細研讀，可是語言障礙總使得咱們的理解存在誤差，初次翻譯，有點子費力，由於英文的語言習慣和中文的仍是有很大差異的，有時很佩服那些專一於外文翻譯的工做者們。   

        Web應用的設計與開發，不管什麼時候，"性能"都是不能忽略的！ Yahoo  Developer Network 上提出的35條性能優化法則，十分值得每一個Web前端工程師參考和借鑑，讀罷原文後，我以爲有必要把其嘗試性的翻譯一下，一來做爲本身學習的總結，二來也是和你們分享一下。 本文花費本人一個週末的時間，文章有的地方因爲我的技術水平和英文能力的限制，可能翻譯後和原文的做者全部表達的意思有很多差距，並且有的地兒本身都以爲過於生硬，忘你們多多指證和交流！但願本文可以幫助到你，這對我來講是最大的欣慰！哈哈！現把本文和你們分享一下！不過仍是建議你們讀一讀原文！

                 Best Practices for Speeding Up Your Web Site

           站點加速的最佳實踐

    經驗豐富的性能團隊已經發現了許多加速網頁的最好實踐作法。這個清單列出了35條最佳的實踐，並劃分爲7類。

七個分類包括：

內容（Content），服務器（Server），Cookie，樣式表（CSS），Javascript， 圖像（Images），移動設備（Mobile）

1、

Minimize HTTP Requests

tag: content

最小化HTTP請求（Minimize HTTP Requests）

標籤：內容（content）

       80%的終端用戶的時間都花費在了前端（front-end）。大多數的這些時間都花在了下載頁面中的全部組件上：圖片，樣式表，腳本，flash，等等。減小組件的數量，反過來會減小渲染頁面的所必須的HTTP請求的數量。這是網頁提速的關鍵所在。

一個減小頁面中的頁面組件的辦法是簡化頁面的設計。可是有沒有辦法在用豐富的內容構建頁面的同時，又能得到很快的響應時間呢？ 下在這有些技術用來減小HTTP請求的數量，與此同時又支持富文本設計。

       組合文件（Combined files）是一種減小HTTP請求的方式，即經過將全部的腳本組合到單一的腳本文件中，一樣的將全部的CSS樣式組合到一個樣式文件中。當腳本和樣式在不一樣的頁面中變化各異時，組合文件是十分富有挑戰性的，可是使這種方式成爲你的到你的發佈處理中會提升響應時間。

       CSS精靈（CSS Sprites）是一鍾減小圖像請求數量很是好的辦法。將你的全部背景圖像加入到同一張圖片中，而後利用CSS的background-image和background-position屬性來展示你想要的圖像片斷。

      圖片maps（Image maps）將全部的圖片加入到單一圖片文件，圖片的全部大小基本是相同的，可是這減小了HTTP請求而且加快了頁面速度。Image maps只有在頁面中的圖片 是批次臨近時纔會有用，例如一個導航條。定義Image maps的座標多是冗繁和易於出錯的。對於使用Image maps的導航來講也一樣是不可訪問的。因此這種辦法不推薦使用。

      內聯圖片（inline imags）利用 data: URL scheme 來嵌入圖像數據到實際的圖片中。這會增長你的HTML文檔中的頁面量。將你的內聯圖片組合到樣式表（可緩存的）中是一個既能夠減小HTTP請求也能減小你的頁面量的辦法。然而內聯圖片 並非被全部瀏覽器都支持。

     減小你頁面中的HTTP請求的數量是起點。對於第一次訪問的訪問者來講，這是提高性能的最好的指導。正如在 Tenni Theurer的博客 Browser Cache Usage - Exposed!中所說的40%-60%的平常訪問者會在沒有緩存的狀況下訪問你的站點。對於這些初次訪問者，確保你的頁面速度，是更佳用戶體驗的關鍵。

2、

Use a Content Delivery Network

tag: server

使用內容發佈網絡

標籤：服務器

      用戶到你的服務器的距離遠近對於響應時間來講有重大的影響。多重部署你的內容，從用戶角度來講，地理上分散的服務器會使你的頁面加載速度更快。可是你如何開始呢？

       對於實現地理上分佈內容的第一步來講，不要試圖從新設計你的web應用以使其可以工做在分佈式的架構中。根據你的應用，改變架構雲會包括使人生畏的任務，如跨服務器地點的同步session狀態，複製數據庫事務。嘗試縮短用戶和你的內容服務器的距離可能會被應用自己的架構步驟所耽誤。

       記住80-90%的終端用戶的響應時間都花費在了下載頁面中的全部組件上了，包括：圖像，樣式表，腳本，flash等等。這是「性能的黃金法則」。與其十分困難的開始從新設計應用架構，倒不如分散你的靜態內容（static content）。這不但得到了更短的響應時間，並且還由於分佈網絡而變得更加容易。

        一個內容分佈網（Content Delivery Network）CDN是一個跨多地點更加高效分發內容到用戶的分佈式web服務器的集合。分發內容到具體用戶的服務器，一般是依據網絡距離的測量來選擇的。例若有更少網絡跳數的服務器，或者響應時間最快的服務器會被選中。

         一些大型的網絡公司會擁有本身的CDN，可是使用CDN服務提供商提供的服務會划算，例如： Akamai Technologies, EdgeCast, 或者 level3。對於起步公司和私營站點來講，CDN服務的這部分花銷可能會去掉。可是隨着目標用戶的增加和國家化加速，一個CDN對於得到更快的響應速度來講是十分必要的。在雅虎，將靜態內容與應用所在的web服務器分隔並移動到 CDN上，縮短了20%或者更多的用戶響應時間。轉換到CDN在編碼改變上會變得容易些而且顯著的提升了你的站點速度。

3、

Add an Expires or a Cache-Control Header

tag: server

添加一個 Expires 或者一個 Cache-Control 頭部信息

內容：服務器

這條原則包括兩方面：

    對於靜態組件：經過設置將來的Expires 信息頭來實現 "Never expire"策略

    對於動態組件：經過合理的使用Cache-Control 頭來幫助瀏覽器有選擇性的請求。

Web頁面的設計變得愈來愈豐富，這意味着更多的腳本，樣式表，圖片和flash會出如今頁面中。初次訪問站點的用戶可能不得不發送屢次HTTP請求，可是經過使用Expires頭，你可使得這些組件成爲可緩存的（Cacheable）。這避免了以後頁面展現總的沒必要要的請求。Expires頭多數用於圖片上，可是它應該被用在全部的組件上，包括腳本，樣式表，以及Flash。

    

        瀏覽器（和代理）裏用緩存機制來減小以後頁面展現中HTTP請求的數量和大小。一個Web服務器使用一個包含Expires頭的響應來通知客戶端一個組件能夠被緩存多長時間。下面是一個Expires頭信息，通知瀏覽器該響應內容直到2010年4月15日纔會失效

    Expires: Thu, 15 Apr 2010 20:00:00 GMT

    

        若是你的服務器是Apache，使用ExpiresDefault 指令來設置一個相對當前時間的失效時間。

 

            ExpiresDefault "access plus 10 years"

        記住若是你使用Expires，你不得不改變組件的文件名稱，只要組件發生變化。在雅虎，咱們常常使這些成爲構建進程的一部分：一個版本號會被嵌入到組件的文件名中，例如： yahoo_2.0.6.js。

        只有在一個用戶訪問過你的站點後,才能使用Expires頭來影響頁面的視圖。對於初次訪問你站點的用戶，以及那些用戶瀏覽器緩存是空白用戶，這個辦法對於以上兩種狀況下發出的HTTP請求的數量是沒有任何影響的。因此這條性能提高的影響取決於你的用戶在一個「待發緩存「（待發緩存中已經包含了頁面中的全部組件）下訪問你站點的頻率。咱們在雅虎上進行了 測試，而且發如今75%-80%的狀況下用戶會在有組件緩存的狀況下訪問站點。經過利用Expires 你能夠增長被瀏覽器緩存的組件數量，而且在以後的頁面視圖中，在沒有經過用戶網絡鏈接發送任何一個字節的狀況下，繼續重用這些組件。