Otimize a experiência de incorporação

Concluído

Você pode usar duas técnicas para otimizar a experiência de incorporação: Bootstrap e Phased embedding.

Usar bootstrap

Obtenha um desempenho de incorporação mais rápido usando a powerbi.bootstrap(embedContainer, config) função. Esta função prepara e inicializa o elemento antes que iframe todos os parâmetros de configuração necessários sejam 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 a seguir mostra como preparar e inicializar o iframe elemento para um Power BI relatório.

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

Considere o uso do bootstrap quando a página da Web do seu aplicativo for carregada pela primeira vez. Enquanto isso acontece, as chamadas do lado do servidor podem recuperar os detalhes do conteúdo e o Power BI token de acesso. Quando as chamadas do lado do servidor forem concluídas, incorpore o Power BI conteúdo.

Diagrama do fluxo de bootstrap descrito no parágrafo anterior.

Nota

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

Para obter mais informações, consulte Usar bootstrap para obter melhor desempenho.

Utilizar a incorporação faseada

Quando o Power BI conteúdo a incorporar está 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 de bootstrap (descrita anteriormente) porque é mais rápida.

Use a powerbi.preload(config) função para passar um objeto de configuração mínima compreendendo apenas as type propriedades e embedUrl . O embedUrl valor deve ser uma URL base, o que significa que não precisa de um ID de artefato específico. O pré-carregamento ajuda a acelerar a incorporação baixando os scripts necessários para incorporar Power BI o conteúdo antes que o utente navegue até 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 é concluído

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

Use a powerbi.load(embedContainer, config) função para alterar dinamicamente as configurações no elemento antes que div o conteúdo seja exibido. Por exemplo, você pode usar essa função para obter informações sobre as páginas de relatório e, em seguida, determinar qual página mostrar ao utente. Se você usar essa função, você também deve chamar a powerbi.render() função para mostrar o conteúdo incorporado.

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

O diagrama da função de incorporação pode ser obtido em fases usando as funções de carga e renderização.

Embora você deva usar o load e render funções juntos, preload é independente deles. Você pode usar a embed função para mostrar o objeto incorporado após o pré-carregamento. Você também pode utilizar o procedimento completo em fases chamando preload load e render, nessa ordem.

Para obter mais informações, consulte Usar incorporação em fases.

Para outros artigos de otimização, consulte Práticas recomendadas para um desempenho mais rápido em Power BI análises incorporadas.