3 ms·
That doesn't make sense...the browser always does the rendering of the dom. Not react. React speed when keeping your states and data in sync is that React make
by kalcode 9y ago
That doesn't make sense...the browser always does the rendering of the dom. Not react.
React speed when keeping your states and data in sync is that React makes all changes to the virtual dom then it makes it to the browser dom.
It not different then the concept of batching graphic changes in a 2d game. You blit batches of sprites that need to be changed around the same frame instead of making 500 draw calls you make 1.
Instead of the developer worrying about trying to gather all their dom changes dependent on user interaction and data syncing you interact directly with Reacts vDom and then react takes care of making the dom changes.
Virtual dom frameworks are a huge thing now cause UX/UI are more complex and we were fighting those issue before. Angular, Ember now, Vue, react ect cause we get speed back when making many state changes to our UI.
This has nothing to do with Atom.
- taternuts 9y agoIf a bottleneck is dom manipulation, then something that smartly batches them and reduces the number of times it's called would help. How would that not apply to Atom?
- tylerhou 9y agoThe article says this: > In May, we rewrote Atom’s text rendering system from scratch, with the goal of making DOM updates after keystrokes as efficient as possible. We made use of the latest DOM technologies and rendering techniques, and built a tiny React-like library called etch that allows us to structure our rendering code cleanly while still allowing for imperative DOM manipulation for maximal performance in certain code paths. The result is that when typing, typical DOM updates now take less than 5 milliseconds: well within the range required for smooth animation and low energy usage. Emphasis is mine.
- kalcode 9y agoBecause they already implemented something similar as per the blog post. React has an implementation of a virtual Dom. They don't have to use react to do that and as discussed in the blog that is the major slow down on their UI.
- kalcode 9y ago*wasn't one of the major slow downs