前言：關于優化問題，隨著項目經驗不斷累積，多方查找資料進行拼接合并，形成如下文章，之后遇到類似好的方法，會不斷補充完善。
        前端是龐大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各種各樣的資源。前端優化是復雜的，針對方方面面的資源都有不同的方式。那么，前端優化的目的是什么 ?
        1. 從用戶角度而言，優化能夠讓頁面加載得更快、對用戶的操作響應得更及時，能夠給用戶提供更為友好的體驗。
        2. 從服務商角度而言，優化能夠減少頁面請求數、或者減小請求所占帶寬，能夠節省可觀的資源。

        總之，恰當的優化不僅能夠改善站點的用戶體驗并且能夠節省相當的資源利用。

    大概有如下優化方法：
    一、頁面級優化
    1. 減少 HTTP請求數
    這條策略基本上所有前端人都知道，而且也是重要有效的。都說要減少 HTTP請求，那請求多了到底會怎么樣呢 ?首先，每個請求都是有成本的，既包含時間成本也包含資源成本。一個完整的請求都需要經過 DNS尋址、與服務器建立連接、發送數據、等待服務器響應、接收數據這樣一個 “漫長” 而復雜的過程。時間成本就是用戶需要看到或者 “感受” 到這個資源是必須要等待這個過程結束的，資源上由于每個請求都需要攜帶數據，因此每個請求都需要占用帶寬。另外，由于瀏覽器進行并發請求的請求數是有上限的 (具體參見此處 )，因此請求數多了以后，瀏覽器需要分批進行請求，因此會增加用戶的等待時間，會給用戶造成站點速度慢這樣一個印象，即使可能用戶能看到的屏的資源都已經請求完了，但是瀏覽器的進度條會一直存在。
    減少 HTTP請求數的主要途徑包括：
    (1). 從設計實現層面簡化頁面
    如果你的頁面像百度首頁一樣簡單，那么接下來的規則基本上都用不著了。保持頁面簡潔、減少資源的使用時直接的。如果不是這樣，你的頁面需要華麗的皮膚，則繼續閱讀下面的內容。
    (2). 合理設置 HTTP緩存
    緩存的力量是強大的，恰當的緩存設置可以大大的減少 HTTP請求。以有啊首頁為例，當瀏覽器沒有緩存的時候訪問一共會發出 78個請求，共 600多 K數據，而當第二次訪問即瀏覽器已緩存之后訪問則僅有 10個請求，共 20多 K數據 (如圖 1.2)。 (這里需要說明的是，如果直接 F5刷新頁面的話效果是不一樣的，這種情況下請求數還是一樣，不過被緩存資源的請求服務器是 304響應，只有 Header沒有Body ，可以節省帶寬 )
    怎樣才算合理設置 ?原則很簡單，能緩存越多越好，能緩存越久越好。例如，很少變化的圖片資源可以直接通過 HTTP Header中的Expires設置一個很長的過期頭 ;變化不頻繁而又可能會變的資源可以使用 Last-Modifed來做請求驗證。盡可能的讓資源能夠在緩存中待得更久。關于 HTTP緩存的具體設置和原理此處就不再詳述了，有興趣的可以參考下列文章：
    HTTP1.1協議中關于緩存策略的描述
    Fiddler HTTP Performance中關于緩存的介紹
    (3). 資源合并與壓縮
    如果可以的話，盡可能的將外部的腳本、樣式進行合并，多個合為一個。另外， CSS、 Javascript、Image 都可以用相應的工具進行壓縮，壓縮后往往能省下不少空間。
    (4). CSS Sprites
    合并 CSS圖片，減少請求數的又一個好辦法。
    (5). Inline Images
    使用 data: URL scheme的方式將圖片嵌入到頁面或 CSS中，如果不考慮資源管理上的問題的話，不失為一個好辦法。如果是嵌入頁面的話換來的是增大了頁面的體積，而且無法利用瀏覽器緩存。使用在 CSS中的圖片則更為理想一些。

