GithubHelp home page GithubHelp logo

Comments (1)

radekmie avatar radekmie commented on May 25, 2024 2

I've looked into it over the week, and I have a problem on how to approach it.

  • On the one hand, we'd like to measure the performance change in a real-life scenario. That involves a complete data change -> render -> DOM change cycle. However, the non-DOM operations take so little computation here, that it's barely visible in the profiler.
  • On the other, we could focus on the underneath helpers, like Spacebars.dot. However, as written above, in a real-life scenario, these account for 1-3% of CPU.

I did prepare a basic example that rerenders a lot of times on click.

Templates 
<head>
  <title>blaze-benchmarks</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  {{> benchmark template='let_alias' iterations=1000}}
  {{> benchmark template='let_object_shallow' iterations=1000}}
  {{> benchmark template='let_object_deep' iterations=1000}}
</body>

<template name="benchmark">
  <button>Run</button>
  <code style="display: inline-block; width: 20ch"><b>{{template}}</b></code>
  {{#if summary}}
    <code>{{summary}}</code>
  {{/if}}
  <br>

  <div style="display: none">
    {{> Template.dynamic data=data template=template}}
  </div>
</template>

<template name="let_alias">
  {{#let x=a}}{{x}}{{/let}}
</template>

<template name="let_object_shallow">
  {{#let x=a.b}}{{x}}{{/let}}
</template>

<template name="let_object_deep">
  {{#let x=a.b.c.d.e.f}}{{x}}{{/let}}
</template>
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

import './main.html';

const values = new ReactiveVar({
  a: { b: { c: { d: { e: { f: '' } } } } }
});

Template.benchmark.onCreated(function () {
  this.summary = new ReactiveVar(null);
});

Template.benchmark.events({
  'click button'(event, { data: { iterations }, summary }) {
    const timings = [];

    // Warmup.
    for (let iteration = 0; iteration < iterations; ++iteration) {
      values.dep.changed();
      Tracker.flush();
    }

    // Measurement.
    for (let round = 0; round < 100; ++round) {
      const now = performance.now();
      for (let iteration = 0; iteration < iterations; ++iteration) {
        values.dep.changed();
        Tracker.flush();
      }
      timings.push(performance.now() - now);
    }

    // Summary.
    const ps = [25, 50, 90, 95];
    timings.sort();
    summary.set(ps.map(p => `p${p}=${Math.floor(timings[p - 1])}`).join(' '));
  },
});

Template.benchmark.helpers({
  data: () => values.get(),
  summary: () => Template.instance().summary.get(),
});

But, as expected, these all take basically the same amount of time.
UI

What do others think about it?

from blaze.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.