可创建高品质 Power BI 自定义视觉对象的性能提示

本文将介绍有关开发人员在呈现其自定义视觉对象时如何实现高性能的技术。

没人希望在呈现视觉对象时花费太多时间。 于是在编写代码时设法使视觉对象尽快呈现变得非常重要。

备注

随着我们不断改进和增强平台，新版本的 API 会不断发布。 若要充分利用 Power BI 视觉对象的平台和功能集，建议使用最新版本来保持最新状态。 若要了解正在使用的版本，请检查 pbiviz.json 文件中的 apiVersion。

下面是最大程度实现自定义视觉对象性能的一些建议。

使用用户计时 API

使用用户计时 API 度量应用的 JavaScript 性能可帮助确定需要优化的脚本部分。

有关详细信息，请参阅用户计时 API。

查看动画循环

动画循环是否会重绘未更改的元素？

如果会，这会浪费时间来绘制不会逐帧更改的元素。

解决方案：有选择地更新帧。

当对静态可视化效果进行动画处理时，将所有绘制代码集中到一个更新函数中，并为动画循环的每次迭代使用新数据重复调用它，这种做法听起来极富吸引力。

请考虑使用视觉对象构造函数方法绘制所有静态内容。 然后，更新函数只需绘制会更改的可视化效果元素。

提示

低效的动画循环通常出现在轴和图例中。

缓存 DOM 节点

从 DOM 检索节点或节点列表时，请考虑是否可以在以后的计算（有时甚至是下一次循环迭代）中重用它们。 只要不需要在相关区域添加或删除更多节点，缓存它们便可以提高应用程序的整体效率。

若要确保代码速度快且不会降低浏览器的速度，请将 DOM 访问保持在最低限度。

“缓存 DOM 节点”示例

勿：

Javascript复制

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

而是尝试：

Javascript复制

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

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

避免 DOM 操作

尽可能限制 DOM 操作。 插入操作（如 prepend()、append() 和 after()）非常耗时，除非必要，否则不应使用。

DOM 操作示例

不是：

Javascript复制

for (let i=0; i1000; i++) { 
    $('#list').append(''+i+'');
}

尝试：

通过使用 html() 并预先生成列表，加快上述示例过程：

Javascript复制

let list = ''; 
for (let i=0; i1000; i++) { 
    list += ''+i+''; 
} 

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

重新考虑 JQuery

尽可能限制 JS 框架并使用本机 JS，以增加可用带宽并降低处理开销。 这样做还可能降低旧版浏览器的兼容性问题。

有关详细信息，请参阅 youmightnotneedjquery.com，以获取 JQuery show、hide、addClass 等函数的替代示例。

使用画布或 WebGL

若要重复使用动画，请考虑使用画布或 WebGL 而不是 SVG。 与 SVG 不同，使用这些选项时，性能取决于大小而不是内容。

若要详细了解差别，请参阅 SVG 与画布：如何选择。

使用 requestAnimationFrame 而不是 setTimeout

如果使用 requestAnimationFrame 更新屏幕动画，则会在浏览器调用另一个重新绘制之前调用动画函数。

有关详细信息，请参阅有关使用 requestAnimationFrame 平滑动画的此示例。