Power BI Blog: Better Custom Visuals

Welcome
back to this week’s edition of the Power BI blog series.  This week, we look at ways of enhancing your
custom visual’s performance.

 

If you’re interested in creating your
own visuals in Power BI, then this article is for you!  Microsoft has announced techniques to improve
the performance of custom visuals, discussing the performance improvements made
in both visual rendering and load times. 
They have identified and addressed certain bottlenecks in the code, and
these improvements are available for any visual that has been updated to API
version 4.2 and onwards.  Along with
these fixes, Microsoft has also provided code practices and techniques that can
greatly enhance the performance of rendering custom visuals.  It is recognised that getting the visual to
render as quickly as possible is critical when writing the code.

Having said all this, as the Power BI
platform continues to be improved and enhanced, new versions of the API will
constantly be released.  In order to get
the most out of the Power BI visuals’ platform and feature set, it is recommended
that you keep up-to-date with the most recent version.  To find out which version you’re using, check
the aversion in the pbiviz.json file.

In the meantime, here are some
recommendations for achieving optimal performance for your custom visual.

 

Reduce Plugin Size

A smaller custom visual plugin size
results in:

• faster download
  times
• faster installation
  whenever the visual is run.

 

Check Render Time of the Visual

Measure the render time of your visual
in various situations to see which, if any, parts of the script require optimisation.

 

Power BI Desktop Performance Analyzer

Use the Power BI Desktop Performance Analyzer(sic) (View -> Performance Analyzer) to check how your visual
renders in the following cases:

• first render of the
  visual
• thousands of data
  points
• a single data point
  / measure (to determine the visual render overhead)
• filtering
• slicing
• resizing (this may
  not work in the Performance Analyzer).

If possible, compare these measurements
with those of a similar core visual to see if there are parts that may be
optimised.

 

Use the User Timing API

Use the User Timing API to measure your
app’s JavaScript performance.  This API
can also help you decide which parts of the script need optimisation.

 

Other Ways to Test Your Custom Visual

There are various ways to test you
custom visual:

• code instrumentation:
  use the following console third party tools to gather data about your custom
  visual’s performance:
• console.log()
• console.dir()
• console.time()
• console.timeEnd()
• the following web
  developer tools may also help measure your visual’s performance, but keep in
  mind that they profile Power BI as well:
• Metrics
• JavaScript profiler.

Once you determined which parts of your
visual need optimisation, you can then implement these further tips.

 

Update Messages

When you update the visual:

• don’t re-render the
  entire visual if only some elements have changed.  Render only the necessary elements
• store the data view
  passed on update.  Render only the data
  points that are different from the previous data view.  If they haven’t changed, there’s no need to re-render
  them
• resizing is often
  done automatically by the browser and doesn’t require an update to the visual.

 

Cache DOM Nodes

When a node or list of nodes is
retrieved from the DOM (Data Object Model), think about whether you can reuse
them in later computations (sometimes even the next loop iteration).  As long as you don’t need to add or delete
more nodes in the relevant area, caching them can improve the application’s
overall efficiency.

To make sure that your code is fast and
doesn’t slow down the browser, keep DOM access to a minimum.  For example, instead of:

Avoid DOM Manipulation

Limit DOM manipulations as much as
possible.  Insert operations like prepend(),append() and after() are time-consuming and should only be used
when necessary.  For example, iInstead
of:

try making the above example faster by
using html() and building the list beforehand:

Reconsider JQuery

Limit JS frameworks and use native JS
whenever possible to increase the available bandwidth and lower your processing
overhead.  Doing this might also decrease
compatibility issues with older browsers.

 

Animation Options

For repeated use of animations, consider
using Canvas or WebGL instead of SVG.  Unlike
SVG, with these options, performance is determined by size rather than content.

 

Canvas Performance Tips

You should read up on third party sites
for tips on improving canvas performance, such as”

• faster load times
• improving HTML5
  Canvas performance
• optimising canvas
  generally.

 

Animation Functions

Use requestAnimationFrame to
update your on-screen animations, so your animation functions are called before
the browser calls another repaint.

 

Animation Loops

Does the animation loop redraw
unchanged elements?  If so, it wastes
time drawing elements that don’t change from frame-to-frame.  Instead, you should update the frames
selectively.

When you’re animating static visualisations,
it’s tempting to lump all the draw code into one update function and repeatedly
call it with new data for each iteration of the animation loop.  Instead, consider using a visual constructor
method to draw everything static.  Then,
the update function only needs to draw visualisation elements that change.

In particular, Microsoft has noted that
inefficient animation loops are often found in axes and legends.

 

Common issues

• Text size
  calculation: when there are a lot of data points, don’t waste time calculating
  text size for each point.  Calculate a
  few points and then estimate
• If some elements of
  the visual aren’t seen in the display, there’s not need to render them.

 

In the
meantime, please remember we offer training in Power BI which you can find out
more about here.  If you wish to catch up on past articles, you
can find all of our past Power BI blogs here.