優化數據可視化Web應用程序的性能

Question

我正在重寫一個3年前編寫的數據可視化Web工具。從那時起，瀏覽器的JavaScript引擎已經變得更快，所以我正在考慮將部分工作從服務器轉移到客戶端。

在頁面上，數據在表格和地圖（或圖表）中可視化，它使用的是相同的數據，但方式不同，所以兩種準備顯示數據的算法是不同的。

在用戶與數據下拉選擇器（3主+ 2sub取決於3主）的每次交互之前，發送了3個Ajax請求，php完成所有工作並僅發回需要的數據（在html中爲表/ xml的圖表）非常微小的響應，沒有性能問題和JavaScript附加響應，並沒有比追逐更改事件更多。

所以表現得不錯，但在標準用戶的每一個變化必須等待Ajax響應：/

現在我的想法是在一個Ajax請求發送回一個JSON對象，只有在主的每一個變化3標準組合，然後讓javascript填充表中的數據以及ajaxsuccess上的圖表/地圖，然後再改變2個子標準。

我的猶豫與服務器發送的json的結構有關，負載的平衡。事實上，如果只有一種算法需要創建想要的json結構來顯示原始數據中的數據，我會將php處理數據到這個對象中，以便爲javascript處理而無需任何額外的處理;但也有2

所以

• 如果我的PHP過程的數據，以創建2個對象（一個用於表/一個用於圖），我會加倍JSON響應&增加存儲器的大小在客戶端使用;我不喜歡這種方法，因爲這兩個對象包含相同的數據，只是結構不同&冗餘是邪惡的，不是嗎？

• 如果我發送原始對象並讓javascript搜索要顯示的內容以及我在哪裏向客戶端提供大量工作 - 這也適用於每個子標準更改（或者我可以在ajaxsuccess上創建所有json對象所以他們在這個子標準變化的情況下準備好） - 在這裏，我用舊的瀏覽器/小公羊用戶喜中有憂...

（原始JSON對象及時治療，根據標準3KB之間變化和12kb，在500和2000之間的記錄）

我沒有發現最好的方法...

因此，對於這個單一的原始數據多個結構化對象的工作，你會有PHP（增加響應大小和發送冗餘數據）或JavaScript（增加JavaScript負載）處理原始數據？

由於一噸您的意見

Answer 1

我找到了一個合適的解決方案，所以我會回答我的問題。

我跟隨@ Daverandom的建議是：

• PHP將原始數據

• 的JavaScript處理原始數據和（一對夫婦的參數取決於主要標準結合一起）在頁面中渲染它

• 如果子標準發生變化，JavaScript會重新處理原始數據，因爲測試循環過程看起來非常快並且不會凍結瀏覽器，所以它e不需要將結構化對象保留在範圍內

• 使用JSON AJAX響應發送攻擊性緩存標頭（這些數據永遠不會更改 - 每年僅添加新記錄），以防用戶重新諮詢已有數據已經被查閱過了：如果原始數據沒有被顯示，那麼原始數據不會保存在JavaScript範圍內

• 最重要的是，由php回顯的JSON字符串被緩存在服務器上（因爲這些數據永遠不會改變）減少數據庫查詢並提高響應時間

最終代碼是整潔，易於維護，並且應用程序完美無瑕。

感謝@Daverandom的幫助。