Optimizing AngularJS

Re:Optimizing AngularJS by wingspan on Friday November 01, 2013 @02:28AM (#6652145)

For comparison, I wondered how React would fare. Turns out it can be pretty fast. I did have to use a similar trick of breaking up the line only when the mouse is over it, but the rest is just React's architecture. See the demo here: http://jsfiddle.net/ianobermiller/tZhSp/1/

Edit: updated link, forgot to save

Edit: for more info, React takes care of reusing DOM elements, and also uses event delegation by default.

Edit: for comparision, here is a version without the optimization: http://jsfiddle.net/ianobermiller/QT9Tx/1/

[ Parent | on HN ]

Re:Optimizing AngularJS by nmb on Friday November 01, 2013 @03:03AM (#6652258)

In a conversation I had with someone on the React team, he said that when they designed it they were more inspired by highly performant 3D rendering engines (like those of Unreal/Quake) than they were by other web frameworks.

[ Parent | on HN ]

Re:Optimizing AngularJS by jordwalke on Friday November 01, 2013 @03:52AM (#6652407)

I timed the React example you posted. It looks like the unoptimized version is about 200ms by default and about 8-20ms after the optimization. The version of React I'm testing doesn't have some of the major perf benefits that React v0.5 has - so I suspect even the unoptimized test case with v0.5 would come in around 100ms. The optimized version would likely take around 8-15ms if I had to guess. I have a recent-ish macbook pro like the author.

edit: By the way, I really like the creative solution that the author discovered with mouse hovering.

[ Parent | on HN ]

Re:Optimizing AngularJS by spicyj on Friday November 01, 2013 @03:29AM (#6652347)

Cool! Any reason you didn't just add a onMouseLeave handler too? If you do you don't need the componentWillReceiveProps, which I think is a bit nicer:

http://jsfiddle.net/spicyj/DGLtv/

[ Parent | on HN ]

Re:Optimizing AngularJS by wingspan on Friday November 01, 2013 @11:11AM (#6654281)

No reason in particular, just put it together quickly. Yours is a good option since it keeps the DOM count low instead of letting it grow as you mouse around :)

[ Parent | on HN ]