注：加粗項為可測的23條規則
1.Minimize HTTP Requests 減少HTTP請求
圖片、css、script、flash等等這些都會增加http請求數，減少這些元素的數量就能減少響應時間。把多個JS、CSS在可能的情況下寫進一個檔案，頁面裡直接寫入圖片也是不好的做法，應該寫進CSS裡，利用 CSS sprites 將小圖拼合後利用background來定位。
2.Use a Content Delivery Network 利用CDN技術
CDN 確實是好東西，8過伺服器提供商的這項服務一般是要收費的，我以前買的國內空間是有這個的但是我當時根本不知道啥用，現在沒了。。。
3.Avoid CSS Expressions 避免CSS Expressions
CSS表示式很可怕，這個只被IE支援的東西執行時候的運算量非常大，你移動一下滑鼠它都要進行重計算的，但有時候為了做瀏覽器的相容必須要用到這個||| IE6去死去死！~
4.Add an Expires or a Cache-Control Header 設定標頭檔案過期或者靜態快取
瀏覽器會用快取來減少http請求數來加快頁面載入的時間，如果頁面頭部加一個很長的過期時間，瀏覽器就會一直快取頁面裡的元素。不過這樣如果 頁面裡的東西變動的話就要改名字了，否則使用者端不會主動重新整理，看自己衡量了~ 這項可以通過修改.htaccess檔案來實現。
5.Gzip Components Gzip壓縮
Gzip格式是一種很普遍的壓縮技術，幾乎所有的瀏覽器都有解壓Gzip格式的能力，而且它可以壓縮的比例非常大，一般壓縮率為85%。壓縮沒壓縮，可以到 這裡 做下測試。
6.Put Stylesheets at the Top 把CSS放頂部
讓瀏覽者能儘早的看到網站的完整樣式。
7.Put Scripts at the Bottom 把JS放底部
網站呈現完畢後再進行功能設定，當然這些JS要在你的載入過程中不影響內容表現。
8.避免使用CSS表示式
9.Make JavaScript and CSS External 將JS和CSS外鏈
前面講到了快取這個事情，一些較為公用的JS和CSS，我們可以使用外鏈的形式，譬如我就是從Google外鏈來的jQuery檔案，如果我的瀏覽者在瀏覽別的使用了這個外鏈檔案的網站時已經下載並快取了這個檔案，那麼他在瀏覽我的網站的時候就不需要再進行下載了！~
10.Reduce DNS Lookups 減少DNS查詢
貌似是要減少網站從外部呼叫資源，我的Google分析和picasa的外鏈圖片都算在裡面了。
11.Minify JavaScript and CSS 減小JS和CSS的體積
寫JS和CSS都是有技巧的，用最少的程式碼實現同樣的功能，減少空白，增強邏輯性，用縮寫方式等等，當然也有不少工具也能夠幫你實現這一點。
12. Avoid Redirects 避免重定向
再寫入連結時，雖然”http://www. today-s-ooxx. com”和”http://www. today-s-ooxx. com/” 僅有一個最後的”/”只差，但是結果是不同的，伺服器需要花時間把前者重定向為後者然後進行跳轉，這個要自己注意，也可以在Apache裡用Alias 或者mod_rewrite或者DirectorySlash解決。
13. Remove Duplicate Scripts 刪除重複指令碼
重複呼叫的程式碼瀏覽器並不會識別忽略，而是會再次運算一遍，這當然是大大的浪費。
14. Configure ETags 配置ETags
搞不清楚咋回事，總之我是在. htaccess裡把它刪除了。
15. Make Ajax Cacheable 快取Ajax
Ajax是實時響應的，在瀏覽器接收到新的資料前，舊的資料被快取，這樣能夠更好的提高效率。
16. Use GET for AJAX Requests 用GET方式進行AJAX請求
Get 方法和伺服器只有一次互動（傳送資料），而 Post 要兩次（傳送頭部再傳送資料）。
17. Reduce the Number of DOM Elements 減少DOM元素數量
複雜的頁面結構意味著更長的下載及響應時間，更合理更高效的使用標籤來架構頁面，是好的前端的必備條件。
18. No 404s 不要出現404頁面
站點本身裡（非搜尋結果）出現404頁面，無意義的404頁面會影響使用者體驗並且會消耗伺服器資源。
19. Reduce Cookie Size 減小Cookie
Cookie在伺服器及瀏覽器之間的通過檔案頭進行交換，儘可能減小Cookie體積，設定合理的過期時間，能夠很好的提高效率。
20. Use Cookie-free Domains for Components 對元件使用無Cookie的域名
對靜態元件的Cookie讀取是一種浪費，使用另一個無Cookie的域名來存放你的靜態元件式一個好方法，或者也可以在Cookie中只存放帶www的域名。
21. Avoid Filters 避免過濾器的使用
如果需要Alpha透明，不要使用AlphaImageLoader，它效率低下而且只對IE6及以下的版本適用，用PNG8圖片。如果你非要使用，加上_filter以免影響IE7+使用者。
22. Don’t Scale Images in HTML 不要在HTML中縮放圖片
圖片要用多大的就用多大的，1000X1000的圖片被width=”100″ height=”100″以後，本身的KB數是不會減少的。
23. Make favicon. ico Small and Cacheable 縮小favicon. ico的大小並快取它
站點的瀏覽器ICO應該不是經常換吧，那就長時間的快取它，並且最好控制在1K以下。
- Flush the Buffer Early 儘早的釋放緩衝
當使用者進行頁面請求時，伺服器端需要花費200到500毫秒時間來拼合HTML，將寫在head與body之間，釋放緩衝，這樣可以將檔案頭先傳送出去，然後再傳送檔案內容，提高效率。
- Post-load Components 延遲載入元件
最先載入必須的元件進行頁面初始化，然後再載入其他，YUI Image Loader 是很好的例子。
- Preload components 預載入元件
提前載入以後可能用到的東西，和延遲載入並不衝突，它的目的是為後續請求提供更快的響應，參見Google首頁上的CSS sprites應用。
- Split Components Across Domains 跨域分離元件
頁面元件多個來源可以增大你的平行下載量，但注意不要過多，超過2-4個域名會引起上面說到的DNS查詢浪費。
- Minimize the Number of iframes 減少iframe數量
需要更有效的利用 ifames。 iframe 優點：有利於下載緩慢的廣告等第三方內容，安全沙箱，並行下載指令碼 iframe 缺點：即使為空也會有較大資源消耗，會阻止頁面的onload，非語義
- Minimize DOM Access 減少DOM的訪問次數
JS訪問DOM是很慢的，儘量不要用JS來設定頁面佈局。
- Develop Smart Event Handlers 開發靈活的事件處理控制程式碼
DOM樹上過多的元素被加入事件控制程式碼的話，反應效率肯定會低，YUI事件工具有一個 onAvailable 方法可以幫助你靈活的設定DOM事件控制程式碼
- Choose < link >over @import 使用< link >而非 @import
在IE中使用@import就和在頁面底部用< link >一樣，我們前面說要把< link >放頂部的。
- Optimize Images 優化圖片、CSS Sprites 優化CSS Sprites
將你的GIF轉為PNG8會是個減小體積的好辦法，另外有很多方法處理你的JPG及PNG圖片以達到優化效果。
- Optimize CSS Spirite
在CSS Sprites中豎直並儘量緊湊的排列圖片，儘量將顏色相似的圖片排在一起，會減小圖片本身的大小及提高頁面圖片顯示速度。
- Keep Components under 25K 保證元件在25K以下
iPhone不能快取25K以上的元件，並且這還是要在被壓縮前。
- Pack Components into a Multipart Document 將元件打包進一個多部分的文件中
就好像在郵件中加入附件一樣，一個HTTP請求就夠了，但是這一技術需要確保你的代理支援，iPhone就不支援。
更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程式、nodejs等技術文章、視訊教程和開源專案，請關注微信公眾號——全棧弄潮兒。
前端最火框架排行榜——小程式二維碼
