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
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
620
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
7k
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
680
RailsGirls IZUMO スポンサーLT
16bitidol
0
160
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
120
技術同人誌をMCP Serverにしてみた
74th
1
610
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
890
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
470
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Navigating Team Friction
lara
187
15k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
4 Signs Your Business is Dying
shpigford
184
22k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
We Have a Design System, Now What?
morganepeng
53
7.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
A Tale of Four Properties
chriscoyier
160
23k
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