上一篇

下一步

优化嵌入体验

已完成

可以使用两种方法来优化嵌入体验：启动和分阶段嵌入。

使用 bootstrap

使用 powerbi.bootstrap(embedContainer, config) 函数实现更快的嵌入性能。 此函数在设置所需的所有配置参数前准备并初始化 iframe 元素。 设置所有配置参数后，应调用 powerbi.embed(embedContainer, config) 函数。

以下代码演示如何为 Power BI 报表准备和初始化 iframe 元素。

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

请考虑在应用网页首次加载时使用启动。 发生这种情况时，服务器端调用可以检索 Power BI 内容详细信息和访问令牌。 服务器端调用完成后，嵌入 Power BI 内容。

注意

嵌入分页报表时，无法使用启动函数。

有关详细信息，请参阅使用启动来提高性能。

使用分阶段嵌入

如果要嵌入的 Power BI 内容位于应用的其他页面上，有一种替代技术可加快嵌入和改进用户体验。

注意

在同一页上嵌入时，我们建议使用启动技术（如前文所述），因为它速度更快。

使用 powerbi.preload(config) 函数传入仅包含 type 和 embedUrl 属性的最小配置对象。 embedUrl 值应为基 URL，这意味着它不需要特定的项目 ID。 预加载有助于在用户导航到页面之前下载嵌入 Power BI 内容所需的脚本，从而加快嵌入速度。

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

let element = powerbi.preload(config);

预加载完成时触发 preloaded 事件

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

使用 powerbi.load(embedContainer, config) 函数在显示内容之前在 div 元素中动态更改设置。 例如，可以使用此函数获取有关报表页的信息，然后确定要向用户显示的页面。 如果使用此函数，还必须调用 powerbi.render() 函数才能显示嵌入的内容。

load 和 render 函数结合使用可生成与 embed 函数相同的结果。

虽然必须结合使用 load 和 render 函数，但 preload 独立于它们。 可以使用 embed 函数在预加载后显示嵌入的对象。 还可以通过以此顺序调用 preload、load 和 render，以利用完整阶段的过程。

有关详细信息，请参阅使用分阶段嵌入。

有关其他优化文章，请参阅在 Power BI 嵌入式分析中提升性能的最佳做法。

继续