To measure the impact of performance improvements and help guard against regressions, we run a suite of performance tests with each JET release. The test results are displayed in a table, where each row has a test link, times for the last few releases, the percentage delta for the last release, and a spark chart showing the trend over all previous releases. As we've introduced new components and functionality, the results table now has over 200 rows, each of which renders a spark chart. Even though each spark chart renders quickly (6-7ms), rendering 200 of them produces an noticeable delay.


Instead of waiting for all the spark charts, we can defer their rendering by wrapping the spark data array in a Promise. Since the Promise will be fulfilled asynchronously, the table content will be rendered before the spark charts, allowing the user to start using the table much sooner:

<div data-bind="ojComponent: {
  component: 'ojSparkChart',
  trackResize: 'off',
  items: Promise.resolve([
    $data['1.0.0'], $data['1.0.1'], $data['1.0.2'],
    $data['1.1.0'], $data['1.1.1'], $data['1.1.2'],
    $data['1.2.0'], $data['2.0.0'], $data['2.0.1'], $data['2.0.2'],
    $data['trunk'], time
}" style="width: 140px; height: 30px;">


While we had actually added Promise support to help with rendering data that needs to be fetched or manipulated, this is a neat trick that can also be used with our other visualization components. It can also be used in more creative ways, such as to only defer (or further delay) the rendering of offscreen content or to render a simplified data set that becomes more detailed on a hover or click.


For more details, see the JS documentation for the spark chart: