Partials are too slow

[mohd-akram]

While investigating why rendering a few hundred objects was incredibly slow in Handlebars, I found that the root cause is partials (profiling showed most of the time spent in invokePartialWrapper, a lot of time is also spent in extend). See the following code:

import Handlebars from 'handlebars';

const count = 10000;

// Handlebars
Handlebars.registerPartial('partial', Handlebars.compile('1234'));
const template = Handlebars.compile('{{> partial}}');

// Native
function partial() { return '1234'; }
const template2 = () => `${partial()}`;

// Warm up
for (let i = 0; i < count; i++) {
  template();
}

console.time('partial');
for (let i = 0; i < count; i++) {
  template();
}
console.timeEnd('partial');

// Warm up
for (let i = 0; i < count; i++) {
  template2();
}

console.time('native');
for (let i = 0; i < count; i++) {
  template2();
}
console.timeEnd('native');

Output:

partial: 50.114ms
native: 0.409ms

Partials are 120x times slower than a regular function call.

Extended benchmark with indenting

[mohd-akram]

Some new benchmarks with the current 4.x branch + #2041. This benchmark mimics rendering eg. a list of items using partials, where each partial calls multiple helpers. The helpers and partials are essentially no-ops to measure Handlebars overhead. With version 4.3.0, performance regressed due to the security fixes. With the new changes, we are almost back to (with a good warm up) 4.2.2 performance. Numbers:

4.2.2	4.3.0	4.7.8	4.x
20 ms	30 ms	45 ms	20 ms

const { setTimeout } = require('timers/promises');
const Handlebars = require(
  process.argv[2] ? `./handlebars-${process.argv[2]}` : './lib/index.js'
);
// https://unpkg.com/[email protected]/dist/handlebars.js
// https://unpkg.com/[email protected]/dist/handlebars.js

async function main() {
  const count = 1000;

  Handlebars.registerPartial('partial', `
  {{helper this}}
  {{helper this}}
  {{helper this}}
  {{helper this}}
  {{helper this}}
  `);

  Handlebars.registerHelper('helper', function() {
    return this + 1
  });

  const items = [];
  for (let i = 0; i < count; i++) {
    items.push(i);
  }

  const template = Handlebars.compile(`
  {{#each items}}
    {{> partial}}
  {{/each}}
  `);

  // Warm up
  for (let i = 0; i < 100; i++) {
    template({ items });
  }

  await setTimeout(500);

  console.time('partial');
  for (let i = 0; i < 10; i++) {
    template({ items });
  }
  console.timeEnd('partial');
}

main();

@nknapp

[jaylinski]

I guess we can close this issue now?

[mohd-akram]

Yes, I think this is as good as it's going to get for partials.