直接進入主題，本篇文章有點長，包括從設計階段，到摸索階段，再到實現階段，最後全面覆蓋測試階段（包括資料蒐集清洗），還有與主流前端通訊框架進行對比PK階段。

首先介紹一下一些概念：

　　1. 瀏覽器的併發能力：瀏覽器設計當初就定義了瀏覽器開啟頁面，同時傳送http請求的瞬時數量。這樣設計有很多原因，同時保護瀏覽器和伺服器。具體可以谷歌或者百度關鍵字：瀏覽器併發。

　　2. 瀏覽器針對伺服器域名請求的併發限制數量：

　　3. 請求池：類似於資料庫連線池一樣，對資料庫請求連線進行分配管理等等

　　4. 複用請求：對於生命週期已經結束的請求不進行銷燬，重複利用，減少重新向瀏覽器申請資源，減少通用庫設計中的通用檢查。

引入新功能：連線池

當初為啥要做這個功能：

　　上次迭代最後留了一個彩蛋，我在一次測試中，傳送完成一個請求之後，將這個請求存到一個變數中，然後又嘗試重新開啟，發現竟然可以傳送出去。好奇心害死貓，我在瀏覽器中用console.time去計算執行這段js程式碼的時間，發現重複使用的請求使用時間大概是前者的一半，甚至更少。既然，他可以這麼優秀，那我為啥不能欲罷不能呢。所以，這一步下去就是一波三折...

摸索思路：

按著當時的設計思路一步一步的來確認

　　　1. 首先確認了一個請求傳送完了之後，可以再次開啟然後傳送。這樣就保證了方向是對的，可以繼續優化下去

　　　2. 其次，對於一個域名，瀏覽器的同時傳送請求的數目就如上面圖片上描述的，主流基本都是6個，所以請求池將基於瀏覽器最大併發做連線的配置，不過因為瀏覽器差異，會將連線池的連線數量做配置進行配置

　　　3. 將這個請求池塞滿配置的請求將是第一任務，對於XMLHttpRequest這個物件，主流的想法都是做一個拷貝，當前淺拷貝是不行的，那就做了一次深度拷貝測試，塞滿請求池。不過，該方案夭折了。

　　　4. 因為請求物件的原型是XMLHttpRequest，這個物件實現了瀏覽器的接口才能通過瀏覽器API傳送http請求，但是深度拷貝的物件是Object，object不實現瀏覽器的介面，所以夭折了，無法直接拷貝，難道我要類似於傳送6次空請求之後去搜集請求池連線嗎？這個是絕對不可能饒恕的行為，所以做了下一步的摸索

　　　5. 如果XMLHttpRequest物件實現了瀏覽器的介面，那麼我們將深度拷貝的物件的原型的指向重新指向到XMLHttpRequest。這樣是不是可以傳送請求了。然後測試了，阿西吧，非法請求，而且對於XMLHttpRequest物件中的response、responseText等熟悉還是隻讀了，重新拷貝賦值瀏覽器報錯，非法，全都是非法。

　　　6. 氣餒了很久，把大腦放空換個思路去解決這個問題。參考了其他類似請求池的設計思路，要麼一開始就做初始化，將池子中的連線一次性生產出來，或者每次建立的連線消費完畢之後再歸入池子中，等待連線滿了之後才啟用連線池。

　　　7. 考慮到前端每個頁面，或者對於現在的每個元件中能傳送請求的數量並不是很大，可能一個路由下就傳送了4-5個請求就解決一個小業務需求，根本達不到啟動請求池的基本配置。其次，通過瀏覽器的performance監控頁面效能，發現初始化的時間就在幾毫秒之間，相對於後期使用加速，這個時間的付出，對於後期的使用是很值得的預算。所以，選擇了第一種方式，一次性初始化請求池，等待呼叫。下面縷清思維，做了更完整和全面的設計。

請求池設計方案：

左邊 -- 生成請求池部分 

　　1. 載入ajax-js庫的時候，通過判斷請求池開關是否開啟，開啟的話就走初始化這一套流程。

　　2. 建立基於全域性配置的空請求-->copy所需引數-->建立空XMLHttpRequest物件-->合併copy引數到空物件上-->讀取配置數量生成請求池

　　3. 因為請求池是基於全域性配置生成的請求，所以如果全域性配置變動，將觸發請求池的reload，重新生成。

中間 -- 通過請求池傳送請求的生命週期

　　1. 請求進來，首先判斷開關是否開啟，開啟的話就先判斷請求池中請求的數量是否還有。

