![Page 1: Rich Layout from First Principlesparlab.eecs.berkeley.edu/sites/all/parlab/files/osq2010b.pdfRich Layout from First Principles Specification, Generation, and Parallelization Adam Jiang,](https://reader035.vdocuments.site/reader035/viewer/2022063014/5fce542145e29e21f1387c46/html5/thumbnails/1.jpg)
Rich Layout from First Principles
Specification, Generation, and Parallelization
Adam Jiang, Leo Meyerovich with Seth Fowler, John Ng, and RasBodik Hot Par 2009, WWW 2010
![Page 2: Rich Layout from First Principlesparlab.eecs.berkeley.edu/sites/all/parlab/files/osq2010b.pdfRich Layout from First Principles Specification, Generation, and Parallelization Adam Jiang,](https://reader035.vdocuments.site/reader035/viewer/2022063014/5fce542145e29e21f1387c46/html5/thumbnails/2.jpg)
2
Why Layout? parser
DOM CSS rules
selector engine
rendering
21%
23%
12%
29%
9%
JavaScript interpreter
layout engine
parser
selector engine
rendering
JavaScript interpreter
2.4 GHz Macbook Pro, Safari 4.0.3 Slashdot, Netflix, MSNBC, Gmail, Facebook, deviantART
WWW2010
our group
43% in IE8
laptop: … 2s mobile: … 15s
this talk
![Page 3: Rich Layout from First Principlesparlab.eecs.berkeley.edu/sites/all/parlab/files/osq2010b.pdfRich Layout from First Principles Specification, Generation, and Parallelization Adam Jiang,](https://reader035.vdocuments.site/reader035/viewer/2022063014/5fce542145e29e21f1387c46/html5/thumbnails/3.jpg)
The Layout Problem
width=shrinkToFit
width=50% of parent
width=200px
3
…
constraints satisfied
… but strange
unspecified decision to drop constraint
… rest followed
Standard and implementation strategy are unclear
width=shrinkToFit
width=50% of parent
![Page 4: Rich Layout from First Principlesparlab.eecs.berkeley.edu/sites/all/parlab/files/osq2010b.pdfRich Layout from First Principles Specification, Generation, and Parallelization Adam Jiang,](https://reader035.vdocuments.site/reader035/viewer/2022063014/5fce542145e29e21f1387c46/html5/thumbnails/4.jpg)
Towards a Mechanized Layout Engine
renderer
CSS DOM
(parallel, incremental, …) layout engine
layout specification (attribute grammar)
grammar analyzer
CSS, JavaScript, … (LL1 grammar)
grammar analyzer (parallel, incremental, …)
parser
4
![Page 5: Rich Layout from First Principlesparlab.eecs.berkeley.edu/sites/all/parlab/files/osq2010b.pdfRich Layout from First Principles Specification, Generation, and Parallelization Adam Jiang,](https://reader035.vdocuments.site/reader035/viewer/2022063014/5fce542145e29e21f1387c46/html5/thumbnails/5.jpg)
Attribute Grammars
• Knuth ‘67: executable language semantics
• Automation: parallel, incremental, …
• Good for IDEs, compiling Pascal-like languages
+
* *
1 2 3 4
5
<ADD>
<E0> <E1>
this.val = E0.val + E1.val
val, … val, …
val, …
![Page 6: Rich Layout from First Principlesparlab.eecs.berkeley.edu/sites/all/parlab/files/osq2010b.pdfRich Layout from First Principles Specification, Generation, and Parallelization Adam Jiang,](https://reader035.vdocuments.site/reader035/viewer/2022063014/5fce542145e29e21f1387c46/html5/thumbnails/6.jpg)
Is Layout Inherently Sequential?
<body>
<p> <p>
<img> hello <b> ok ok ok ok
world
ok
w:100, fs:12
w:50, float:left
w=100, fs=12 x=0, y=0
w=100, fs=6 x=0, y=0
w=40, fs=6 x=0, y=0 h=10
h=10
w=100, fs=12 x=0, y=10
w=50 x=0, y=10 h=20
w=30, fs=12 x=50, y=10 h=10
h=10
w=100, fs=12 x=0, y=10
h=40
h=40
fs:50%
fs, Δ, w
fs, Δ, w Δ fs,Δ,w
Δ
Δ fs, Δ, w
fs, Δ, w
fs, Δ, w
6
![Page 7: Rich Layout from First Principlesparlab.eecs.berkeley.edu/sites/all/parlab/files/osq2010b.pdfRich Layout from First Principles Specification, Generation, and Parallelization Adam Jiang,](https://reader035.vdocuments.site/reader035/viewer/2022063014/5fce542145e29e21f1387c46/html5/thumbnails/7.jpg)
Dependencies prevent parallelism
<body>
<p> <p>
<img> hello <b> ok ok ok ok
world
ok
w:100, fs:12
w:50, float:left
w=100, fs=12 x=0, y=0
w=100, fs=6 x=0, y=0
w=40, fs=6 x=0, y=0 h=10
h=10
w=100, fs=12 x=0, y=10
w=50 x=0, y=10 h=20
w=30, fs=12 x=50, y=10 h=10
h=10
w=100, fs=12 x=0, y=10
h=40
h=40
fs:50%
fs, Δ, w
fs, Δ, w Δ fs, Δ,w
Δ
Δ fs, Δ, w
fs, Δ, w
fs, Δ, w
w=40, fs=6 x=0, y=0 h=10
w=100, fs=12 x=0, y=10
Δ
Δ fs, Δ, w
7
![Page 8: Rich Layout from First Principlesparlab.eecs.berkeley.edu/sites/all/parlab/files/osq2010b.pdfRich Layout from First Principles Specification, Generation, and Parallelization Adam Jiang,](https://reader035.vdocuments.site/reader035/viewer/2022063014/5fce542145e29e21f1387c46/html5/thumbnails/8.jpg)
Parallelism from isolating dependencies
<body>
<p> <p>
<img> hello <b> ok ok ok ok
world
ok
w:100, fs:12
w:50, float:left
w=100, fs=12 x=0, y=0
w=100, fs=6 x=0, y=0
w=40, fs=6 x=0, y=0 h=10
h=10
w=100, fs=12 x=0, y=10
w=50 x=0, y=10 h=20
w=30, fs=12 x=50, y=10 h=10
h=10
w=100, fs=12 x=0, y=10
h=40
h=40
fs:50%
fs, Δ, w
fs, Δ, w Δ fs, Δ,w
Δ
Δ fs, Δ, w
fs, Δ, w
fs, Δ, w w=30,fs=12 x=50, y=10 h=10
fs, Δ, w
fs, Δ, w
fs, Δ, w
8
![Page 9: Rich Layout from First Principlesparlab.eecs.berkeley.edu/sites/all/parlab/files/osq2010b.pdfRich Layout from First Principles Specification, Generation, and Parallelization Adam Jiang,](https://reader035.vdocuments.site/reader035/viewer/2022063014/5fce542145e29e21f1387c46/html5/thumbnails/9.jpg)
x w h h x w
innerNode leafNode
fa d
topNode
self
child1 : Node x w h x w h
1. Compute local dependencies
2. Compute transitive dependencies
for all layouts in this grammar, if dep(a, b, … z), then E(a, b), E(b, c), …
3. Schedule by stitching together (topological sort)
( child1.x := self.x + 23 )
![Page 10: Rich Layout from First Principlesparlab.eecs.berkeley.edu/sites/all/parlab/files/osq2010b.pdfRich Layout from First Principles Specification, Generation, and Parallelization Adam Jiang,](https://reader035.vdocuments.site/reader035/viewer/2022063014/5fce542145e29e21f1387c46/html5/thumbnails/10.jpg)
Automatic Incrementalization of Rendering
…
Render img1
Render img2
Render img-n
Move display list
Render img1 … Render img-n
Move display list 2
Render img z … Render img m (John)
![Page 11: Rich Layout from First Principlesparlab.eecs.berkeley.edu/sites/all/parlab/files/osq2010b.pdfRich Layout from First Principles Specification, Generation, and Parallelization Adam Jiang,](https://reader035.vdocuments.site/reader035/viewer/2022063014/5fce542145e29e21f1387c46/html5/thumbnails/11.jpg)
• Attribute grammar specification promising
• New attribute grammar language
• Big benefits
Users: fast and conformant browser
Designers: analysis tools
Browser developers: separate feature from optimization
Standards: verification (well-defined, backwards compat..)
Takeaway
C++ visitor (ANTLR, …)
declarative grammar
box layout floats tables
speculative parallelism? DAGs?
![Page 12: Rich Layout from First Principlesparlab.eecs.berkeley.edu/sites/all/parlab/files/osq2010b.pdfRich Layout from First Principles Specification, Generation, and Parallelization Adam Jiang,](https://reader035.vdocuments.site/reader035/viewer/2022063014/5fce542145e29e21f1387c46/html5/thumbnails/12.jpg)
Questions?