Stealing Chromium: Embedding HTML5 with the Servo Browser Engine (LinuxCon NA 2014)
- 2. Why a new web engine?
• Support new types of applications and new
devices
• All modern browser engines (Safari, Firefox,
Chrome) originally designed pre-2000
• Coarse parallelism
• Tightly coupled components
• Vast majority of security issues are related to the
C++ memory model
- 3. Servo
•Written in a memory-safe
systems language, Rust
• Architected for
parallelism
• Coarse (per-tab), as in
Chrome
• Lightweight (intra-page),
too
• Designed for embedding
- 4. Rust - safe systems programming
• C++ syntax and idioms
• C++-like performance
•Memory safety
• Concurrency
• Parallelism
http://www.rust-lang.org
- 6. Memory safety without overhead
• Lifetimes and ownership ensure memory safety
•No garbage collection
•No reference counting
•No C++ “smart” pointer classes
- 8. How a browser works
HTML
CSS
JS
Script &
Interactions
DOM Flow
Tree
Display
Lists
Script
Layout Render
Parsing
More details: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
- 9. How a browser works
HTML
CSS
JS
Script &
Interactions
DOM Flow
Tree
Display
Lists
Script
Layout Render
Parsing
This works:
<html>
<script>
document.write
(“</script>
<li>foo</li>
</html>
More details: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
- 10. Timing breakdown
Task Percentage
Runtime libraries 25%
Layout 22%
Windowing 17%
Script 16%
Painting to screen 10%
CSS styling 4%
Other 6%
Data from A Case for Parallelizing Web Pages. Mai, Tang, et. al. HOTPAR ‘12
- 14. Servo’s architecture
Tab 1
Constellation
Pipeline 1 (iframe 1)
Renderer
Script Layout
Pipeline 2 (iframe 2)
Renderer
Script Layout
- 15. Servo’s architecture
Tab 1
Constellation
Pipeline 1 (iframe 1)
Renderer
Script Layout
Pipeline 2 (iframe 2)
Renderer
Script Layout
Pipeline 3 (iframe 3)
Renderer
Script Layout
- 17. Parallel layout
•Matters hugely on mobile platforms
• Processors run at lower frequencies, but many
cores
•Would enable more complicated pages on all
platforms
• Implemented by work-stealing algorithm
See: Fast and Parallel Webpage Layout. Meyerovich and Bodik. WWW 2010.
- 20. Parallel layout challenges
•HTML layout has complex dependencies
• Inline element positioning
• Floating elements
• Vertical text
• Pagination
• Considering adding speculation
- 21. Layout: parallel speedups
Time (ms)
700
525
350
175
0
High CPU Frequency Low CPU Frequency
1 2 3 4 5 6 7 8
Number of Threads
- 22. Total time with parallel layout
Time (s)
3.6
2.7
1.8
0.9
0
High CPU Frequency Low CPU Frequency
1 2 3 4 5 6 7 8
Number of Threads
- 23. Total power with parallel layout
Power (J)
120
90
60
30
0
High CPU Frequency Low CPU Frequency
1 2 3 4 5 6 7 8
Number of Threads
Measurements by Laleh Beni, intern from University of California Irvine
- 24. Punchline: parallelism for power, too
• Force low-frequency CPU setting
• Above four cores, same end-to-end performance
as single core at high-frequency
• BUT, 40% of the power usage
• Could also parallelize more
• Rendering, CSS selector matching, etc.
- 25. From engine to browser
• Servo just renders pages
• Similar to the Blink and Gecko engines
• Designed to work in many browser shells
• Firefox OS, over interprocess communication
(IPC)
• Android, by implementing a Java wrapper
•On the desktop with…
- 28. How not to embed
•WebKit
• Blink
• Both suffer from an unstable API
• Application developer choices:
• Ship full browser engine with application
• Continually update to match breakages
- 29. How to embed?
• CEF: Chromium Embedded Framework
• Isolates application developers from core API
• C API with C++ extensions
- 31. How to embed with Servo?
• Use CEF API+ABI
• Removes need for YA embedding API
• Less competition, more coding
• Allows easy testing between engines
• Servo: the pragmatic embedding engine
- 32. Servo embedding methodology
• Full symbol/ABI coverage
• Every CEF function call resolves to a Servo function
• Struct allocation sizes are identical
typedef struct _cef_string_utf8_t {
char* str;
size_t length;
void (*dtor)(char* str);
} cef_string_utf8_t;
!!!!!
C
pub struct cef_string_utf8 {
pub str: *mut u8,
pub length: size_t,
pub dtor: extern “C” fn(str: *mut u8),
}
!!!!!
Rust
- 33. Servo embedding development
• Start with base set of symbols
• `nm -u` on CEF applications
• Track function execution
• CEF <-> Blink <-> Application <-> CEF …
•Mimic CEF behavior using Servo equivalents
• Use preload hacks to test
• LD_PRELOAD on Linux
- 34. Servo status
• Pass some tests
• ACID1, ACID2
• Render basic web pages
•Wikipedia, etc.
• Focus on design +
challenges
• Parallelism, latency,
power, memory
- 35. Servo roadmap
• https://github.com/servo/servo/wiki/Roadmap
• Q3 2014
•Writing modes (vertical text)
•DOM memory usage, perf, and features
•Web Platform Tests & CSS Ref Tests
• Q4 2014
• Very basic dogfooding
- 36. Getting involved with Servo
•www.github.com/servo/
servo/issues
• Filter for “E-Easy”
• irc.mozilla.org, #servo
channel
•Worldwide community
• Looking for more
partners and contributors
• larsberg@mozilla.com