分享方式：

建立品質 Power BI 自訂視覺效果的效能秘訣

  • 文章

本文涵蓋開發人員在轉譯自訂視覺效果時如何達到高效能的技術。

沒有人希望視覺效果需要很長的時間才能轉譯。 撰寫程式碼時，讓視覺效果儘快轉譯非常重要。

注意

隨著我們持續改善和增強平臺，會持續發行新版本的 API。 為了充分利用 Power BI 視覺效果的平臺和功能集，建議您隨時掌握最新版本。 若要找出您所使用的版本，請檢查 apiVersion pbiviz.json 檔案中的 。

以下是一些針對自訂視覺效果達到最佳效能的建議。

減少外掛程式大小

較小的自訂視覺效果外掛程式大小會導致：

  • 更快的下載時間
  • 每當視覺效果執行時，安裝速度會更快

這些協力廠商資源可協助您減少外掛程式大小，方法是尋找移除 未使用的程式碼 或 樹狀結構搖搖和程式碼分割 的方法。

檢查視覺效果的轉譯時間

在各種情況下測量視覺效果的轉譯時間，以查看腳本中哪些部分需要優化。

Power BI Desktop 效能分析器

Screenshot of Performance Analyzer icon in main menu.

使用 Power BI Desktop 效能分析器 （ View > 效能分析器 ） 來檢查您的視覺效果在下列案例中的呈現方式：

  • 視覺效果的第一次轉譯
  • 數千個資料點
  • 單一資料點/量值（判斷視覺效果轉譯額外負荷）
  • 篩選
  • 切片
  • 調整大小 （可能無法在效能分析器中運作）

可能的話，請比較這些度量與類似核心視覺效果的量值，以查看是否有可優化的元件。

使用使用者計時 API

使用使用者計時 API 來測量您應用程式的 JavaScript 效能。 此 API 也可以協助您決定腳本哪些部分需要優化。

如需詳細資訊，請參閱 使用使用者計時 API 。

測試自訂視覺效果的其他方式

一旦您判斷視覺效果的哪些部分需要優化，請查看這些秘訣。

更新訊息

當您更新視覺效果時：

  • 如果只有某些元素已變更，請勿重新呈現整個視覺效果。 只轉譯必要的元素。
  • 儲存在更新時傳遞的資料檢視。 只轉譯與先前資料檢視不同的資料點。 如果他們尚未變更，就不需要重新調整它們。
  • 調整大小通常是由瀏覽器自動完成，而且不需要更新視覺效果。

快取 DOM 節點

從 DOM 擷取節點或節點清單時，請考慮您是否可以在稍後的計算中重複使用它們（有時甚至是下一個迴圈反復專案）。 只要您不需要在相關區域中新增或刪除更多節點，快取即可提升應用程式的整體效率。

若要確定您的程式碼快速且不會讓瀏覽器變慢，請讓 DOM 存取保持在最低狀態。

例如：

而不是：

public update(options: VisualUpdateOptions) { 
    let axis = $(".axis"); 
}

請嘗試：

public constructor(options: VisualConstructorOptions) { 
    this.$root = $(options.element); 
    this.xAxis = this.$root.find(".xAxis"); 
} 

public update(options: VisualUpdateOptions) { 
    let axis = this.axis; 
}

避免 DOM 操作

盡可能限制 DOM 操作。 、 append() 和 after() 之類的 prepend() 插入作業 非常耗時，而且只在必要時才應該使用。

例如：

而不是：

for (let i=0; i<1000; i++) { 
    $('#list').append('<li>'+i+'</li>');
}

請嘗試：

使用並事先建置清單，讓上述範例更快速 html() ：

let list = ''; 
for (let i=0; i<1000; i++) { 
    list += '<li>'+i+'</li>'; 
} 

$('#list').html(list);

重新考慮 JQuery

請限制 JS 架構，並盡可能使用原生 JS 來增加可用的頻寬，並降低處理額外負荷。 這樣做也可能降低舊版瀏覽器的相容性問題。

如需詳細資訊，請參閱 youmightnotneedjquery.com ，以取得 JQuery 、 show 、 hideaddClass 等函式的替代範例。

動畫

動畫選項

若要重複使用動畫，請考慮使用 Canvas 或 WebGL ，而不是 SVG。 不同于 SVG，使用這些選項效能取決於大小而非內容。

深入瞭解 SVG 與畫布的差異 ：如何選擇 。

畫布效能秘訣

如需改善畫布效能的秘訣，請參閱下列協力廠商網站。

例如，瞭解如何 藉由色彩轉譯而不是位置來避免不必要的畫布狀態變更 。

動畫函式

使用 requestAnimationFrame 來更新螢幕動畫，因此在瀏覽器呼叫另一個重繪之前 ，會先呼叫 您的動畫函式。

動畫迴圈

動畫迴圈會重新繪製未變更的專案嗎？

如果是的話，它會浪費時間繪製不會從畫面到畫面的元素。

解決方案：選擇性地更新畫面。

當您以動畫顯示靜態視覺效果時，想要將所有繪製程式碼合併成一個更新函式，並針對動畫迴圈的每個反復專案重複呼叫它。

相反地，請考慮使用視覺化建構函式方法來繪製所有靜態專案。 然後，update 函式只需要繪製變更的視覺效果元素。

提示

在軸和圖例中通常發現沒有效率的動畫迴圈。

常見問題

  • 文字大小計算：當有許多資料點時，請勿浪費時間計算每個點的文字大小。 計算幾點，然後估計。
  • 如果顯示中看不到視覺效果的某些元素，就不需要轉譯它們。

相關內容

Power BI 最佳化指南

其他問題嗎？ 詢問Power BI 社群 。