DataV：可視化頁面效能最佳化常見問題

影響可視化頁面載入的常見因素有哪些？

• 電腦硬體設定。例如顯卡、cpu、記憶體這三個方面。

• 網路速度。

• 可視化應用使用的靜態資源。例如gif動圖、svg圖片和檔案等。

• 組件配置資料介面的響應速度以及載入的資料量。

• 可視化應用使用到的組件數量、種類和版本是否為老版本。

• 在可視化應用中網路以及電腦配置影響較大，其次是靜態資源以及資料介面響應時間長度。

• 可視化應用中自訂群組件引入第三方庫的種類和版本是否保持一致。

• 機器配置影響情況。

一般頁面載入多久是合理的？

瀏覽器頁面載入時間與內容有關，在可視化頁面中，如果想像普通網頁一樣，最佳化到5秒之內開啟是比較困難的。通常可視化應用為了豐富展示內容使用的組件數量都會比較多，會影響頁面載入速度，該問題和使用哪種產品沒有關係。

常見的頁面效能排查手段有哪些？

• 前置條件

  • 檢查電腦配置情況，建議您使用電腦的CPU配置不低於i5-6500，顯卡配置不低於GTX960，記憶體不低於8GB。具體配置需要根據實際可視化應用的情況，如解析度大小以及是否有用三維城市構建器組件來確定。

  • 檢查網路速度情況，建議您使用的網路速度高於100Mb/s。

• 排查方法：

  • Network排查：開啟瀏覽器控制台，找到network頁簽選項，鍵盤按下ctrl+r強制重新整理頁面。觀察各個資源的請求時間長度情況，以及dom渲染所需要的時間。

    當通過DataV服務端發起的資料介面查詢時，在network請求中，預覽頁請求名稱為0，發布頁請求名稱為可視化應用ID。

    說明

    如果使用DataV服務端請求資料，會有請求時間長度10s的限制。當您看到資料介面請求時間長度在8至9s時間左右時，多半是部分組件的介面響應速度太慢導致請求逾時，您可以查看具體請求的response資訊，根據是否提示timeout，找到對應的組件ID，在圖層列表中進行搜尋來判斷是哪個組件介面影響了資料載入。

  • Performance排查：開啟瀏覽器控制台，找到Performance頁簽選項，鍵盤按下快速鍵ctrl+e或者單擊重新整理表徵圖，進入效能監控頁面，排查具體請求耗時情況。

頁面效能最佳化手段有哪些？

• 推薦使用配置相對較高的電腦以及高速網路訪問。

• 檢查使用到的圖片或者視頻資源是否過大，如果過大，您可以考慮更換其它格式，如圖片盡量使用webp或者webm格式，避免使用gif。您也可以使用OSS地址來提高訪問速度。

  說明

  對於視頻，推薦您使用.webm的視頻格式，如果是.mp4的視頻格式，可以將其轉換為.webm的格式。相同解析度下.webm格式的載入速度比.mp4更快。

• 用chrome瀏覽器訪問chrome://gpu，查看相應配置的硬體加速狀態是否為生效狀態。

• 檢查組件資料介面是否響應過慢。

• 排查資料介面返回的資料量是否較大，巨量資料量會影響組件渲染時間，您可以考慮使用條件式篩選的方式來篩選查詢結果，減少資料的返回量。

• 檢查是否存在多餘組件，如果有多餘組件或者沒有用到的組件建議刪除。

• 檢查windows控制台的顯示設定是否為100%。

• 檢查在一個可視化應用中是否有使用了自訂群組件且自訂群組件中引入的依賴庫版本、種類是否都為同一種。同時控制引入的js大小。例如echarts.js用echarts.min.js去引入。

• 檢查是否使用了老版本組件。建議將組件均更新為最新版本，並且在更新群組件前複製一份可視化應用作為備份。

效能最佳化常見問題