JS optimization #137

2015-10-03T23:31:38-07:00

devongovett commented

2015-10-03 23:31:38 -07:00

(Migrated from github.com)

This makes the JS version run significantly faster by improving some helper functions that get called a lot. The main optimization here is inlining the margin/padding/border property lookups, rather than using expensive string manipulation operations to compute the property to read. Additionally, checking whether a value is not null is faster than using the in operator.

I wrote a benchmark with over 10,000 nodes to test these changes. Here are the results:

new x 19.39 ops/sec ±19.66% (38 runs sampled)
old x 3.54 ops/sec ±1.12% (13 runs sampled)
new is the fastest
old is 82% slower

Also, in a more real world test, this makes window resizing smooth vs seriously janky before.

This makes the JS version run significantly faster by improving some helper functions that get called a lot. The main optimization here is inlining the margin/padding/border property lookups, rather than using expensive string manipulation operations to compute the property to read. Additionally, checking whether a value is not null is faster than using the `in` operator. I wrote a benchmark with over 10,000 nodes to test these changes. Here are the results: ``` new x 19.39 ops/sec ±19.66% (38 runs sampled) old x 3.54 ops/sec ±1.12% (13 runs sampled) new is the fastest old is 82% slower ``` Also, in a more real world test, this makes window resizing smooth vs seriously janky before.

vjeux commented

2015-10-04 07:37:23 -07:00

(Migrated from github.com)

By the way, you should also implement caching. It is implemented in the C and Java versions but not in the JS one. The way it works is that it wraps all the recursive calls of layout with a small function that checks if we've got a cached version for the same arguments, if yes return it, if not compute it, cache it and return it.

When you mutate any style attribute, you dirty the element but also all the elements upward to the root. (I think it can be upward to the first position absolute parent but never implemented it yet. It's a bit annoying as now you've got to keep track of multiple roots when you re-render)

By the way, you should also implement caching. It is implemented in the C and Java versions but not in the JS one. The way it works is that it wraps all the recursive calls of layout with a small function that checks if we've got a cached version for the same arguments, if yes return it, if not compute it, cache it and return it. When you mutate any style attribute, you dirty the element but also all the elements upward to the root. (I think it can be upward to the first position absolute parent but never implemented it yet. It's a bit annoying as now you've got to keep track of multiple roots when you re-render)

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#137