Otimizar a experiência de incorporação

  • 3 minutos

Pode utilizar duas técnicas para otimizar a experiência de incorporação: Bootstrap e Incorporação faseada.

Utilizar o bootstrap

Obtenha um desempenho de incorporação mais rápido com a powerbi.bootstrap(embedContainer, config) função . Esta função prepara e inicializa o iframe elemento antes de todos os parâmetros de configuração necessários serem definidos. A powerbi.embed(embedContainer, config) função deve ser chamada assim que todos os parâmetros de configuração estiverem definidos.

O código seguinte mostra como preparar e inicializar o iframe elemento para um relatório do Power BI.

powerbi.bootstrap(embedContainer, { type: 'report' });

Considere utilizar o bootstrap quando a página Web da sua aplicação for carregada pela primeira vez. Enquanto isso acontece, as chamadas do lado do servidor podem obter os detalhes de conteúdo e o token de acesso do Power BI. Quando as chamadas do lado do servidor estiverem concluídas, incorpore o conteúdo do Power BI.

Diagrama do fluxo bootstrap descrito no parágrafo anterior.

Nota

Não é possível utilizar a função bootstrap ao incorporar relatórios paginados.

Para obter mais informações, veja Utilizar o bootstrap para um melhor desempenho.

Utilizar incorporação faseada

Quando o conteúdo do Power BI a incorporar estiver numa página diferente da sua aplicação, existe uma técnica alternativa para acelerar a incorporação e melhorar a experiência do utilizador.

Nota

Ao incorporar na mesma página, recomendamos a técnica bootstrap (descrita anteriormente) porque é mais rápida.

Utilize a powerbi.preload(config) função para transmitir um objeto de configuração mínimo que inclui apenas as type propriedades e embedUrl . O embedUrl valor deve ser um URL base, o que significa que não precisa de um ID de artefacto específico. O pré-carregamento ajuda a acelerar a incorporação ao transferir os scripts necessários para incorporar conteúdos do Power BI antes de o utilizador navegar para a página.

// Building the configuration object
let config = {
    type: 'report',
    embedUrl: 'https://app.powerbi.com/reportEmbed',
};

let element = powerbi.preload(config);

O preloaded evento é acionado quando o pré-carregamento está concluído

element.on('preloaded', function () {
    ...
});

Utilize a powerbi.load(embedContainer, config) função para alterar dinamicamente as definições no div elemento antes de o conteúdo ser apresentado. Por exemplo, pode utilizar esta função para obter informações sobre as páginas do relatório e, em seguida, determinar que página mostrar ao utilizador. Se utilizar esta função, também tem de chamar a powerbi.render() função para mostrar o conteúdo incorporado.

Em conjunto, as load funções e render alcançam o mesmo resultado que a embed função.

O diagrama da função de incorporação pode ser alcançado por fases com as funções de carregamento e composição.

Embora tenha de utilizar as load funções e render em conjunto, preload é independente das mesmas. Pode utilizar a embed função para mostrar o objeto incorporado após o pré-carregamento. Também pode utilizar o procedimento faseado completo ao chamar preload, loade render, por essa ordem.

Para obter mais informações, veja Utilizar incorporação faseada.

Para outros artigos de otimização, veja Melhores práticas para um desempenho mais rápido na análise incorporada do Power BI.