Targeted Bottleneck #1: Rule Matching

1. Parallel Cascading Style Sheets Leo Meyerovich, Chan Siu Man, Chan Siu On, Ras Bodik {lmeyerov, siuman, siuon, bodik}@eecs.berkeley.edu EECS BERKELEY PAR LAB 1 3 4 6 5 Electrical Engineering and Computer Sciences 2 P A R A L L E L C O M P U T I N G L A B O R A T O R Y “Multiprocessors are no help to TeX“ -- Knuth Targeted Bottleneck #1: Rule Matching Status Targeted Bottleneck #2: Layout • End of current phase: understanding & modeling • browser profiling • CSS layout semantics • sequential layout solving • analyzing typical page • sequential rule matching • Next phase: experimentation • parallel layout solver • parallel rule matcher, SIMD rule matcher • extending layout model Templates style documents. Properties are batched inside rules. Rules are path predicates that may apply to multiple document nodes. Given style properties on nodes, information is propagated around the tree to yield sizes, colors, positions, etc. of nodes. Solving has convoluted and long dependencies The Problem • Visual layout solving is a bottleneck for web browsers: • Network improvements (ex: 3GLTE) make the software a bottleneck • Layout slows initial response time • Layout solving blocks subsequent JavaScript manipulations • A common computational task on devices so a power concern • Hard to Optimize: • The specification is defined in English: dependencies are unclear • Core parts are undefined and/or have competing implementations • Flow-based layouts are intuitively modeled sequentially • Sequential optimizations already in place (10-15 years of work) disjunction descendantchild sibling node attributes CSS ::= (Rule ‘{‘ <property>* ‘}’)* Rule ::= E [‘,’ E]* E ::= E1 E2 | E1 ‘>’ E2 | E1 ‘+’ E2 | L L ::= [<tag> | ... | ‘#’ <id>] (‘.’ <class>)* … 1 2 4 3 The basic sequential matching algorithm examines nodes individually. It simultaneously walks up from a node and backwards from a selector. A common optimization is to initially compact the tree into a trie. Conflicts between properties from rules are are broken using a total ordering on rules. We skip this now. The Solution Proposing the First Semantics of CSS • Tree-rewrite grammar to normalize • Attribute grammar for tentative widths • Attribute grammar for final widths • Attribute grammar for heights, positions • … 5 Possible Future Work • Focus on parallelizing layout: later build outwards with langs & libs • Parallelize layout bottleneck #1: rule matching • Task-parallel design for embarrassingly parallel general case • SIMD solution for common special case • Parallelize layout bottleneck #2: layout solving • Define semantics of CSS kernel to expose structure, dependencies • Optimistically parallel solving informed by semantics Exploit Pipeline Parallelism Initial load is dominated by parsing and processing, which can also be described well by a pipeline of attribute and tree rewrite grammars. Doing so, and combining with layout grammars, provides room for both local and global optimizations. Optimize the Common Case • Trees are small and rules are quickly computed • data partitions should be big or, dispatch, fast • single node or small descendant chain common What Happens When a Page Loads? parse normalize document XML XML Explore Memoization and Adaptivity Changes to layout often only have local impact; it is unclear how to factor this in with parallelism preprocessing Average % of rule matches by selectors per rule (from 16 popular pages) parse style rule match rules • Parallel Extensions • animation operators • expose dependencies to a scripting runtime • … layout paint pixel image frame tree style tree Layout Decomposition Normalize Rearrange XML document using tree rewrite rules to simplify layout Rule match For each XML document node, find and combine style rules matching it Layout Compute box size, position, color, font, etc. of document nodes Paint Convert tree of relatively positioned atomic content into a pixel grid Rule Matching Task Decomposition • Every attribute grammar reveal 2-3 passes and thus a way to decompose based on tree structure • Downwards flows, forking on branches • Upwards flows, topological wavefront (joins) Generalize the Solver It is unclear what types of constraints CSS solves; we want to generalize our solver. • At least two simple axis for decomposition for parallelism: • Partitioning the document tree • Partitioning the rules People (UC Berkeley) SIMD Parallelism Optimistic Parallelism Where Does the CPU Time Go? By expanding a tree into a table of paths, might be able to match multiple rules to a node, or vice versa. Semantics reveal and isolate unlikely sequential dependency inducing calculation threaded through the grammar. We can wrap these in futures and optimistically decompose ignoring them, recomputing later as needed. Chan Siu Man Leo Meyerovich layout rule matching painting parsing, xml munging Chan Siu On Ras Bodik Average from slashdot, wikipedia, digg Numbers from Firefox; Microsoft reports layout/matching = 40% in IE