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
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
TypeScriptでDXを上げろ! Hono編
yusukebe
3
770
Porting a visionOS App to Android XR
akkeylab
0
680
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
270
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
0
120
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
190
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
300
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
400
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
200
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
12k
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
440
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
680
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.6k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Automating Front-end Workflow
addyosmani
1370
200k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
A Tale of Four Properties
chriscoyier
160
23k
Unsuck your backbone
ammeep
671
58k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Bash Introduction
62gerente
613
210k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Adopting Sorbet at Scale
ufuk
77
9.5k
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