　　2. 對比引數，是否有額外預設引數的變更（除url、data、successEvent、eroorEvent外），如果有將在請求傳送前進行設定。（例如：request的Header將在每次開啟的時候全部重新置空）

　　3. 在請求的生命週期結束之後，然後歸還請求池。注意：請求的生命週期結束有很多狀況，傳送錯誤url、timeout超時等在瀏覽器層面就失敗的，以及請求傳送成功時候，非200、304等錯誤，比如4XX或者5XX系列錯誤的生命週期結束

　　4. 最後判斷是否有排隊的請求，有的話取出再來，沒有直接返回池子

右邊 -- 請求排隊系統

　　1. 對於請求如果超出請求池數量，請求池肯定無法承載，就算能承載，其實瀏覽器也是將這些超出併發的請求進行排隊，等待一波結束之後再發送。所以有個排隊的系統很重要的啦，來管理請求。

　　2. 對於超出容量請求，首先排隊。然後，在請求生命結束之後，將會去檢查排隊系統是否還有排隊請求。其次，如果有就進行取出，再走請求的生命週期，如果每頁，那就沒請求啦

程式碼片段展示：

1. 載入類庫時判斷開關，初始化程式碼

 1   var outputObj = function () {
 2     //雖然在IE6、7上可以支援，但是最好升級你的瀏覽器，畢竟xp已經淘汰，面向未來吧，騷年，和我一起努力吧！！
 3     if (tool.getIEVersion() < 7) {
 4       //實在不想說：升級你的瀏覽器吧
 5       throw new Error("Sorry,please update your browser.(IE8+)");
 6     }
 7 
 8     // 是否開啟連線池
 9     if (initParam.pool.isOpen) {
10       tool.createPool()
11     }
12 
13     return tempObj;
14   };

 2. 建立方法

1     // 建立請求池中連結
2     createPool: function () {
3       // IE 系列不支援傳送請求傳''，所以預設/
4       tempObj.common({url: '/'}, true)
5       tool.deepCloneXhr(selfData.xhr, initParam.pool.requestNumber)
6     },

3. 拷貝通用引數存入請求池

 1     // 拷貝xhr引數
 2     deepCloneXhr: function (data, requestNum) {
 3       var mapping = {
 4         currentUrl: true,
 5         onerror: true,
 6         onload: true,
 7         onreadystatechange: true,
 8         ontimeout: true,
 9         timeout: true,               // IE系列只有open連線之後才支援覆蓋
10         withCredentials: true,
11         xhr_ie8: true
12       }
13       var temp = {}
14 
15       for (var key in data) {
16         if (mapping[key]) {
17           if (!isNaN(tool.getIEVersion()) && key !== 'timeout') {
18             temp[key] = data[key]
19           } else {
20             var newKey = '_' + key
21             temp[newKey] = data[key]
22           }
23         }
24       }
25 
26       for (var i = 0; i < requestNum; i++) {
27         var nullRequest = tool.createXhrObject()
28         tool.MergeObject(nullRequest, temp)
29         selfData.requestPool.push(nullRequest)
30       }
31     },

4. 使用加速，判斷是否開啟（只舉例post）

 1     //非同步post請求
 2     post: function (url, data, successEvent, errorEvent, timeoutEvent) {
 3       var ajaxParam = {
 4         type: "post",
 5         url: url,
 6         data: data,
 7         contentType: '',
 8         successEvent: successEvent,
 9         errorEvent: errorEvent,
10         timeoutEvent: timeoutEvent
11       };
12 
13       if (initParam.pool.isOpen) {
14         tool.useRequestPool(ajaxParam)
15       } else {
16         tempObj.common(ajaxParam);
17       }
18     },

