速度：唯快不破

做了幾年的前端，時間不是很長，感覺很多企業追求最多的就是速度。像武俠片裡面說的：唯快不破，“快”給使用者帶來的體驗就會很舒服，試想一下有兩個情況，你開啟一個頁面需要等啊等啊等好久才出來，那你下次還會再進去嗎？換我我反正不會再點開，姐沒那麼有耐心。相反，如果另一個頁面分分鐘就給你顯示出來了，一下子你就能知道這個頁面上面有哪些東西，操作起來也很流暢，當然裡面的業務是差不多的那種，不包括那種傲嬌行業什麼的，比如國家推出的一些，明明慢的要死，你還是得耐著性子等下去，真讓人尿急。。。

當然“快”是有多種因素決定的，有的時候更是需要後臺支援，但是前端人員就是要考慮後臺不支援的時候怎麼更快。講多了都是淚，如果效能不好，老闆直接來找你：為什麼這個頁面這麼慢才顯示出來？自己內心就會哀嚎：人家資料介面沒把資料傳回來我想快也沒辦法啊！為啥怪我！不知道大家內心嚎過沒有，我反正有，後面就儘量關注 一些這方面，下面介紹幾個目前我開發用到的有用方法，希望對大家有點幫助或者啟發，有任何問題，歡迎指出，更歡迎技術大牛的補充。

1. 必要頁面進行快取
2. 快取改動少的資原始檔
3. 配置CDN
4. 壓縮圖片，壓縮程式碼
5. AMD，CMD開發方式，按需載入

一、必要頁面進行快取
這個“必要頁面”是需要根據業務或者頁面使用情況判斷的，不是一定的。不過可以參考這些頁面：首頁，分類頁等改動不頻繁的頁面。
首頁就相當於一個門面，體驗好不好很大的程度上影響著客戶的滿意度，客戶滿意了，接受度高了，回頭率才會高，然後後面的就更好開展啦，是啵？
至於快取多久，快取到哪？可以根據需求自己考慮，我們是快取在了local storage裡面，快取時間是30分鐘。
第一次載入的時候就將資料快取下來，然後30分鐘之內再進頁面就會很快顯示。當然這裡面也是有一些缺點的，第一次進來比較慢。
二、快取改動少的資原始檔

很多專案都要用到公共方法，一般都是用base，common或者global等單詞命名，也有一些基本的樣式表也是這樣命名的，基本上這些檔案是不需要改動的，將他們快取起來減少一些資源的請求。
三、配置CDN
CDN的全稱是Content Delivery Network，即內容分發網路。其目的是通過在現有的Internet中增加一層新的網路架構，將網站的內容釋出到最接近使用者的網路“邊緣”，使使用者可以就近取得所需的內容，提高使用者訪問網站的響應速度。當然，這是需要付費的，通過第三方的方式進行加速，個人的話還是沒必要弄啦。
四、壓縮圖片，壓縮程式碼
這是從程式碼層面上面說的，線上程式碼一般不要log，註釋掉的程式碼直接刪除，畢竟使用者不關注你那些沒用的程式碼，刪除不必要的東西，將程式碼壓縮，現在也有很多壓縮和混淆工具，直接線上也行，vue專案裡面可以整合uglifyjs等，打包之後註釋掉的程式碼會自動被刪除；那些用原生開發的就要辛苦點，首先，寫程式碼的時候就要注意啦，程式碼儘量簡潔點，除錯之後不需要的程式碼記得刪除，然後再用工具壓縮下，嗯，歐了，然後在引入吧，一般壓縮一下檔案能小不少，請求的時候速度更快喲。
圖片的話應該不用多說，是個開發都知道，圖片太大首先請求慢，其次載入慢，所以原則就是能用css寫的就用css寫，不能的那也要儘量減少圖片的大小，100K以內，不能再多了，再多了我不幹，哈哈。
五、AMD,CMD的開發模式，按需載入
按需載入這個其實很久前就開始了，也一直被推崇，但是實際專案中，很多公司還是沒有按照這種想法來的，特別是一些小公司剛起步的時候，加班多，工資少，很多人都是能搞定就行，交差-收工-回家。等到後期公司規模上去了，人員多了，產品越做越大的時候，問題就會出現啦，之前的那種模式不適合，這個時候再來亡羊補牢，一點點的填坑，悲憤！
AMD是”Asynchronous Module Definition”的縮寫，即”非同步模組定義”。它採用非同步方式載入模組，模組的載入不影響它後面語句的執行。 這裡非同步指的是不堵塞瀏覽器其他任務（dom構建，css渲染等），而載入內部是同步的（載入完模組後立即執行回撥）。
類似於下面的這種寫法：

require(['math'], function(math) {
  math.add(2, 3);
})

但是以上是使用一個模組，在此之前需要定義一個模組，AMD是使用define:

define(id?, dependencies?, factory);

// math.js
define(function() {
  var add = function(x, y) {
    return x + y;
  }

  return  {
    add: add
  }
})

// main.js
require(['math'], function(math) {
  alert(math.add(1, 1));
})

// 如果有依賴
// math.js
define(['dependenceModule'], function(dependenceModule) {
  // ...
})

AMD依賴前置，用到什麼都需要先載入進來。
CMD推崇依賴就近，延遲執行。

// CMD
define(function(require,exports, module){
	var a = require('./a');
	a.doSomethine();
	var b = require('/b');
	b.doSomething();
});

// AMD
define(['a','b'],function(a,b){
	a.doSomething();
	b.doSomething();
});

點我-看詳細AMD，CMD講解

以上是本人開發的一點總結，如果和你剛好志同道合，那是我的幸運，因為能力有限，還有很多需要學習的地方，也希望能結交更多的志同道合的夥伴。謝謝。