為了更好提升
相親原始碼的效能，我們需要對各種資源內容進行不同方面的優化。對使用者而言，優化可以讓相親原始碼的響應速度加快，載入更加迅速，可以帶來更好的使用體驗。
對於服務商而言，相親原始碼前端優化能夠減少頁面請求數量，寬頻所佔頻寬，有效的節省資源。今天我們就一起來了解一下為了減少相親原始碼中頁面資料請求次數如何進行程式碼級別優化。

程式碼級別：減少資料請求次數

優化思路

如何減少資料請求數量？我們可以通過請求佇列的方式，對邏輯進行優化。

經過優化，相親原始碼獲取資料的邏輯變成了如下的樣子：

1、當單元格傳送請求時，請求先新增ID，並通過ID快取callback方法，然後進入請求佇列，佇列管理器定時或者根據佇列中請求數量多少像服務端傳送請求包。
2、相親原始碼服務端接收到請求包後批量處理，處理後封裝新的返回包
3、前端接受到返回包後根據請求的唯一ID，呼叫對應的callback方法執行，完成單元格的請求。

使用此方法進行優化，優點是顯而易見的：

1、實現簡單，相親原始碼程式碼改動小，原本的ajax請求改為佇列呼叫即可，請求後的callbak無需修改。服務端新增一個新介面拆分請求即可。
2、根據實際場景設定請求頻率或者一次請求中資料的數量，兼顧更新頻率和相應次數。

應用例項

下面程式碼是GETNUMBERFROMSERVER的實現，該函式負責呼叫伺服器的getData介面，傳遞引數，獲取顯示內容並展示在單元格。為了確保非同步更新單元格的使用者體驗，這個函式源自SpreadJS的非同步函式。

1.        var GetNumberFromServer = function () {
2.        };
3.        GetNumberFromServer.prototype = new GC.Spread.CalcEngine.Functions.AsyncFunction("GETNUMBERFROMSERVER", 1, 2);
4.        GetNumberFromServer.prototype.evaluate = function (context, arg1, arg2) {
5.        fetch("/spread/getData?data="+arg1)
6.        .then(function(response) {
7.            return response.text();
8.        })
9.        .then(function(text) {
10.            context.setAsyncResult(text);
11.        });
12.        };
13.        GC.Spread.CalcEngine.Functions.defineGlobalCustomFunction("GETNUMBERFROMSERVER", new GetNumberFromServer());
14.

為了減少請求，我們首先需要使用一個快取物件存放請求資料，定時呼叫介面處理。

1.    let callStack = {}; //收集請求資料
2.    let callingStack = {}; //快取正在請求中的資料資訊
3.    let callStackCount = 0; //請求數量，當作請求ID，用於區分請求內容
4.    let timingId = 0; //用於判斷當前是否有定時器等待請求中

然後，我們定義新的佇列化請求方法，代替在函式中直接呼叫API介面。

1.    
2.    // data 請求資料
3.    // context 非同步函式context, 網路請求結束後回撥時使用
4.    // callback 回撥函式
5.    function stackCall(data, context, callback){
6.        let id = callStackCount++;
7.        callStack[id] = {};
8.        callStack[id].data = data;
9.        callStack[id].context = context;
10.        callStack[id].callback = callback;
11.    
12.        if(timingId === 0){ // 同時只有一個定時器
13.            timingId = setTimeout(function(){
14.                callingStack = callStack;
15.                callStack = {};
16.    
17.                let newData = "" //合併請求資料，根據實際業務情況整理
18.                for(let cId in callingStack){
19.                    newData += (cId + "," + callingStack[cId].data + ";");
20.                }
21.    
22.                // 傳送請求，這裡模擬資料，傳送什麼返回什麼
23.                fetch("/spread/getData?data=" + newData)
24.                      .then(function(response) {
25.                        return response.text();
26.                      })
27.                      .then(function(text) {
28.                        let resData = newData.split(";");
29.                        let spread = designer.getWorkbook();
30.                        spread.suspendPaint(); //暫定頁面繪製
31.    
32.                        //解析返回的資料
33.                        for(let resId in resData){
34.                            if(resData[resId]){
35.                                let ress = resData[resId].split(",");
36.                                // 根據Id，獲取函式的context，呼叫callback回撥
37.                                callingStack[ress[0]].callback.call(null, callingStack[ress[0]].context, ress[1])
38.                            }
39.                        }
40.                        spread.resumePaint(); //重啟統一繪製
41.                    timingId = 0;
42.                });
43.            }, 1000)
44.        }
45.    }

經過這次優化，當相親原始碼頁面有大量非同步請求時，這些請求會放到佇列中，定時統一處理，一次重新整理。

此外，我們還可以使用SpreadJS的doNotRecalculateAfterLoad匯入選項，在首次載入時不計算，改用json中原始值；以及calcOnDemand開啟按需計算。進一步優化頁面初始化的速度和體驗。

1.    json.calcOnDemand = true;
2.    spread.fromJSON(json, { doNotRecalculateAfterLoad: true });

總結

以上便是“如何從相親原始碼的程式碼級別減少資料請求次數？”的全部內容，在相親原始碼的開發過程中滿足使用者的不同需求，提升使用者的使用體驗才能開發的關鍵，希望以上內容對大家有幫助。

本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理

相親原始碼開發，從程式碼級別減少資料請求次數的實現

程式碼級別：減少資料請求次數

總結

相關文章