O POWER BI É PARA VOCÊ

Este artigo abordará técnicas sobre como um desenvolvedor pode alcançar um alto desempenho ao renderizar visuais.

Ninguém quer que um visual leve muito tempo para ser renderizado e usar o máximo de desempenho que pode ser obtido com a codificação se torna crítico durante a renderização.

 Observação

À medida que continuamos aprimorando a plataforma, novas versões da API são lançadas constantemente. Para aproveitar a plataforma e o conjunto de recursos dos visuais do Power BI ao máximo, recomendamos que você se mantenha atualizado com a versão mais recente.

Desde a última versão 2.1, em média, houve um aprimoramento de 20% dos tempos de carregamento de visuais do Power BI.

Dicas de desempenho de visuais do Power BI

Veja a seguir algumas recomendações sobre como obter um desempenho ideal de visuais.

Usar a API de Tempo de Usuário

O uso da API de Tempo de Usuário para medir o desempenho do JavaScript do aplicativo pode ajudar você a decidir quais partes do script precisam receber uma otimização.

Para obter mais informações, confira a API de Tempo de Usuário.

Examinar loops de animação

O loop de animação redesenha os elementos inalterados?

• Problema: desenhar elementos que não mudam de quadro para quadro é um desperdício de tempo.

• Solução: atualize os quadros seletivamente.

Quando chega o momento de animar visualizações estáticas, é tentador aglomerar um código de desenho em uma função de atualização e chamá-lo repetidamente com os novos dados para cada iteração do loop de animação.

Em vez disso, considere o padrão de atualização a seguir e use um método de construtor visual para desenhar tudo que é estático; em seguida, a função de atualização só precisará desenhar os elementos de visualização que foram alterados.

 Dica

Loops de animação ineficientes geralmente são encontrados em eixos e legendas.

Nós DOM do cache

Quando um nó ou uma lista de nós é recuperado do DOM, você precisa pensar se é possível reutilizá-los em cálculos posteriores (às vezes, até mesmo na próxima iteração do loop). Desde que você não precise adicionar nem excluir nós adicionais na área relevante, o cache deles pode aprimorar a eficiência geral do aplicativo.

Para garantir que o código seja rápido e não deixe o navegador mais lento, minimize o acesso ao DOM.

• Antes:

  JavaScriptCopiar

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

• Após:

  JavaScriptCopiar

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

Evitar a manipulação do DOM

Limite a manipulação do DOM o máximo possível. Operações de inserção, como prepend(), append() e after(), são demoradas e não devem ser usadas, a menos que sejam necessárias.

Por exemplo:

JavaScriptCopiar

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

O exemplo acima pode ser acelerado com html() e pela criação da lista antecipadamente:

JavaScriptCopiar

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

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

Reconsiderar o JQuery

A limitação das estruturas JS e o uso do JS nativo sempre que possível podem aumentar a largura de banda disponível e reduzir a sobrecarga de processamento. Isso também pode limitar os problemas de compatibilidade com navegadores mais antigos.

Para obter mais informações, confira youmightnotneedjquery.com para obter exemplos alternativos de funções como show, hide, addClass do JQuery, entre outros.

Usar o Canvas ou o WebGL

Para o uso repetido de animações, considere o uso do Canvas ou do WebGL em vez do SVG. Ao contrário do SVG, com essas opções, o desempenho é determinado pelo tamanho, em vez do conteúdo.

Leia mais sobre as diferenças em SVG versus Canvas: como escolher.

Usar requestAnimationFrame em vez de setTimeout

Se você usar requestAnimationFrame para atualizar as animações na tela, as funções de animação serão chamadas antes de o navegador chamar outro redesenho.

Para obter mais informações, confira esta amostra sobre animação suave com requestAnimationFrame.