STEALING CHROMIUM: EMBEDDING HTML5 
WITH THE SERVO BROWSER ENGINE 
Lars Bergstrom 
Mozilla Research 
Mike Blumenkrantz 
Sa...
Why a new web engine? 
• Support new types of applications and new 
devices 
• All modern browser engines (Safari, Firefox...
Servo 
•Written in a memory-safe 
systems language, Rust 
• Architected for 
parallelism 
• Coarse (per-tab), as in 
Chrom...
Rust - safe systems programming 
• C++ syntax and idioms 
• C++-like performance 
•Memory safety 
• Concurrency 
• Paralle...
Familiar syntax and performance
Memory safety without overhead 
• Lifetimes and ownership ensure memory safety 
•No garbage collection 
•No reference coun...
Example of code you can’t write
How a browser works 
HTML 
CSS 
JS 
Script & 
Interactions 
DOM Flow 
Tree 
Display 
Lists 
Script 
Layout Render 
Parsing...
How a browser works 
HTML 
CSS 
JS 
Script & 
Interactions 
DOM Flow 
Tree 
Display 
Lists 
Script 
Layout Render 
Parsing...
Timing breakdown 
Task Percentage 
Runtime libraries 25% 
Layout 22% 
Windowing 17% 
Script 16% 
Painting to screen 10% 
C...
Websites already partitioned
Servo’s architecture 
Constellation 
Pipeline 1 (iframe 1) 
Renderer 
Script Layout 
Tab 1
Servo’s architecture 
Tab 1 
Constellation 
Pipeline 1 (iframe 1) 
Renderer 
Script Layout 
Pipeline 2 (iframe 2) 
Rendere...
Servo’s architecture 
Tab 1 
Constellation 
Pipeline 1 (iframe 1) 
Renderer 
Script Layout 
Pipeline 2 (iframe 2) 
Rendere...
Demo: parallelism and sandboxing
Parallel layout 
•Matters hugely on mobile platforms 
• Processors run at lower frequencies, but many 
cores 
•Would enabl...
Parallel layout 
body 
div div div 
text bold text text
Parallel layout 
body 
div div div 
text bold text text 
Queue 
div 
div 
div
Parallel layout challenges 
•HTML layout has complex dependencies 
• Inline element positioning 
• Floating elements 
• Ve...
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...
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 
N...
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 
Nu...
Punchline: parallelism for power, too 
• Force low-frequency CPU setting 
• Above four cores, same end-to-end performance ...
From engine to browser 
• Servo just renders pages 
• Similar to the Blink and Gecko engines 
• Designed to work in many b...
What is embedding? 
•Hosting web engine in native application
Why embed? 
• Reduced development 
time 
•HTML5 popularity
How not to embed 
•WebKit 
• Blink 
• Both suffer from an unstable API 
• Application developer choices: 
• Ship full brow...
How to embed? 
• CEF: Chromium Embedded Framework 
• Isolates application developers from core API 
• C API with C++ exten...
Servo embedding strategy 
• Stable API/ABI 
• Extensive API testing is a plus 
• C-based 
• Flexible 
• Already designed
How to embed with Servo? 
• Use CEF API+ABI 
• Removes need for YA embedding API 
• Less competition, more coding 
• Allow...
Servo embedding methodology 
• Full symbol/ABI coverage 
• Every CEF function call resolves to a Servo function 
• Struct ...
Servo embedding development 
• Start with base set of symbols 
• `nm -u` on CEF applications 
• Track function execution 
...
Servo status 
• Pass some tests 
• ACID1, ACID2 
• Render basic web pages 
•Wikipedia, etc. 
• Focus on design + 
challeng...
Servo roadmap 
• https://github.com/servo/servo/wiki/Roadmap 
• Q3 2014 
•Writing modes (vertical text) 
•DOM memory usage...
Getting involved with Servo 
•www.github.com/servo/ 
servo/issues 
• Filter for “E-Easy” 
• irc.mozilla.org, #servo 
chann...
Stealing Chromium: Embedding HTML5 with the Servo Browser Engine (LinuxCon NA 2014)
Upcoming SlideShare
Loading in …5
×

Stealing Chromium: Embedding HTML5 with the Servo Browser Engine (LinuxCon NA 2014)

1,355 views
1,128 views

Published on

Mike Blumenkrantz (Senior Engineer, Samsung Open Source Group), and Lars Bergstrom (Mozilla Research) share their research and implementation of HTML5 within the Servo Browser Engine.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,355
On SlideShare
0
From Embeds
0
Number of Embeds
172
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Stealing Chromium: Embedding HTML5 with the Servo Browser Engine (LinuxCon NA 2014)

  1. 1. STEALING CHROMIUM: EMBEDDING HTML5 WITH THE SERVO BROWSER ENGINE Lars Bergstrom Mozilla Research Mike Blumenkrantz Samsung R&D America
  2. 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. 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. 4. Rust - safe systems programming • C++ syntax and idioms • C++-like performance •Memory safety • Concurrency • Parallelism http://www.rust-lang.org
  5. 5. Familiar syntax and performance
  6. 6. Memory safety without overhead • Lifetimes and ownership ensure memory safety •No garbage collection •No reference counting •No C++ “smart” pointer classes
  7. 7. Example of code you can’t write
  8. 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. 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. 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
  11. 11. Websites already partitioned
  12. 12. Servo’s architecture Constellation Pipeline 1 (iframe 1) Renderer Script Layout Tab 1
  13. 13. Servo’s architecture Tab 1 Constellation Pipeline 1 (iframe 1) Renderer Script Layout Pipeline 2 (iframe 2) Renderer Script Layout
  14. 14. 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
  15. 15. Demo: parallelism and sandboxing
  16. 16. 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.
  17. 17. Parallel layout body div div div text bold text text
  18. 18. Parallel layout body div div div text bold text text Queue div div div
  19. 19. Parallel layout challenges •HTML layout has complex dependencies • Inline element positioning • Floating elements • Vertical text • Pagination • Considering adding speculation
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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.
  24. 24. 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…
  25. 25. What is embedding? •Hosting web engine in native application
  26. 26. Why embed? • Reduced development time •HTML5 popularity
  27. 27. 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
  28. 28. How to embed? • CEF: Chromium Embedded Framework • Isolates application developers from core API • C API with C++ extensions
  29. 29. Servo embedding strategy • Stable API/ABI • Extensive API testing is a plus • C-based • Flexible • Already designed
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. Servo status • Pass some tests • ACID1, ACID2 • Render basic web pages •Wikipedia, etc. • Focus on design + challenges • Parallelism, latency, power, memory
  34. 34. 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
  35. 35. 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

×