頁面和數據的優化方案

一、數據壓縮   

1.一、壓縮掉沒有用的數據，劉東說的裸數據，邏輯上刪除掉，可是能知足描述數據的要求。

1.二、數據的近義詞。

以前的數據結構

data:['2020-1-1','2020-1-2','2020-1-3','2020-1-4','2020-1-5']

壓縮之後的

['2020-1-1~2020-1-5']

 

1.三、目前的數據存儲以key-value的方式進行交互的，如今要作好文檔的工做，幹掉key，只保留值，逗號分隔。

以前的數據

{"name":"馬良","age":27}

壓縮後

['馬良','27']

二、提高首屏加載時間

 2.一、定寬全部格的寬度，經過計算(瀏覽器的寬度/格的寬度)能夠得出首屏加載的數據的量，進行初步評估，請求API。這個數據量原則上少於所有的數據；首屏加載完畢後，再次請求全量的api，提高用戶體驗。

第一次請求採用loading方式，第二次請求採用靜默方式。

三、回退解決方案

 3.一、數據操做時，只記錄數據怎麼操做的。後臺有個靜默的線程爲此次操做準備數據快照；當還原時，若是有快照就使用快照，沒有快照就本身計算。

 3.二、採用一些顯卡加速技術，能夠理解顯卡不關心數據，顯卡只接受繪製，將繪製的方式告訴顯卡，顯卡能夠反向繪製，這樣與數據無關。

四、採用局部刷新

繪製方案將採用：

局部全局刷新--------------------部分刷新--------------------精確刷新。

示例圖以下。  深色部分標識 渲染的區域。三張圖用於展現 精確去渲染區域，而不是每次從新繪製。

 

 

技術方案採用Vue 或者React的方案

五、去功能化。

5.一、與產品商量，結合一線人員使用，幹掉一些可有可無，可是很耗費性能的操做。部分功能能夠走申請流程。