Code Monkey home page Code Monkey logo

meteor-web-rendering-framework-benchmark's Introduction

Benchmark for web rendering frameworks available in Meteor

This benchmark tries to compare various reactive rendering frameworks available in Meteor. It focuses on rendering large chunks of content and measuring how long it takes for them to appear in DOM. The rationale is that the user cares the most about delays in such rendering because it is often the result of their actions, like clicking on a link and waiting for a new page to render. On the other hand, updates to existing content coming from changes to data have many other delays already (like changes being detected and propagated to the client) and user also in most cases does not know when the change really occurred, to be able to perceive a delay. Of course, performance of such updates is important as well and benchmark will include them in the future (#4).

Results

Results of running it on Google Chrome v59.

Test cases

  • Other: A simple paragraph of text.
  • Table 1 and Table 2: A large table of data with many columns and rows. Contains also buttons to test attaching (and cleaning) of event handlers. The idea is that, when switching between them, ideally the rendering framework would detect that the structure of both tables is the same, and just update content, instead of rebuilding the whole structure from scratch. Of course the developer could also just update the data source to help the rendering engine, but in many cases user is switching between pages which have the same structure, and apps do not just change the data source, but render a new page with same internal components.
  • Table 1 & 2: A table where half of the content comes from Table 1 and half from Table 2. One would hope that switching between Table 1 & 2 and Table 1 or Table 2 would take half of the time of switching between Table 1 and Table 2.
  • Recursive: A large recursive structure with event handlers at the end. Both expensive to build and expensive to clean.

Running

To run benchmark, install Meteor, clone the repository, and run:

$ meteor

Open http://localhost:3000 and you will see multiple buttons to run various test cases and benchmarks. During the benchmark, you can follow progress in the console (to not interfere with DOM to display progress), and at the end a chart like the one above will be shown.

Benchmark seems pretty sensitive to load on the computer where is being run so it is best to not do anything else and keep the browser tab focuses and visible during the whole run (which can take an hour or so for all frameworks).

Contributing

Feel free to provide your frameworks and their implementations of test cases. Both optimized and non-optimized. The benchmark is trying to measure both how one would implement this as a novice, but also how an expert would optimize.

meteor-web-rendering-framework-benchmark's People

Contributors

akryum avatar arggh avatar mitar avatar veered avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Forkers

veered akryum arggh

meteor-web-rendering-framework-benchmark's Issues

Improve stability of results

Results have higher instability than what I would like. Both during multiple iterations inside one run, but also across multiple runs. Not sure how this could be improved. Maybe by running the benchmark on a dedicated machine without any other interference at the same time?

Benchmark the increase of load when the number of datasets increases

In our app we figured out, that blaze begins to slow down at around 75 entries that are rendered with the same template. After around 250 templates, it feels really laggy.

So the increase of numbers of data to render is not linear to the rendering time

I would be interested if this is also the case with other rendering engines like Vue and react.

Benchmark also data updates

Currently, we benchmark only what happens when whole structure changes (like what would happen when router changes a page), but now when structure stays the same and just data updates. We should benchmark that as well.

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.