一、使用CDN【內容分發網絡】加速
1、CDN
CDN【Content Delivery Network】，即內容分發網絡。屬於http緩存技術中的一種。
2、原理：
其基本思路是盡可能避開網絡上可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。CDN管理分布在多個地理位置上的服務器，其系統能夠實時地根據網絡流量和各節點的連接、負載狀況以及到用戶的距離和響應時間等綜合信息將用戶的請求重定向到一個能提供最好用戶體驗的服務節點上。
總的來說，內容服務基於緩存服務器，也稱作代理緩存【網關緩存】，它位於網絡的邊緣，據用戶僅“一跳”之隔。代理緩存提供數據中心服務器的一個鏡像，當用戶對某網址訪問的請求並非第一次，那么代理緩存在很大概率上緩存了域名，就不需要大費周章通過DNS【域名服務系統】來獲取對應域名。
這里引用一個很喜歡的小比喻：古代交通不便，當有蠻夷入侵【用戶請求】時朝廷從京城【數據中心服務器】調兵到邊防，等軍隊到達的時候敵人早已一溜煙兒跑了。於是君主改變策略，將一批軍隊調配到邊防駐扎，這些邊防部隊就能有效抵御入侵，正如代理緩存能快速響應用戶請求\(^o^)/~
二、減少http請求【減少請求數，降低請求量】
1、腳本合並
原理
通常一個大型網站需要依賴多個JS文件。可以把多個文件合並成一個，這樣只需要引用一個
方法
① Grunt
② JSCompress
2、CSS雪碧圖
優點
① 減少http請求，提高頁面加載速度。只需加載一張圖片，且由於只需要一個對應的色表，這張圖片的大小很可能比拼合前的總尺寸小。
② 減少鼠標滑過的bug：IE6不會主動預加載：hover中的背景圖片，因此使用多張圖片時會出現閃白的現象。
缺點
① 最大的問題是內存的使用：除非非常小心的組織，否則會留下大量無用的空白。
② 影響頁面縮放功能：縮放時要避免雪碧中相鄰圖片露出來。
3、文件壓縮
原理
包括CSS、JavaScript、圖片的壓縮。
JavaScript：
> 最小化：刪除注釋和空格等不必要的字符。安全、直白，文件減少21%。
> 混淆：刪除注釋和空格，將函數名和變量名替換成短的字符串，難於反向工程。復雜，容易產生問題，文件減少25%。
方法
① JSMin
② YUI Compressor在線
③ 在線JS/CSS/HTML壓縮
④ JavaScript壓縮/解壓縮
⑤ grunt
⑥ 批量圖片壓縮
⑦ 壓縮HTTP響應內容:Gzip
4、延遲加載圖片【Lazy Load Images】
首先只加載第一屏的圖片，當用戶滾動訪問后面的內容時在加載相應圖片。
方法：將圖片的src屬性值存放在一個非src的自定義屬性中，判斷圖片進入可視區域后將路徑賦值給src屬性。
5、CSS3圖標
iconfont公開圖標庫
Font Awesome
6、避免重定向
301：永久重定向，抓取新內容的同時也將舊的網址替換為重定向之后的網址；
302：暫時重定向，抓取新的內容而保留舊的網址
SEO：302好於301
重定向會增加http請求數，但必要的重定向有利於提高用戶體驗
方法：
定義鏈接URL時使用最完整的、最直接的地址。如：
> 使用www.baidu.com而非baidu.com
> 使用www.google.com.hk而非www.google.com
> 使用http://write.blog.csdn.net/而非http://write.blog.csdn.net
在使用Response.Redirect的時候，設置第二個參數為false.
> 為true時，相當於在Redirect后調用Exit Sub/Function，不再執行Redirect后的語句;
> 為false時，依然執行Redirect后的語句。
三、代碼優化
1、減少對DOM的操作
對DOM的操作代價是昂貴的，這在網頁中通常是一個性能瓶頸。
減少對DOM元素的查詢與修改：
① 查詢：需多次訪問的可以保存在變量中。
② 修改：使用innerHTML代替DOM操作。
2、減少重排與重繪
原理
頁面生成時會進行至少一次渲染，用戶訪問過程中還可能不停地重新渲染，情況如下：
> 修改DOM
> 修改樣式表
> 用戶事件（比如鼠標懸停、頁面滾動、輸入框鍵入文字、改變窗口大小等等）
重新渲染，就需要重新生成布局和重新繪制。前者叫做“重排【reflow】”，表現為頁面布局出現變動。后者叫做“重繪【repaint】”。“重繪”不一定需要“重排”，如改變元素顏色，因為此時頁面布局並未發生改變；而“重排”一定會導致“重繪”，布局的變化會同時觸發“重排”和“重繪”。“重排”和“重繪”均會使性能下降，因此要盡量避免。
一般規則
> 樣式表越簡單，重排和重繪就越快；
> 重排和重繪的DOM元素層級越高，成本越高；
> table元素的重排和重繪成本高於div元素。
優化方法
> 通過class改變樣式，避免逐條改變；
> 對display：none的元素操作不會引發重排和重繪，因此需要多次操作的元素可改變其display屬性再進行操作，完成操作后再將其顯示，這樣只需要兩次重排和重繪；另外，visibility：hidden的元素操作只重繪；
> 脫離文檔流的元素重排開銷較小【如：position為absolute或fixed，float元素】，因為對文檔流中元素無影響；
此方面來自阮一峰博客
3、避免CSS表達式
CSS表達式會進行大量重復計算，甚至當鼠標在頁面移動時也在不停執行，這大大影響性能。盡量使用一次性表達式，避免動態計算。
四、緩存Ajax
Ajax緩存和http緩存效果相同。
Ajax頁面緩存是ajax處理數據時對一些重復相同數據進行一個緩存操作，這種設計使客戶端對一些靜態頁面內容的請求，比如圖片，css文件，js腳本等，變得更加快捷，提高了頁面的響應速度，也節省了網絡通信資源。
1
2
以下http響應頭是可以用來做Ajax緩存的：
Expires:應該被應用在你知道內容何時被修改的情況下。 例如，如果是股票價格您可能會設置一個在10秒后過期的數值。對於照片，你可以設置一個更長時間的Expires頭，因為你指望它永遠不改變。Expires頭允許瀏覽器在一段時間內可以重復使用緩存內容，並避免任何不需要的同服務器的交互過程。
Last-Modified: 設置這個標記會通知瀏覽器可以使用If-Modified-Since頭來產生一個條件GET請求以便檢查其本地緩存。如果數據不需要更新，服務器將使用HTTP 304狀態碼來響應此請求。
Cache-Control: 如果允許，這應該被設置為’public’，使其他用戶可以在中間代理和緩存服務器上存儲和共享數據，在Firefox上，這還將啟用針對HTTPS的緩存
但有時候如果通過Ajax對一些后台數據進行更改的時候，雖然數據在后台已經發生改變，但是頁面緩存中並沒有改變，對於相同的URL，Ajax提交過去以后，瀏覽器還只是簡單的從緩存中拿數據。
解決Ajax緩存問題：
URL參數添加隨機數或時間戳。【會在客戶端產生大量緩存文件】
修改文件最后更改時間：setRequestHeader(“If-Modified-Since”,”0”);。這致使服務器上文件的最后修改時間與其不同，因此不會訪問緩存文件，而是重新訪問服務器。【只在客戶端產生一個緩存文件】
禁用緩存【和文章的使用Ajax緩存有一丟丟矛盾啊】
> 客戶端設置： 在ajax發送請求前加上xmlHttpRequest.setRequestHeader(“Cache-Control”,”no-cache”);
> 服務器端設置：在服務端加上header(“Cache-Control: no-cache, must-revalidate”);
五、配置Etags
ETag，全稱為：Entity Tag，意思是實體標簽，從名字上看，是對於某種實體的一個標識。它屬於HTTP協議的一部分，也就是所有的Web服務器都應該（也確實能）支持這個特性。
它的作用是用一個特殊的字符串來標識某個資源的“版本”。
1
2
工作流程
客戶端（瀏覽器）發出請求的時候，服務器會在響應中指定Etag；
客戶端If-None-Match頭回傳ETag給服務器，服務器檢查Etag與If-None-Match是否匹配；
若匹配則表示該資源並沒有修改過，瀏覽器會返回304狀態碼，而且不需要在響應正文中包含所求資源；
客戶端可以使用自己緩存的版本。