evento
Junte-se a nós na FabCon Vegas
31/03, 23 - 2/04, 23
O melhor evento liderado pela comunidade Microsoft Fabric, Power BI, SQL e AI. 31 de março a 2 de abril de 2025.
Registe-se hoje mesmoEste browser já não é suportado.
Atualize para o Microsoft Edge para tirar partido das mais recentes funcionalidades, atualizações de segurança e de suporte técnico.
Este artigo aborda técnicas sobre como um desenvolvedor pode alcançar alto desempenho ao renderizar seus visuais personalizados.
Ninguém quer que um visual demore muito tempo a renderizar. Fazer com que o visual seja renderizado o mais rápido possível é fundamental ao escrever o código.
Nota
À medida que continuamos a melhorar e aprimorar a plataforma, novas versões da API estão constantemente sendo lançadas. Para tirar o máximo partido da plataforma e do conjunto de funcionalidades dos elementos visuais do Power BI, recomendamos que se mantenha atualizado com a versão mais recente. Para saber qual versão você está usando, verifique a apiVersion
no arquivo pbiviz.json .
Aqui estão algumas recomendações para alcançar o desempenho ideal para o seu visual personalizado.
Um tamanho menor de plug-in visual personalizado resulta em:
Esses recursos de terceiros podem ajudá-lo a diminuir o tamanho do plugin, encontrando maneiras de remover o código não utilizado ou a agitação e divisão de código.
Meça o tempo de renderização do seu visual em várias situações para ver quais, se houver, partes do script precisam de otimização.
Use o analisador de desempenho do Power BI Desktop (View>Performance Analyzer) para verificar como seu visual é renderizado nos seguintes casos:
Se possível, compare essas medidas com as de um visual de núcleo semelhante para ver se há peças que podem ser otimizadas.
Use a API User Timing para medir o desempenho JavaScript do seu aplicativo. Essa API também pode ajudá-lo a decidir quais partes do script precisam de otimização.
Para obter mais informações, consulte Usando a API de temporização do usuário.
Instrumentação de código - Use as seguintes ferramentas de console para coletar dados sobre o desempenho do seu visual personalizado (observe que essas ferramentas são vinculadas a ferramentas externas de terceiros):
As seguintes ferramentas de desenvolvedor da Web também podem ajudar a medir o desempenho do seu visual, mas lembre-se de que elas também traçam o perfil do Power BI:
Depois de determinar quais partes do seu visual precisam de otimização, confira estas dicas.
Quando você atualiza o visual:
Quando um nó ou lista de nós é recuperado do DOM, pense se você pode reutilizá-los em cálculos posteriores (às vezes até mesmo na próxima iteração de loop). Contanto que você não precise adicionar ou excluir mais nós na área relevante, armazená-los em cache pode melhorar a eficiência geral do aplicativo.
Para garantir que seu código seja rápido e não deixe o navegador lento, mantenha o acesso ao DOM no mínimo.
Por exemplo:
Em vez de:
public update(options: VisualUpdateOptions) {
let axis = $(".axis");
}
Experimente:
public constructor(options: VisualConstructorOptions) {
this.$root = $(options.element);
this.xAxis = this.$root.find(".xAxis");
}
public update(options: VisualUpdateOptions) {
let axis = this.axis;
}
Limite ao máximo as manipulações DOM. Insira operações como prepend()
, append()
e after()
são demoradas e só devem ser usadas quando necessário.
Por exemplo:
Em vez de:
for (let i=0; i<1000; i++) {
$('#list').append('<li>'+i+'</li>');
}
Experimente:
Torne o exemplo acima mais rápido usando html()
e construindo a lista de antemão:
let list = '';
for (let i=0; i<1000; i++) {
list += '<li>'+i+'</li>';
}
$('#list').html(list);
Limite as estruturas JS e use JS nativo sempre que possível para aumentar a largura de banda disponível e reduzir a sobrecarga de processamento. Fazer isso também pode diminuir os problemas de compatibilidade com navegadores mais antigos.
Para obter mais informações, consulte youmightnotneedjquery.com para obter exemplos alternativos show
de funções como JQuery, hide
, addClass
, e muito mais.
Para o uso repetido de animações, considere usar Canvas ou WebGL em vez de SVG. Ao contrário do SVG, com essas opções, o desempenho é determinado pelo tamanho e não pelo conteúdo.
Leia mais sobre as diferenças entre SVG e Canvas: Como escolher.
Confira os seguintes sites de terceiros para obter dicas sobre como melhorar o desempenho do canvas.
Por exemplo, saiba como evitar alterações desnecessárias no estado da tela renderizando por cor em vez de posição.
Use requestAnimationFrame para atualizar suas animações na tela, para que suas funções de animação sejam chamadas antes que o navegador chame outra repintura.
O loop de animação redesenha elementos inalterados?
Em caso afirmativo, perde tempo desenhando elementos que não mudam de quadro para quadro.
Solução: atualize os quadros seletivamente.
Quando você está animando visualizações estáticas, é tentador agrupar todo o código de desenho em uma função de atualização e chamá-lo repetidamente com novos dados para cada iteração do loop de animação.
Em vez disso, considere usar um método de construtor visual para desenhar tudo estático. Em seguida, a função de atualização só precisa desenhar elementos de visualização que mudam.
Gorjeta
Loops de animação ineficientes são frequentemente encontrados em eixos e legendas.
Guia de otimização para o Power BI
Mais perguntas? Pergunte à Comunidade do Power BI.
evento
Junte-se a nós na FabCon Vegas
31/03, 23 - 2/04, 23
O melhor evento liderado pela comunidade Microsoft Fabric, Power BI, SQL e AI. 31 de março a 2 de abril de 2025.
Registe-se hoje mesmo