This is an attempt to compare the rendering performance of the Virtual Dom with three different implementations for style.

• HTML with CSS classes (only CSS classes handled by VDOM)
• HTML with inline style (all style is handled by VDOM)
• Style Elements (stylish elephants)
• elm-css (rtfeldman/elm-css with inline styles)

The rendering times are logged to the console and performance timeline (Chrome).
Three different metrics are logged:

• Build VDOM: This is the view function in the Elm program.
• Diff: The diffing of VDOM
• Apply: Applying the diff to the "real" DOM.

Use implementation:

Repeat the accordion this many times:

This will render 30 frames and measure the time between each animation frame. On each frame the next accordion is opened.

Run Test

---

Hit start to run test