5. 使用請求池連結，設定基本配置（url，datda，successEvent）

 1     // 請求池申請請求使用
 2     useRequestPool: function (param) {
 3       // 判斷請求池中是否有可用請求
 4       if (selfData.requestPool.length !== 0) {
 5         var temp = selfData.requestPool.shift(), sendData = '', tempHeader = {}
 6         // 賦值操作,將資料捆綁到原型上
 7         temp.callback_success = param.successEvent
 8         temp.callback_error = param.errorEvent
 9         temp.callback_timeout = param.timeoutEvent
10         temp.data = param.data
11 
12         // 處理引數
13         switch (param.contentType) {
14           case '':
15             tool.each(tool.MergeObject(param.data, initParam.publicData), function (item, index) {
16               sendData += (index + "=" + item + "&")
17             });
18             sendData = sendData.slice(0, -1);
19             break
20           case 'json':
21             sendData = JSON.stringify(tool.MergeObject(param.data, initParam.publicData))
22             break
23           case 'form':
24             if (!tool.isEmptyObject(initParam.publicData)) {
25               tool.each(initParam.publicData, function (item, index) {
26                 param.data.append(index, item)
27               })
28             }
29             sendData = param.data
30             break
31         }
32 
33         //判斷請求型別
34         if (param.type === 'get') {
35           temp.open(param.type, tool.checkRealUrl(param.url, temp) + (sendData === '' ? '' : ('?' + sendData)))
36         } else {
37           temp.open(param.type, tool.checkRealUrl(param.url, temp))
38         }
39 
40         param.responseType ? (temp.responseType = param.responseType) : null
41 
42         if (!isNaN(tool.getIEVersion())) {
43           temp.timeout = temp._timeout
44         }
45 
46         switch (param.contentType) {
47           case '':
48             tempHeader['Content-Type'] = 'application/x-www-form-urlencoded'
49             break
50           case 'json':
51             tempHeader['Content-Type'] = 'application/json'
52             break
53         }
54 
55         //設定http協議的頭部
56         tool.each(tool.MergeObject(tempHeader, initParam.requestHeader), function (item, index) {
57           temp.setRequestHeader(index, item)
58         });
59 
60         //傳送請求
61         temp.send(param.type === 'get' ? '' : sendData);
62       } else {
63         // 沒有請求，載入到待發送佇列中
64         selfData.queuePool.push(param)
65       }
66     },

6. 在預設週期中回收連結（onreadystatechange和onload）

 1       //xmlhttprequest每次變化一個狀態所監控的事件（可拓展）
 2       xhr.onreadystatechange = function () {
 3         switch (this.readyState) {
 4           case 1://開啟
 5             //do something
 6             break;
 7           case 2://獲取header
 8             //do something
 9             break;
10           case 3://請求
11             //do something
12             break;
13           case 4://完成
14             //在ie8下面，無xhr的onload事件，只能放在此處處理回撥結果
15             if (this.xhr_ie8) {
16               if (this.status === 200 || this.status === 304) {
17                 if (this.responseType == "json") {
18                   this.callback_success ?
19                     this.callback_success(ajaxSetting.transformResponse(JSON.parse(this.responseText))) :
20                     ajaxSetting.successEvent(ajaxSetting.transformResponse(JSON.parse(this.responseText)))
21                 } else {
22                   this.callback_success ?
23                     this.callback_success(ajaxSetting.transformResponse(this.responseText)) :
24                     ajaxSetting.successEvent(ajaxSetting.transformResponse(this.responseText))
25                 }
26               } else {
27                 // 請求錯誤蒐集
28                 tool.uploadAjaxError({
29                   type: 'request',
30                   errInfo: JSON.stringify(this.data ? this.data : ajaxSetting.data),
31                   errUrl: this.currentUrl,
32                   errLine: this.status,
33                   Browser: navigator.userAgent
34                 })
35               }
36               // 針對IE8 請求池處理
37               if (ajaxSetting.pool.isOpen) {
38                 tool.responseOver(this)
39               }
40             } else {
41               if (this.status === 0) {
42                 // 傳送不存在請求，將不會走onload，直接這裡就掛了，請求歸還請求池
43                 if (ajaxSetting.pool.isOpen) {
44                   tool.responseOver(this)
45                 }
46               }
47             }
48             break;
49         }
50         ;
51       };

 1       //onload事件（IE8下沒有該事件）
 2       xhr.onload = function (e) {
 3         if (this.readyState === 4 && (this.status == 200 || this.status == 304)) {
 4           /*
 5           *  ie瀏覽器全系列不支援responseType='json'和response取值，所以在ie下使用JSON.parse進行轉換
 6           * */
 7           if (!isNaN(tool.getIEVersion())) {
 8             if (this.responseType === 'json') {
 9               this.callback_success ?
10                 this.callback_success(ajaxSetting.transformResponse(JSON.parse(this.responseText))) :
11                 ajaxSetting.successEvent(ajaxSetting.transformResponse(JSON.parse(this.responseText)));
12             } else {
13               this.callback_success ?
14                 this.callback_success(ajaxSetting.transformResponse(this.responseText)) :
15                 ajaxSetting.successEvent(ajaxSetting.transformResponse(this.responseText));
16             }
17           } else {
18             this.callback_success ?
19               this.callback_success(ajaxSetting.transformResponse(this.response)) :
20               ajaxSetting.successEvent(ajaxSetting.transformResponse(this.response));
21           }
22         } else {
23           /*
24            *  這邊為了相容IE8、9的問題，以及請求完成而造成的其他錯誤，比如404等
25            *   如果跨域請求在IE8、9下跨域失敗不走onerror方法
26            *       其他支援了Level 2 的版本 直接走onerror
27            * */
28           this.callback_error ?
29             this.callback_error(e.currentTarget.status, e.currentTarget.statusText) :
30             ajaxSetting.errorEvent(e.currentTarget.status, e.currentTarget.statusText);
31 
32           // 請求錯誤蒐集
33           tool.uploadAjaxError({
34             type: 'request',
35             errInfo: JSON.stringify(this.data ? this.data : ajaxSetting.data),
36             errUrl: this.currentUrl,
37             errLine: this.status,
38             Browser: navigator.userAgent
39           })
40         }
41 
42         // 生命週期結束之後返回資料池，不繫結狀態（是否為成功或失敗狀態）
43         if (ajaxSetting.pool.isOpen) {
44           tool.responseOver(this)
45         }
46       };

