riot-js

Open full view…

Exactly which portion of the code handles the virtual DOM?

jakiestfu
Wed, 28 Jan 2015 03:38:14 GMT

I'm curious and can't quite tell by reading the source.

Tero Piirainen
Thu, 29 Jan 2015 20:06:18 GMT

I updated the [compare](/riotjs/compare.html) document with a more accurate description: > Riot takes the expressions from the tree and stores them to an array. Each expression has a pointer to a DOM node. On each run these expressions are evaluated and compared to the values on the DOM. When a value has changed the corresponding DOM node is updated. In a way Riot also has a virtual DOM, just a much simpler one. The above is executed by the [parse](https://github.com/muut/riotjs/blob/master/lib/view.js#L135) method.

jakiestfu
Thu, 29 Jan 2015 20:24:21 GMT

Thank you, Tero!

Andrew Luetgers
Fri, 30 Jan 2015 04:51:07 GMT

"evaluated and compared to the values on the DOM" Does this mean that every time that happens you are accessing the DOM for those values? If so I thought this was slow?

Tero Piirainen
Fri, 30 Jan 2015 07:45:56 GMT

Since we already have references to the DOM nodes accessing a property value is super fast. No need to lookup or manipulate DOM. You can try on this page for example: ``` // get handle to some DOM element var img = $("img:first")[0] // start time var begin = +new Date // access DOM property value for 10 000 times for (var i = 0; i < 10000; i++) { img.getAttribute("src") } // report time console.info(+new Date - begin) ``` That took only _11ms_ on my regular laptop.

Tero Piirainen
Fri, 30 Jan 2015 07:52:29 GMT

To put it another way: accessing 1000 DOM nodes takes 1ms. So the value comparison is basically free even on a fairly big application. Coupled with cached Resig- like templates I'm pretty confident about Riot performance. I'm very interested about the upcoming benchmarks.