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
30
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
95
Other Decks in Programming
See All in Programming
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
Conform を推す - Advocating for Conform
mizoguchicoji
3
690
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.4k
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
130
Linux && Docker 研修/Linux && Docker training
forrep
24
4.5k
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
250
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
Immutable ActiveRecord
megane42
0
140
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.7k
CNCF Project の作者が考えている OSS の運営
utam0k
6
710
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.2k
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
530
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
960
Speed Design
sergeychernyshev
26
790
Faster Mobile Websites
deanohume
306
31k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Code Reviewing Like a Champion
maltzj
521
39k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Statistics for Hackers
jakevdp
797
220k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
It's Worth the Effort
3n
184
28k
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