不考慮帶寬大小，不考慮服務器性能如何，如何保證網站從服務器到用戶瀏覽器這個過程是最快的，打開一個網站之前的用戶體驗是最好的呢。Steve Souders的高性能網站建設指南這本書當中給我們建議了以下幾種方法：
1.減少HTTP請求
2.使用內容分發網絡（傳說中的CDN服務）
3.添加Expires頭
4.壓縮組件
5.將樣式表文件放在頂部
6.將腳本文件放在底部
7.避免CSS表達式
8.CSS樣式表文件和JS腳本文件使用外鏈的方式引入
9.減少DNS查找
10.精簡Javascript
11.避免重定向
12.移除重復腳本
13.配置ETag
14.是AJAX可緩存
作者的意圖是上面的14條建議都是經過各大網站測試的數據當中所總結的，我們暫且不論這些建議是否真正的有效，先來表表這14條建議都是什么含義，如何做到這14條建議。說白了就是如果我們想用這14條建議到我們的項目當中，我們需要遵守些什么，什么要做，什么不要做，怎么做的問題。
第一條：減少HTTP請求
網站性能優化，就是優化網站打開的速度了。把這一條放在第一的位置，肯定因為這家伙非常的耗用資源。你說啥？啥是HTTP？如果不明白啥是HTTP，尊駕請異步這里。HTTP_超文本傳送協議定義了瀏覽器（即萬維網客戶進程）怎樣向萬維網服務器請求萬維網文檔，以及服務器怎樣把文檔傳送給瀏覽器。要明白為什么說HTTP請求耗用資源，就得稍微了解下HTTP請求。
一次完整的HTTP請求主要包括如下步驟：1、建立TCP連接2、瀏覽器向WEB服務器發送請求命令3、WEB瀏覽器發送請求頭信息4、WEB服務器應答5、WEB服務器發送應答頭信息6、WEB服務器向瀏覽器發送數據7、WEB服務器關閉TCP連接。每一個步驟都需要耗費時間來完成，比如步驟3，就相當于平常我們上傳東西，步驟6，相當于我們從網上下載，這些步驟雖然很快，但還是會耗費時間去干這些事，而且每次HTTP請求都會重復做上面的1~7這寫步驟，如果頁面當中HTTP請求的數量過多，就會耗用大量的時間，導致網站加載速度過慢。網頁當中的圖片，樣式文件，腳本文件和視頻媒介文件都會有HTTP請求的發生，當你的網站當中圖片的數量越多，你的網站打開的速度就會越慢。像百度圖片這種只好選用其它的方式來優化網站的速度，例如圖片延遲加載。總的來說，盡量減少我們網頁當中的HTTP請求就對了。那怎么做呢？上面也說了，頁面當中的圖片，樣式、腳本和視頻文件會進行HTTP請求，我們主要就是針對圖片、樣式、腳本、Flash視頻這幾個內容進行優化。
第一步：使用圖片地圖，HTML當中的標簽<map><area ....></map>
第二步：盡量把網站中使用的圖片，作為標簽的背景寫到CSS樣式文件當中。當作為背景的圖片數量越來越 多的時候，就使用CSS Sprites技術，把多個圖片合并成一張圖片。
第三步：通過使用data:url在頁面當中包含圖片但無需額外的HTTP請求（低版本的IE不支持），比如我門見到過的Base64位圖片
第四步：就是盡可能的合并CSS和JS文件
第二條：使用內容發布網絡
什么是內容發布網絡？其基本思路是盡可能避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。如果用戶A身在中國，網站B的服務器在美國，網站C的服務器在中國，那么理論上用戶A訪問網站C的速度要比訪問B的速度快。因為A用戶和C網站在距離上更近，網絡數據傳輸的距離近，時間上就會短。內容發布網絡就是分布在多個不同地理位置的WEB服務器，用于更加有效的向用戶發布內容。
例如M用戶請求了G網站，G網站上的一個文件F存放在內容分發網絡的某一個服務器上面。當你的網站W引用文件F的時候，也是使用改內容發布網絡，當M用戶訪問你的網站W的時候，它因為已經在訪問G網站的時候下載過F文件了，所以在訪問你的網站W的時候，就不用重新下載該文件了，直接從用戶本地的緩存中讀取。如果該文件F之前沒有被緩存過，就會從靠近用戶M距離最近的那個內容發布網絡節點下載該文件。
第三條：添加Expires頭
添加一個時間足夠久的Expires頭，用來緩存從服務器上請求的文件。
假如你定義了如下：
Expires: Thu, 15 Apr 2017 20:00:00 GMT
這是一個有效期非常長的Expires頭，它告訴瀏覽器在2017年4月15日之前，都是用這個請求過的緩存文件。這樣做就將HTTP請求的數量減少一個。
Expires頭使用一個特定的時間，它要求服務器端和客戶端的時鐘嚴格同步。
換另外一種方式，Cache-Control使用max-age指令制定組件被緩存多久。讓人值得慶幸的是有些瀏覽器默認都設置了這些內容，例如IIS服務器上。
添加Expires頭的真正意義其實還是為了減少HTTP請求。
第四條：壓縮組件
前端：
通過對CSS樣式文件和JS腳本文件的內容壓縮，圖片壓縮，如果是PNG格式的圖片壓縮，推薦使用TinyPNG。
服務端：
啟用GZIP編碼來壓縮HTTP響應包的大小。通過HTTP請求中的Accept-Encoding頭來標識對壓縮的支持。
Accept-Encoding:gzip,deflate
IIS服務器默認情況是開啟文件壓縮的。
內容壓縮的主要意義是減少HTTP請求響應的大小來減少響應時間。
第五條：將樣式表放在頂部
HTML當中的內容是至上而下加載的，樣式文件放在頂部，在加載HTML文檔的時候，同時也在加載樣式文件，這樣頁面會一邊加載一邊讓瀏覽器渲染已經加載好的內容，也就是“逐步呈現”我們的網頁內容。
將樣式表文件放在文檔底部會導致在瀏覽器中阻止內容逐步呈現。把樣式文件放在頂部對整個頁面的加載時間并沒有減少，它影響的是瀏覽器對我們頁面上內容加載的反映。
一點一點的加載讓用戶看到我們的頁面，比加載完所有內容之后再把頁面展示給我們的用戶，兩種方式在時間上并沒有什么差別，但去能給用戶不一樣的感覺。
第六條：將腳本放在底部
加載腳本會阻止頁面逐步呈現。當瀏覽器加載到一段JS腳本的時候，它會等待這一段腳本解析完成之后，再繼續加載下面的內容。如果解析腳本花費的時間為1s種，那么用戶就要等待1s之后才能看到頁面一點一點的加載。阻止逐步呈現就意味著等待，就會影響用戶的體驗。
第七條：避免CSS表達式
使用CSS表達式就是使用expression來設置頁面的某些樣式。這種方法現在使用的人應該不多了，但我們了解下總沒有什么不好的。
為什么使用表達式不好？因為表達式計算的頻率太高，浪費瀏覽的資源。
加入有個下面的CSS規則：
<code>
p{
width:expression(setCntr(),document.body.clientWidth<600?"600px":"auto");
}
</code>
setCntr()函數增加一個全局變量的值并將這個值應用到一個頁面元素上面。如果頁面中有個10個段落（p）。加載整個頁面會執行CSS表達式10次。如果用戶改變了頁面窗口的大小，滾動鼠標，該CSS表達式都會被執行10次。這樣毫無意義的計算，浪費瀏覽器的資源是很可怕的。如果你在一個頁面當中應用過多的CSS表達式，就會照成瀏覽器崩潰。
第八條：引用外部的JS和CSS
首先我們思考如下一個問題：
情況一：HTML頁面大小有50K，CSS樣式文件大小有20K，腳本JS文件有30K。
情況二：頁面B包含樣式CSS和腳本JS，大小是90K
分布測試兩種情況，我們會發現情況二要比情況一快30%~50%，因為情況一需要承擔多個HTTP請求帶來的開銷。
的確內聯所需要的開銷時間會短些；但是，如果放入外部文件中，有下面的好處：
1.樣式文件和JS文件就有機會被瀏覽器緩存起來。
2.能夠被項目當中的其它頁面重用。
這樣同一個HTML文件，不增加HTTP請求數量的基礎上，肯定體積大所需要的開銷會大些。
維護性上，如果把樣式文件CSS和腳本文件JS統統放在頁面HTML當中，我們能夠想想是怎么一種混亂的情況嗎？
第九條：減少DNS查找
當瀏覽器與Web服務器建立連接時，它需要進行DNS解析，將域名解析為IP地址。然而，一旦客戶端需要執行DNS lookup時，等待時間將會取決于域名服務器的有效響應的速度。
第十條：精簡Javascript
這里比較不好把握，牽扯到編寫JS腳本的一些內容。例如：避免使用過多的全局遍歷，避免過多的DOM操作，緩存查找到的DOM元素。然后就是使用Grunt這種工具對文件進行壓縮。
第十一條：避免重定向
這個地方主要說的是后臺代碼的重定向，我這里不多說
第十二條：移除重復腳本
重復腳本對網站性能照成的損傷有兩個方面：
1、增加不必要的HTTP請求
2、執行javascript所浪費的時間
第十三條：配置ETag
這一條是為了防止緩存不起作用進行的配置，屬于后臺方面的內容。
最終目的：緩存內容減少HTTP請求。
第十四條：使Ajax可緩存
使Ajax可緩存的前提是保證你的數據是不經常變化的，如果發生變化就重新從服務器請求新的數據，我們使用一個長久的Expires頭來緩存Ajax請求的內容。
關于Ajax，我建議通過Ajax請求的內容僅包含必須從服務端返回的數據信息，HTML結構部分則緩存到HTML頁面當中，然后通過模版解析，把所通過ajax請求的內容展示出來，因為目前瀏覽器端的運算速度越來越快了，所以現在完全可以這樣做。
結束語
網站性能優化，我的理解就是優化一個網站打開的速度，也就是怎么樣讓用戶體驗到飛一般的感覺。
網站優化包括前端優化和后臺優化，這本書并沒有按照前后端這樣來分別講解網站優化。
下面再針對前端方面說幾個性能優化的方面：
1.了解Repaint和Reflow，減少頁面reflow，像document.write，document.getElementById("xx").style.xx=''這些，都會reflow頁面。
2.減少DOM操作，還有上面說到的，把查找到的DOM進行緩存。
3.使用json數據交換格式
4.語義化HTML
總的來說優化的最終目的就是：減少HTTP請求，壓縮HTTP請求響應的文件大小，盡量縮短用戶訪問網站所花費的時間。
如果您看到了這里，真的非常感謝。
文章當中有不準確或者不恰當的地方，煩請您指正留情，同時大家也有什么好的優化方式也請留言，到時會補充到這篇文章當中，先在此謝謝了。
