Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
In VDOM we Trust; unraveling the mystery of Vir...
Search
shortdiv
July 21, 2017
Programming
0
32
In VDOM we Trust; unraveling the mystery of Virtual DOM
shortdiv
July 21, 2017
Tweet
Share
More Decks by shortdiv
See All by shortdiv
Supercharge Your Maps
shortdiv
3
98
Other Decks in Programming
See All in Programming
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
500
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
120
dynamic!
moro
9
6.9k
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
950
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
620
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
650
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.1k
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
3
1.3k
Catch Up: Go Style Guide Update
andpad
0
200
Serena MCPのすすめ
wadakatu
4
930
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
200
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
96
6.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Building Adaptive Systems
keathley
43
2.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
BBQ
matthewcrist
89
9.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
GraphQLとの向き合い方2022年版
quramy
49
14k
Speed Design
sergeychernyshev
32
1.1k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Transcript
Unraveling the mystery of VDOM In VDOM We Trust; Divya
Sasidharan
Web Developer @ KnightLab Divya Sasidharan @shortdiv
The problem How browsers work Virtual DOM Why Virtual DOM
Overview
The Problem: How Browsers render state
☕
OR
None
OR
None
Internal State => Screen
Browsers… How do they work?
DOM Tree Render Tree HTML DOM Parser CSS Parser Styles
Attach Paint Layout
DOM CSS Object Model html head body div body div
3:45pm color: black body div color: black 3:45pm Render Tree +
(adjective re.flow ) An event as a result of changes
that affect the layout of a portion of the page. Reflow
3:46pm body div color: black 3:45pm Reflow
(adjective re·paint ) An event as a result of changes
made to element visibility. Repaint
color: red body div 3:45pm color: black Repaint
Beware the Reflow/Repaint
None
<span class=“clock”></span> const clock = document.querySelector('.clock') clock.innerHTML = new Date().toLocaleTimeString()
setInterval(() => { clock.innerHTML = new Date().toLocaleTimeString() }, 1000) index.html index.js Vanilla JS™
Vanilla JS var heroes = [ {name: 'Daredevil', universe: 'netflix'},
{name: 'Ironman', universe: 'movie'}, {name: 'Jessica Jones', universe: 'netflix'}, {name: 'Thor', universe: 'movie'}, {name: 'Luke Cage', universe: ‘netflix’}, {name: ‘Doctor Strange', universe: ‘movie’} ] ™
Vanilla JS <input id=‘all’ type=‘radio’> <label for=‘all’>All</label> <input id=‘movie’ type=‘radio’>
<label for=‘movie’>Movie</label> <input id=‘netflix’ type=“radio”> <label for=‘netflix'>Netflix</label> <ul class="superheroes"> <li>Daredevil</li> <li>Ironman</li> <li>Jessica Jones</li> <li>Thor</li> <li>Luke Cage</li> </ul> Daredevil Ironman Jessica Jones Thor Luke Cage Marvel Cinematic Universe Movie Netflix All ™
Reflow + Repaint Repaint Render: 367.7ms Paint: 258.0ms Render: 443.7ms
Paint: 107.7ms https://jsfiddle.net/shortdiv/pvr39uwk/ https://jsfiddle.net/shortdiv/jc6Ldkk6/
Model View MVC
Model action controller View
state component
MVC <div data-bind=“text: time”> function viewModel() { var self =
this this.time = ko.observable(new Date().toLocaleTimeString()) this.tick = function() { self.time(new Date().toLocaleTimeString()) } setInterval(self.tick, 1000) } ko.applyBindings(new viewModel()); index.html index.js
Vanilla JS KOJS Render: 236.1ms Paint: 36.7ms Render: 231.0ms Paint:
32.9ms https://jsfiddle.net/shortdiv/fLos0e29/ https://jsfiddle.net/shortdiv/dL5np1mr/
Vanilla JS KOJS Render: 367.7ms Paint: 258.0ms Render: 382.7ms Paint:
120.4ms https://jsfiddle.net/shortdiv/pvr39uwk/ https://jsfiddle.net/shortdiv/tt92Lnb5/
state component component component component component component
action view controller model model model model view view view
view model
None
Virtual DOM
Model Virtual DOM DOM
Model Virtual DOM DOM
But isn’t that slow?
Game state / input Game logic Scene IR Render OpenGL
ops GFX card App state / events Components Virtual DOM Compute DOM operations Browser https://www.youtube.com/watch?v=-DX3vJiqxm4
Let’s Do the Numbers.
Daredevil Ironman Jessica Jones Thor Luke Cage Marvel Cinematic Universe
Movie Netflix All
Vanilla JS Virtual DOM Render: 414.5ms Paint: 180.1ms Render: 311.3ms
Paint: 85.5ms https://jsfiddle.net/shortdiv/rzyf4sps/ https://jsfiddle.net/shortdiv/dpqoLntj/
KOJS Virtual DOM Render: 382.7ms Paint: 120.4ms Render: 311.3ms Paint:
85.5ms https://jsfiddle.net/shortdiv/tt92Lnb5/ https://jsfiddle.net/shortdiv/dpqoLntj/
Example Time!
function render(time) { return ( new virtualDom.VNode(‘span’, {className: "clock"}, [
new virtualDom.VText(time) ]) ) } var vTree = render(new Date().toLocaleTimeString()); index.js
function render(time) { return ( new virtualDom.VNode(‘span’, {className: "clock"}, [
new virtualDom.VText(time) ]) ) } var vTree = render(new Date().toLocaleTimeString()); var rootNode = virtualDom.create(vTree); document.body.appendChild(rootNode); index.js
<div> 12:45pm </div>
function render(time) { return ( new virtualDom.VNode(‘div', {className: "clock"}, [
new virtualDom.VText(time) ]) ) } var vTree = render(new Date().toLocaleTimeString()); var rootNode = virtualDom.create(vTree); document.body.appendChild(rootNode); setInterval(function() { var time = new Date().toLocaleTimeString() var newVTree = render(time); var patches = virtualDom.diff(vtree, newVTree); rootNode = virtualDom.patch(rootNode, patches); vtree = newTree; }, 1000) index.js
Diff (noun \ˈdif\) Compare the current virtual tree with the
new virtual tree to identify changes
Old Tree New Tree
Append node Remove node Change node
Append a Node ?
Remove a Node ?
Change a Node
But what if nodes aren’t in order?
<h2>Marvel Netflix Original</h2> <ul class=“superheroes"> <li> <img src=“#”> <p>Daredevil</p> </li>
<li> <p>Iron Fist</p> </li> <li> <img src=“#”> <p>Jessica Jonas</p> </li> <li> <img src=“#”> <p>Luke Cage</p> </li> </ul> Luke Cage Iron Fist Jessica Jones Daredevil Marvel Netflix Original
ul li img p li img p li p li
img p ul li img p li img p li img p li img p Old Tree New Tree
Nodes not in order ul li li li li p
img p img p p img text text text text ul li li li li p img p img p img p img text text text text ?
Keys <ul class=“superheroes"> <li> <img src=“#”> <p key=“daredevil”>Daredevil</p> </li> <li>
<p key=“iron-fist”>Iron Fist</p> </li> <li> <img src=“#”> <p key=“jessica-jones”>Jessica Jones</p> </li> <li> <img src=“#”> <p key=“luke-cage”>Luke Cage</p> </li> </ul>
Nodes not in order ul li li li li p
img p img p p img text text text text ul li li li li p img p img p img p img text text text text ?
Why Virtual DOM
State Manager Agnostic
Browser independent
Testable
Keep Calm And Trust in VDom
Thanks! @shortdiv