聽說讀寫

【高性能web開發】將會是一個系列.

從html,js,css等前端,到HTTP/TCP等網絡傳輸環節.

從Asp.net等應用服務器語言到數據庫優化.

從架構設計到第三方組件和解決方案的應用.

之后大約還有4-5篇Blog和高性能web開發有關.
 

【高性能web開發】 網絡傳輸環節

1.減少請求數.

• 緩存，使用Expires 等設置過期時間；如果內容沒有過期就不發送請求
• 合并小體積內容，例如吧數量眾多的小圖片放在一個圖片，之后用css部分呈現（大體積的內容就別合并了）
• 延遲加載；部分內容，例如圖片在頁面呈現的時候才加載 （常用的就是滾動條到了以后才加載）；減少不必要的請求 
• 合并重復內容和文件
• 考慮使用第三方CDN資源，例如jQuery有免費的CDN，有些用戶已經在其他網站訪問過該內容了，那么到我們的網站加載就更快了 (而且使用CDN降低對我們服務器的壓力)
• 使用HTML5 中的Local Storage等保存數據

2.減少響應內容的體積.

• 適當的時候只返回響應頭304 （HTTP緩存，如ETag等）
• 使用Gzip等壓縮文件內容
• 使用免費的第三方工具，壓縮css，js和html等文件的大小 (例如我們常見的 jquery.min.js)
• 適當使用Ajax操作
• 在適當的時候，將樣式,HTML和數據分離 (數據量很大的時候極大減小文件體積)

<ul id="id">
    <li style="一大堆的樣式">數據 </li>
    <li style="一大堆的樣式">數據 </li>
    <li style="一大堆的樣式">數據 </li>
</ul>
分成HTML 樣式 和數據3部分

HTML
<ul id="id">
    <li></li>
    <!-- 如果使用數據模板等方式 只需要保留一個Li 否則需要多個 -->
</ul>

樣式保存在CSS文件中
一些基本的小常識 雖然有很多個li 不用給每個li指定class

數據
使用JSON返回 （如果覺得麻煩也可以嵌入在頁面中）

• 選擇體積更小的數據格式，例如JSON一般就比XML體積來的小 (都經過壓縮以后還是更小)
• 在設計上，只傳送變化的部分數據 （例如要獲取100條數據，可能已經加載了90條，那么再加載10條就好了）
• 移除請求和響應中不必要的HTTP Header (例如WCF Restful service中有的時候要傳遞表明當前數據是JSON還是XML的HTTP Header)
• 部分功能,如壓縮會消耗CPU, 如ajax等會增加開發工作量,請謹慎選擇

3.增加請求并發數.

• RFC中，瀏覽器對于同一個域名下的資源只能使用2個線程同時進行訪問（很多新的瀏覽器支持6個或者更多）；解決方法是使用子域名，例如1.abc.com 2.abc.com

• <img src ="1.abc.com/1.png" />
  <img src ="1.abc.com/2.png" />
  <img src ="2.abc.com/3.png" />
  <img src ="2.abc.com/4.png" />
  <img src ="3.abc.com/5.png" />
  <img src ="3.abc.com/6.png" />
  <img src ="4.abc.com/7.png" />
  <img src ="4.abc.com/8.png" />

• 將一個超大的文件（例如有些人喜歡吧整個網站的js都放在一個文件）拆成一系列的中小文件 （有利于并發加載和緩存!）這個文件大小的Size選擇很重要 我個人建議是10k-200k (依賴于網絡)
• 上一條并沒有和1-2沖突，文件太小太多也不行，文件太少太大也不行，這是一個平衡的問題
• 通過分拆文件,使得最常用頁面(例如首頁)的加載速度變快了
• 控制加載順序，例如先加載頁面大體結構，然后多個javascript異步請求加載數據（把一個大的html變為多個小的html片段）

4.其他特殊技術.

• 利用HTTP 1.1的長連接特性，使得在一定程度上，服務器可以主動推送數據（減少了很多不必要的輪詢）

5.工具.

• Fiddler (Free)
• FireDebug (Free)
• HttpWatch

部分內容引用自MSDN和其他第三方文章．．

因本人水平有限,如有遺漏或謬誤,還請各位高手指正