How Servo Renders the Web
•Download as PPTX, PDF•
1 like•390 views
Servo is a new prototype web browser layout engine written in Rust that was launched by Mozilla in 2012 with a new architecture to achieve high parallelism on components like layout and painting. The current supported CSS properties allow Servo to be mostly operational on static sites like Wikipedia and GitHub, with a surprisingly small code footprint. The objective of this talk is to describe its architecture in high level, source code organization and how to get started hacking and contributing to Servo. The implementation of a visual CSS feature will be explained as also considerations about Servo future roadmap.
Recommended
More Related Content
Similar to How Servo Renders the Web
Similar to How Servo Renders the Web (20)
Recently uploaded
Recently uploaded (20)
How Servo Renders the Web
- 1. 1 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Adenilson Cavalcanti BSc MSc WebKit & Blink committer W3C CSS WG member How Servo renders the Web
- 2. 2Open Source Group – Samsung Research America (Silicon Valley) © 2014 Samsung Electronics Co. Summary Motivation Rust and Servo Concepts of Browser engines Servo high level architecture Anatomy of a CSS feature
- 3. 3 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) • All modern browser engines were designed 15 years ago (KHTML, WebKit, Gecko, Blink). • They fail to exploit full parallelism. • Both in mobile and desktop we expect more cores (but not faster clocked CPUs). Motivation
- 4. 4 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) • Single-threaded: • Javascript execution • Layout • Painting/rasterization • Security issues derived from C/C++. • Huge code bases. Issues of current browser engines
- 5. 5 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) • New browser engine written in Rust. • Parallel: layout, painting, selector matching. • Targeting performance and battery saving. Servo
- 6. 6 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Demo Running servo.
- 7. 7 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Implementation strategy • Rewrite layout, rendering, HTML/CSS parsing, networking, core engine glue. • Reuse JavaScript engine, EME containers, graphics library, fonts. • Bootstrap with OpenSSL, image libraries, etc.
- 8. 8 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) • Over 120 CSS properties are supported. • Rendering real sites near correctly. • Competitive perf in benchmarks. • 2x-3x speedups on 4 cores. Servo status
- 9. 9 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Rust
- 10. 10 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) What is Rust? https://www.youtube.com/watch?v=oKwub2OpsG4
- 11. 11 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Why Rust? • It aims to solve some gruesome issues in C/C++. • Be more expressive for hard tasks. • Safety X performance: have both! The case for Rust
- 12. 12 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) • Compiled language (uses llvm). • Memory safety. • Concurrency. • Parallelism. Rust features
- 13. 13 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) C++ x Rust
- 14. 14 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) C++ example: anything wrong here? http://doc.rust-lang.org/nightly/intro.html#ownership
- 15. 15 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Run on valgrind: warnings
- 16. 16 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Using gdb to understand what is happening…
- 17. 17 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Address: 0x100103af0 Address
- 18. 18 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Change! Now: 0x100103b10 Address
- 19. 19 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Ref points to old address! Compiler warnings won’t catch it:
- 20. 20 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Rust to the rescue!
- 21. 21 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Rust stops bugs from happening.
- 22. 22 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) • Ownership – Exactly one variable “owns” an allocated value – Ownership may be transferred (move) – Ownership may be temporary (borrow) • Lifetime – These variables’ scopes provide an upper bound on how long that value lasts • Memory safety without overhead – No GC – No SmartPointers – No reference counting
- 23. 23 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Concepts of browser engines
- 24. 24 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) How a browser works…
- 25. 25 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Reasons for lack of literature First OS 50 60 70 80 90 00 10 20 Books? First browse r OS books time Delay between a disruptive tech becoming widespread and t he textbooks being published
- 26. 26 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) High level flow HTML CSS JS Loader / Parser DOM Tree Script Handler Browser UI Layout* / Rendering user-generated input *Calculating layout is referred as Reflow (Gecko) or Attachment (WebKit)
- 27. 27 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Servo high-level architecture More details at: http://arxiv.org/abs/1505.07383 HTML CSS JS DOM Flow Tree Display Lists Layers Final Output Parsing Styling Layout RenderingCompositing ScriptScript
- 28. 28 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Servo threading architecture Constellation Renderer LayoutScript Pipeline 1 (iframe 1) Renderer LayoutScript Pipeline 2 (iframe 2) Tab 1 Renderer LayoutScript Pipeline 3 (iframe 3)
- 29. 29 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Servo rendering pipeline overview: • Content (aka. Script): • Creates and owns the DOM tree • Layout: • Takes from content a snapshot of the DOM tree • Calculates style (attachment), building the flow tree • Flow tree used to calculate the layout of nodes • Layout of nodes used to build a display list • Renderer: • Receives a display list from layout • Renders visible portions to one or more tiles in parallel • Compositor: • Composites the tiles from the renderer • Sends the final image to the screen for display
- 30. 30 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) • In Blink, layout will create a RenderTree with RenderObjects that have geometric information and know how to paint themselves. • In Servo, layout will generate a FlowTree and later DisplayLists are created from it. Blink/WebKit Differences
- 31. 31 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Renderer and Compositor • Both Renderer and Compositor are: • Decoupled from Layout (separate threads) • Design aimed at responsiveness • Compositor manages its memory. • Screen is divided into a series of tiles: • Rendered in parallel • Required for mobile performance • Display lists are divided in sublists (i.e. stack context): • Contents can be retained on the GPU • Rendered in parallel
- 32. 32 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Demo • Dump flowtree, display lists. • Parallel layout, parallel painting.
- 33. 33 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Parallel layout challenges • HTML layout has complex dependencies: – Inline element positioning – Floating elements – Vertical text – Pagination • Each page is very different, making static parallelism prediction difficult.
- 34. 34 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Parallel layout div div div Queue
- 35. 36 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Parallelism reduces page appearance time
- 36. 37 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) CSS filter blur Code analysis.
- 37. 38 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Servo detailed roadmap • https://github.com/servo/servo/wiki/Roadmap • Q2 2015 – Increase Servo quality - work on more sites – Demonstrate superior end-to-end performance – Mobile / embedded • 2015 – Full Alpha-quality release
- 38. 39 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Contributing to Servo & Rust Contributions are welcome! • Servo: github.com/mozilla/servo • Rust: github.com/mozilla/rust | rust-lang.org • #servo | #rust | #rust-internals @ irc.mozilla.org • dev-servo | rust-dev @ lists.mozilla.org • News: http://blog.servo.org/
- 39. 40 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Special thanks • Samsung OSG (OpenSource Group). • Lars Bergstrom (Mozilla). • Bruno Abinader (Mapbox).
- 40. 41Open Source Group – Samsung Research America (Silicon Valley) © 2014 Samsung Electronics Co. Questions?
- 41. Thank you. 42Open Source Group – Samsung Research America (Silicon Valley) © 2014 Samsung Electronics Co.
- 42. 43 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Servo vs. Gecko (CNN)
- 43. 44 © 2014 Samsung Electronics Co.Open Source Group – Samsung Research America (Silicon Valley) Servo vs. Gecko (reddit)
Editor's Notes
- Howdy!
- Each tab in servo is represented by a lightweight task thread that implements the Constellation (name is historical). There is a separate thread that handles UI compositing not shown here. Up to this point, we are similar to current Webkit and future Gecko. Within the page in that tab, there is a pipeline that implements the script, layout, and actual rendering. For each iframe, things get interesting. We have a pipeline that consists of three concurrent tasks. The script task handles loading the DOM and JavaScript engine. The layout task turns that into a tree of CSS boxes. The Renderer task turns that into tiles to be displayed on the screen. This architecture permits both parallelism that we didn’t have before and stability. <animate> You can add another pipeline when you add another iframe. And a third iframe can be added, optionally sharing the script task, which can be required in order to support some Web features.
- The biggest challenge is that HTML layout is really complicated. Inline elements, like text with various formatting, can require information from its neighbors to know its own position. Floating elements can either shift or even forcibly break (when they have a pinned location) a line in places that do not respect a sequential order of evaluating the DOM nodes. We’re thinking of adding speculative parallelism, but it’s unclear if the extra costs (ability to back out) outweigh the parallelism gains. More evaluation to do here.
- Assume we have a page with a body that has three divs, each of which has some text. A top-down traversal (e.g., computing widths) allows the three divs, red, blue, and white to each be rendered in parallel.
- These are power numbers for the overall process. Biggest thing to note is that most of the power difference comes from the frequency change, not the number of active cores (not necessarily true on mobile). The big take-away here is that you can save nearly 40% power usage without sacrificing time in this scenario simply by using parallelism and a lower CPU frequency.