.sample-inline-png {
    padding-left: 20px;
    background: white url('data:image/png;base64,iVBORw0KGgoAA
AANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0l
EQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6
P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top;
}

    (6). Lazy Load Images（自己對這一塊的內容還是不了解）
    這條策略實際上并不一定能減少 HTTP請求數，但是卻能在某些條件下或者頁面剛加載時減少 HTTP請求數。對于圖片而言，在頁面剛加載的時候可以只加載屏，當用戶繼續往后滾屏的時候才加載后續的圖片。這樣一來，假如用戶只對屏的內容感興趣時，那剩余的圖片請求就都節省了。 有啊首頁 曾經的做法是在加載的時候把屏之后的圖片地址緩存在 Textarea標簽中，待用戶往下滾屏的時候才 “惰性” 加載。


    2. 將外部腳本置底（將腳本內容在頁面信息內容加載后再加載）
    前文有談到，瀏覽器是可以并發請求的，這一特點使得其能夠更快的加載資源，然而外鏈腳本在加載時卻會阻塞其他資源，例如在腳本加載完成之前，它后面的圖片、樣式以及其他腳本都處于阻塞狀態，直到腳本加載完成后才會開始加載。如果將腳本放在比較靠前的位置，則會影響整個頁面的加載速度從而影響用戶體驗。解決這一問題的方法有很多，在 這里有比較詳細的介紹 (這里是譯文和 更詳細的例子 )，而簡單可依賴的方法就是將腳本盡可能的往后挪，減少對并發下載的影響。
    3. 異步執行 inline腳本(其實原理和上面是一樣，保證腳本在頁面內容后面加載。)
    inline腳本對性能的影響與外部腳本相比，是有過之而無不及。首頁，與外部腳本一樣， inline腳本在執行的時候一樣會阻塞并發請求，除此之外，由于瀏覽器在頁面處理方面是單線程的，當 inline腳本在頁面渲染之前執行時，頁面的渲染工作則會被推遲。簡而言之， inline腳本在執行的時候，頁面處于空白狀態。鑒于以上兩點原因，建議將執行時間較長的 inline腳本異步執行，異步的方式有很多種，例如使用 script元素的defer 屬性(存在兼容性問題和其他一些問題，例如不能使用 document.write)、使用setTimeout ，此外，在HTML5中引入了 Web Workers的機制，恰恰可以解決此類問題。
    4. Lazy Load Javascript（只有在需要加載的時候加載，在一般情況下并不加載信息內容。）
    隨著 Javascript框架的流行，越來越多的站點也使用起了框架。不過，一個框架往往包括了很多的功能實現，這些功能并不是每一個頁面都需要的，如果下載了不需要的腳本則算得上是一種資源浪費 -既浪費了帶寬又浪費了執行花費的時間。目前的做法大概有兩種，一種是為那些流量特別大的頁面專門定制一個專用的 mini版框架，另一種則是 Lazy Load。YUI 則使用了第二種方式，在 YUI的實現中，初只加載核心模塊，其他模塊可以等到需要使用的時候才加載。
    5. 將 CSS放在 HEAD中
    如果將 CSS放在其他地方比如 BODY中，則瀏覽器有可能還未下載和解析到 CSS就已經開始渲染頁面了，這就導致頁面由無 CSS狀態跳轉到 CSS狀態，用戶體驗比較糟糕。除此之外，有些瀏覽器會在 CSS下載完成后才開始渲染頁面，如果 CSS放在靠下的位置則會導致瀏覽器將渲染時間推遲。
    6. 異步請求 Callback（就是將一些行為樣式提取出來，慢慢的加載信息的內容）

    在某些頁面中可能存在這樣一種需求，需要使用 script標簽來異步的請求數據。類似：

　　Javascript:
function myCallback(info){ 
//do something here 
} 

    HTML:
    cb返回的內容 :
myCallback('Hello world!');
像以上這種方式直接在頁面上寫 <script>對頁面的性能也是有影響的，即增加了頁面加載的負擔，推遲了 DOMLoaded和window.onload 事件的觸發時機。如果時效性允許的話，可以考慮在 DOMLoaded事件觸發的時候加載，或者使用 setTimeout方式來靈活的控制加載的時機。
    7. 減少不必要的 HTTP跳轉
    對于以目錄形式訪問的 HTTP鏈接，很多人都會忽略鏈接是否帶 ’/'，假如你的服務器對此是區別對待的話，那么你也需要注意，這其中很可能隱藏了 301跳轉，增加了多余請求。具體參見下圖，其中個鏈接是以無 ’/'結尾的方式訪問的，于是服務器有了一次跳轉。
    8. 避免重復的資源請求
    這種情況主要是由于疏忽或頁面由多個模塊拼接而成，然后每個模塊中請求了同樣的資源時，會導致資源的重復請求
     9 精簡Javascript和CSS

    精簡就是將Javascript或CSS中的空格和注釋全去掉

body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}

    精簡后版本

body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}

    統計表明精簡后的文件大小平均減少了21%，即使在應用Gzip的文件也會減少5%。
    用來幫助我們做精簡的工具很多，主要可以參考如下，
    JS compressors:
    Packer
    JSMin
    Closure compiler
    YUICompressor (also does CSS)
    AjaxMin (also does CSS)
    CSS compressors:
    CSSTidy
    Minify
    YUICompressor (also does JS)
    AjaxMin (also does JS)
    CSSCompressor
    與VS集成比較好的工具如下.
    YUICompressor - 編譯集成，包含在NuGet.
    AjaxMin  - 編譯集成