7. 回收方法

1     // 請求週期結束操作
2     responseOver: function (xhr) {
3       selfData.requestPool.push(xhr)
4       if (selfData.queuePool.length > 0) {
5         var tempData = selfData.queuePool.shift()
6         tool.useRequestPool(tempData)
7       }
8     }

以下為測試結果展示（測試覆蓋面：針對主流瀏覽器測試自身不開請求池、開啟請求池、與主流框架axios、jquery的ajax對比，對比精度連續傳送10、100、1000、5000次請求）：

chrome（測試單位：微秒）：

firefox（測試單位：毫秒）  PS：在5000的請求測試下，除了開啟請求池可以正常進行，其他方式全都瀏覽器崩潰

safari（測試單位：微秒）：

opera（測試單位：微秒）

edge（測試單位：毫秒）

IE11（測試單位：毫秒）

IE9（測試單位：毫秒）

IE8（測試單位：毫秒）   PS：在IE8下面沒有找到axios ie8下執行方案，jquery就不做測試，就做自身對比測試

 首先陳述幾個問題：

　　1. 測試單位取值

　　　　使用瀏覽器的console.time方法去取值，在不同瀏覽器獲得的引數不一樣

　　2. 為什麼不同意取值

　　　　因為ajax-js在開啟請求池的用時中達到了0.00X等級，也就是微秒的級別，在折線圖中無法展示，所以增大單位，好看出趨勢

從所有清洗資料獲得的統計圖中總結以下：

　　1. jquery.ajax速度和效能最慢

　　2. ajax-js 開啟請求池狀況下，效能最好，最快

　　3. ajax-js類庫不開啟請求池，相對來說，比jquery中的ajax效能高，但是，不得不承認，axios比ajax-js優秀。

　　4. ajax-js類庫開啟請求池的狀況下，針對於自身，效能提高至少一倍以上，比axios還快，快很多

　　資料蒐集在：https://github.com/GerryIsWarrior/ajax/tree/master/ajax-dataCenter/collect

　　清洗完資料形成的報表：https://github.com/GerryIsWarrior/ajax/tree/master/ajax-dataCenter/collect

　　資料清洗的工具：https://github.com/GerryIsWarrior/ajax/tree/master/ajax-dataCenter/tool

　　清洗完成形成的資料報表可以直接開啟，可以更清晰的看資料

此次對外暴露的方法都開啟了請求池加速（開啟全域性加速配置），除了common方法，預留一個未加速通用方法，防止有特殊需求。而且，本次請求池只是針對一個域名的加速，二期，將會增加針對不同域名加速的請求池。

這次的迭代一波三折，中間有很多次走到一半就持續不下去了，但是因為剛開始測試的基礎方向是對的，所以不想放棄，然後都是理順思路一步一步的去走，看自己到底錯在什麼地方，這個方向為什麼不能走。還有為了這次測試，做了大量的資料蒐集，從mac系統和window不停切換，為主流瀏覽器做相容測試和主流框架對比測試資料蒐集。蒐集完成之後，耐心的做資料清洗，將混雜的資料，進行分類歸納，然後找對應報表，最後將資料載入到報表上，做更直觀的展示。

過程是艱難的，結果是值得興奮的。正視自己的不足，axios是一個優秀的框架，速度和效能絕對是很好的。在沒有做請求池優化之前，自己寫的庫達不到那個程度，不過在開啟了請求池之後，在效能和速度方面已經超過了axios，jquery就不談了。在研究前端通訊的過程中收穫了很多很多，從基礎到設計，從底層到優化，沒有什麼是解決不了的問題。認清自己，做更好的自己，沒有什麼是不可能的。

從0-1是艱難的，從99-100更是難上加難。但是，只要去做，終是離那個方向更近一點，前端共勉！！