Share via

Kaliteli Power BI özel görselleri oluşturmaya yönelik performans ipuçları

  • Makale

Bu makale, bir geliştiricinin özel görsellerini oluştururken yüksek performans elde etme tekniklerini kapsar.

Kimse bir görselin işlenmesinin uzun sürmesini istemez. Görselin mümkün olan en kısa sürede işlenmesini sağlamak, kodu yazarken kritik önem taşır.

Dekont

Platformu geliştirmeye ve geliştirmeye devam ettikçe, API'nin yeni sürümleri sürekli olarak yayınlanıyor. Power BI görsellerinin platformundan ve özellik kümesinden en iyi şekilde yararlanmak için en son sürümle güncel kalmanızı öneririz. Hangi sürümü kullandığınızı öğrenmek için pbiviz.json dosyasını denetleyin apiVersion.

Özel görseliniz için en iyi performansı elde etmek için bazı öneriler aşağıdadır.

Eklenti boyutunu küçültme

Daha küçük bir özel görsel eklenti boyutu şu sonuçlara neden olur:

  • Daha hızlı indirme süresi
  • Görsel her çalıştırıldığında daha hızlı yükleme

Bu üçüncü taraf kaynaklar, kullanılmayan kodu veya ağaç sallama ve kod bölmeyi kaldırmanın yollarını bularak eklentinizin boyutunu azaltmanıza yardımcı olabilir.

Görselin işleme süresini denetleme

Varsa betiğin hangi bölümlerinin iyileştirmeye ihtiyacı olduğunu görmek için çeşitli durumlarda görselinizin işleme süresini ölçün.

Power BI Desktop performans çözümleyicisi

Screenshot of Performance Analyzer icon in main menu.

Power BI Desktop performans çözümleyicisini (Görünüm> Performans Analizi) kullanarak görselinizin aşağıdaki durumlarda nasıl işlenip işlenmeyişine bakın:

  • Görselin ilk işlemesi
  • Binlerce veri noktası
  • Tek bir veri noktası/ölçü (görsel işleme ek yükünü belirlemek için)
  • Filtreleme
  • Dilimleme
  • Yeniden boyutlandırma (performans çözümleyicisinde çalışmayabilir)

Mümkünse, iyileştirilebilir parçalar olup olmadığını görmek için bu ölçümleri benzer bir çekirdek görselle karşılaştırın.

Kullanıcı Zamanlama API'sini kullanma

Uygulamanızın JavaScript performansını ölçmek için Kullanıcı Zamanlama API'sini kullanın. Bu API, betiğin hangi bölümlerinin iyileştirilmesi gerektiğine karar vermenize de yardımcı olabilir.

Daha fazla bilgi için bkz . Kullanıcı Zamanlama API'sini kullanma.

Özel görselinizi test etmenin diğer yolları

Görselinizin hangi bölümlerinin iyileştirmeye ihtiyacı olduğunu belirledikten sonra bu ipuçlarına göz atın.

İletileri güncelleştirme

Görseli güncelleştirdiğinizde:

  • Yalnızca bazı öğeler değişmişse görselin tamamını yeniden kullanma. Yalnızca gerekli öğeleri işleme.
  • Güncelleştirmede geçirilen veri görünümünü depolayın. Yalnızca önceki veri görünümünden farklı olan veri noktalarını işleyebilirsiniz. Değişmemişlerse, yeniden değiştirmelerine gerek yoktur.
  • Yeniden boyutlandırma genellikle tarayıcı tarafından otomatik olarak yapılır ve görselin güncelleştirilmesi gerekmez.

DOM düğümlerini önbelleğe alma

DOM'dan bir düğüm veya düğüm listesi alındığında, bunları daha sonraki hesaplamalarda (bazen bir sonraki döngü yinelemesinde bile) yeniden kullanıp kullanamayacağınızı düşünün. İlgili alana daha fazla düğüm eklemeniz veya silmeniz gerekmediği sürece, bunları önbelleğe almak uygulamanın genel verimliliğini artırabilir.

Kodunuzun hızlı olduğundan ve tarayıcıyı yavaşlatmadığından emin olmak için DOM erişimini en düşük düzeyde tutun.

Örneğin:

Bunun yerine:

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

Deneyin:

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

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

DOM işlemeden kaçınma

DOM işlemelerini mümkün olduğunca sınırlayın. , append()ve after() gibi prepend()ekleme işlemleri zaman alır ve yalnızca gerektiğinde kullanılmalıdır.

Örneğin:

Bunun yerine:

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

Deneyin:

Listeyi önceden kullanarak html() ve oluşturarak yukarıdaki örneği daha hızlı hale getirin:

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

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

JQuery'nin yeniden gözden geçirilmesi

Kullanılabilir bant genişliğini artırmak ve işlem yükünüzü azaltmak için mümkün olduğunda JS çerçevelerini sınırlayın ve yerel JS kullanın. Bunu yapmak, eski tarayıcılarla ilgili uyumluluk sorunlarını da azaltabilir.

Daha fazla bilgi için bkz. JQuery' nin show, hide, addClassve daha fazlası gibi işlevler için alternatif örnekler için youmightnotneedjquery.com.

Animasyon

Animasyon seçenekleri

Animasyonların tekrar tekrar kullanılması için SVG yerine Canvas veya WebGL kullanmayı göz önünde bulundurun. SVG'den farklı olarak, bu seçeneklerle performans içerik yerine boyuta göre belirlenir.

SVG ile Tuval arasındaki farklar hakkında daha fazla bilgi edinin: Nasıl Seçilir?

Tuval performansı ipuçları

Tuval performansını iyileştirmeye yönelik ipuçları için aşağıdaki üçüncü taraf sitelerine göz atın.

Örneğin, konum yerine renge göre işleyerek gereksiz tuval durumu değişikliklerini önlemeyi öğrenin.

Animasyon işlevleri

Ekran animasyonlarınızı güncelleştirmek için requestAnimationFrame kullanın; böylece tarayıcı başka bir yeniden boyama çağırmadan önce animasyon işlevleriniz çağrılır.

Animasyon döngüleri

Animasyon döngüsü değişmemiş öğeleri yeniden çizer mi?

Bu durumda, çerçeveden çerçeveye değişmeyen öğeleri çizmek zaman kaybına neden olur.

Çözüm: Çerçeveleri seçmeli olarak güncelleştirin.

Statik görselleştirmeleri canlandırırken, tüm çizim kodunu tek bir güncelleştirme işlevinde bir araya getirmek ve animasyon döngüsünün her yinelemesi için sürekli olarak yeni verilerle çağırmak caziptir.

Bunun yerine, her şeyi statik olarak çizmek için bir görsel oluşturucu yöntemi kullanmayı göz önünde bulundurun. Ardından update işlevinin yalnızca değişen görselleştirme öğeleri çizmesi gerekir.

Bahşiş

Verimsiz animasyon döngüleri genellikle eksenlerde ve göstergelerde bulunur.

Genel sorunlar

  • Metin boyutu hesaplaması: Çok fazla veri noktası olduğunda, her nokta için metin boyutunu hesaplamakla zaman kaybetmeyin. Birkaç nokta hesaplayıp tahmin edin.
  • Görselin bazı öğeleri ekranda görünmüyorsa, bunları işlemeye gerek yoktur.

İlgili içerik

Power BI için iyileştirme kılavuzu

Başka sorularınız mı var?Power BI Topluluğu sor.