120 likes | 240 Views
Rich Layout from First Principles. Specification, Generation, and Parallelization. Adam Jiang, Leo Meyerovich w ith Seth Fowler, John Ng, and RasBodik. Hot Par 2009, WWW 2010. Why Layout?. parser. 21%. parser. 43% in IE8. DOM. CSS rules. selector engine. 29%. selector engine.
E N D
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
Why Layout? parser 21% parser 43% in IE8 DOM CSS rules selector engine 29% selector engine WWW2010 9% layout engine this talk our group rendering rendering 23% laptop: … 2s mobile: … 15s JavaScript interpreter JavaScript interpreter 12% 2.4 GHz Macbook Pro, Safari 4.0.3 Slashdot, Netflix, MSNBC, Gmail, Facebook, deviantART
The Layout Problem unspecified decision to drop constraint constraints satisfied width=shrinkToFit width=shrinkToFit width=50% of parent width=50% of parent … width=200px … but strange … rest followed Standard and implementation strategy are unclear
Towards a Mechanized Layout Engine (parallel, incremental, …) parser CSS DOM layout specification (attribute grammar) CSS, JavaScript, … (LL1 grammar) grammar analyzer grammar analyzer (parallel, incremental, …) layout engine renderer
Attribute Grammars • Knuth ‘67: executable language semantics • Automation: parallel, incremental, … • Good for IDEs, compiling Pascal-like languages this.val = E0.val + E1.val + <ADD> val, … * * <E0> <E1> 1 2 3 4 val, … val, …
Is Layout Inherently Sequential? h=40 w=100, fs=12 x=0, y=0 w:100, fs:12 <body> fs, Δ, w Δ fs, Δ, w fs:50% w=100, fs=6 x=0, y=0 <p> <p> w=100, fs=12 x=0, y=10 Δ h=10 h=40 fs, Δ, w Δ fs, Δ, w fs,Δ,w w=100, fs=12 x=0, y=10 <img> <b> hello ok ok ok ok ok h=10 w=40, fs=6 x=0, y=0 h=10 w:50, float:left w=50 x=0, y=10 h=20 fs, Δ, w w=30, fs=12 x=50, y=10 h=10 world
Dependencies prevent parallelism h=40 w=100, fs=12 x=0, y=0 w:100, fs:12 <body> fs, Δ, w Δ Δ fs, Δ, w fs, Δ, w fs:50% w=100, fs=6 x=0, y=0 <p> <p> w=100, fs=12 x=0, y=10 w=100, fs=12 x=0, y=10 Δ h=10 h=40 fs, Δ, w Δ Δ fs, Δ, w fs, Δ,w w=100, fs=12 x=0, y=10 <img> <b> hello ok ok ok ok ok h=10 w=40, fs=6 x=0, y=0 h=10 w=40, fs=6 x=0, y=0 h=10 w:50, float:left w=50 x=0, y=10 h=20 fs, Δ, w w=30, fs=12 x=50, y=10 h=10 world
Parallelism from isolating dependencies h=40 w=100, fs=12 x=0, y=0 w:100, fs:12 <body> fs, Δ, w Δ fs, Δ, w fs, Δ, w fs:50% w=100, fs=6 x=0, y=0 <p> <p> w=100, fs=12 x=0, y=10 Δ h=10 h=40 fs, Δ, w Δ fs, Δ, w fs, Δ,w fs, Δ, w w=100, fs=12 x=0, y=10 <img> <b> hello ok ok ok ok ok h=10 w=40, fs=6 x=0, y=0 h=10 w:50, float:left w=50 x=0, y=10 h=20 fs, Δ, w fs, Δ, w w=30,fs=12 x=50, y=10 h=10 w=30, fs=12 x=50, y=10 h=10 world
innerNode leafNode topNode x w h x w h fa d self ( child1.x := self.x + 23 ) x w h x w h child1 : Node • Compute local dependencies • Compute transitive dependencies • for all layouts in this grammar, if dep(a, b, … z), then E(a, b), E(b, c), … • Schedule by stitching together (topological sort)
Automatic Incrementalization of Rendering Render img1 Render img2 … Move display list Move display list 2 Render img-n Render img1 … Render img-n Render imgz … Render imgm (John)
Takeaway • 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..) tables floats box layout declarative grammar C++ visitor (ANTLR, …) DAGs? speculative parallelism?