解析大型JSON響應時響應緩慢

我開發了一個基於RESTFul設計的Web應用程序，其中應用程序從基於JAVA的Web服務接收JSON響應並在UI中顯示，並且每隔5秒刷新一次數據。該應用程序使用Bootstrap進行UI設計，使用Backbone和require.js來實現將JSON響應解析爲Backbone集合的MVC結構。當管理員使用此應用程序時，JSON響應大小過大（從800到1100個對象）。這是事情變得混亂的地方。根據我的分析，瀏覽器佔用了太多資源，因此其餘的應用程序非常緩慢。例如，如果我嘗試打開模式，系統會凍結一段時間，並且打開速度很慢，從而導致用戶體驗很差。根據我分析的時間正在解析數據作爲一種補救措施，我刪除了代碼中的所有註釋，並嘗試對JSON文件/ html/css/js實施Gzip壓縮。 JSON對象的樣品粘貼下面解析大型JSON響應時響應緩慢

{ 
"name": "TEST", 
"state": "Lunch", 
"time": "00:00:09", 
"manager": "TEST", 
"site": "C", 
"skill": "TEST", 
"center": "TEST", 
"teamLead": "TEST", 
"workGroup": "TEST", 
"lanId": "TEST", 
"dbID": "TETS", 
"loginId": "TEST", 
"avgAcwTime": "nn", 
"avgHandleTime": "nn", 
"avgTalkTime": "nn", 
"callsAnswered": "nn", 
"dispSkill": "-", 
"errCode": null, 
"errDesc": null, 
"avgAcwTimeth": "medium", 
"avgHandleTimeth": "high", 
"avgTalkTimeTh": "medium", 
"callsAnsweredTh": "medium", 
"stateTh": "high"

}

Pagenation無法做到，由於一些要求。任何一個可以提出好的建議，以改善演出]使用Backbone.Collection.fetch（）

getAgentMetric(){ 
this.metrices.fetch({ 
     url : (isLocal) ? ('http://localhost:8080/jsons/agent.json') : (prev_this.url + '/agentstat'), 
     data: JSON.stringify(param), 
     type: "POST", 
     dataType: "JSON", 
     contentType: "application/json", 
     }) 
     .done(function() { 
     // passing the datasource from ajax call 
     prev_this.agentLoacalSource.localdata = prev_this.metrices.toJSON(); 
    });   
    timeout = setTimeout(_.bind(this.getAgentMetric, this), 5000);

}

我也是獲取數據，

來源

2016-03-10 Amit Saha

我有一個關於刷新數據的建議 - 你可以實現過濾器（檢查什麼改變只發送這部分）。所以在前端你只能更新改變的部分。 –

瀏覽器可以處理很多超過赫克一千個對象沒有任何緊張，所以我不認爲這是事實，你只是從後端請求大量的數據。這很可能是因爲你的一些解析或渲染代碼很慢。

沒有看到任何更多的代碼的幾種可能性：

這真的取決於你在這裏做什麼，但我會假設你不使用模板庫（hoganjs ，handlebarsjs等）。你絕對應該考慮使用它，因爲它們可以加快速度，並使生成html更容易。
您是否正在爲您渲染的每個模型運行.append()？這真的會減慢速度。您應該生成所有需要生成的html，然後運行一次.append()。
您爲每個模型（如果有）添加了什麼樣的事件監聽器？列出滾動沒有去抖動的事件會導致瀏覽器速度變慢，特別是當你添加一堆瀏覽器時。

完全無關的速度緩慢的問題，有一些我看到這個代碼的一些問題：

你超時應在阿賈克斯的.always()函數被調用，以防止併發請求的，如果走出去無論出於何種原因，請求都很慢。

this.metrices.fetch(...) .always(function() { timeout = setTimeout(...); }.bind(this));
請求被簡單地提取數據應該使用GET而不是POST請求類型。你可以看到https://stackoverflow.com/a/3477374/5780021瞭解更多關於這方面的信息。

我會建議您計算一些代碼以查看緩慢實際發生的位置。這將允許您實際確定代碼中的點到點之間的時間長度。

來源

2016-03-12 14:58:53

此外，如果您有興趣利用Web工作人員管理Backbone集合中的數據，請查看[Backbone.Conduit]（http://conduit.wagener.org/）插件。鏈接的「SparseCollection」演示在大多數機器上（不包括數據傳輸時間）在<300 ms的Backbone集合中異步處理〜220,000個項目。 –

解析大型JSON響應時響應緩慢

回答

相關問題