Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Internals - Exploring the webOS Browser and JavaScript

4,821 views

Published on

Greg Simon discusses how webkit integrates into the webOS architecture.

Published in: Technology
  • Login to see the comments

Internals - Exploring the webOS Browser and JavaScript

  1. 1. Palm® webOS™ Internals Exploring the Browser and JavaScript Greg Simon Sr. Director, webOS Platform April 24, 2010
  2. 2. What Do We Mean by the “Platform?” Your applications Mojo Browser engine JavaScript VM
  3. 3. Choices for a Browser Engine ... in 2008 when building webOS Gecko WebKit Opera “Trident” Safari, Internet FireFox Opera Chrome Explorer Open Open Closed- Closed- Source Source Source Source
  4. 4. Choices for a Browser Engine ... in 2008 when building webOS Gecko WebKit Safari, FireFox Chrome Open Open Source Source
  5. 5. WebKit • Already proven on mobile platforms • Symbian S60 in 2006 • iPhone in 2007 • Very active open source community • Tied to a high-quality commercial product (Safari)
  6. 6. JavaScript • JavaScript wars! • WebKit includes the “KJS” KDE JavaScript interpreter • In 2008, Apple released a bytecode compiler “Squirrelfish,” then later the x86 backend “Nitro/ Squirrelfish-extreme” • In September 2008, Google released V8 as an alternative in WebKit • What are the differences!?
  7. 7. JavaScript Engines KJS V8 Interpreted Type Compiled JIT Backend x86 x86, ARM
  8. 8. How JavaScript Code Gets Executed in webOS function foo() mov r1,r3 0100101000 { ... } AST ldr 0,a 1001001010 Source code Logical tree Assembly language Machine language
  9. 9. How JavaScript Code Gets Executed in webOS Compiled code from Palm “the ROM” CPU JS Code compiled at runtime
  10. 10. How WebKit Works <html> <body> function test() <div id=‘foo’> { ... } ... #foo { border:1px solid ... WebKit Image icon Your app
  11. 11. How Your Application Gets to the Screen html <html> <body> head body <div id=‘foo’> ... title meta meta h1 p ul HTML a li li li DOM tree that represents the logical structure of your document.
  12. 12. How Your Application Gets to the Screen #foo { border:1px solid ... CSS htm root <html> hea body box box <body> <div id=‘foo’> ... title met meta h1 p ul + #txt box #txt img box box a li li li #txt box #txt box HTML DOM tree Render tree that describes how your document is painted.
  13. 13. Rule of Performance # 1 The complexity of your CSS is proportional to the performance of your application.
  14. 14. Some Changes in the webOS Version of WebKit • Custom graphics system Piranha • Loading local resources synchronously (1.4) • Removes some of the “web page” effect on initial paint • window.palmGetResource() (1.0) • Synchronously read the contents of a file into a string— used extensively by Mojo • PalmServiceBridge (1.0) • Used to communicate with the webOS service bus • Different than XHR because it can receive more than one response from “other side”
  15. 15. JavaScript Garbage Collection • Paying your taxes! • Unpredictable (well, sometimes) • Your app creates a lot of temporary objects • Predictable (well, sometimes) • On finger down, the system will attempt to delay “expensive” GCs for a period of time • When the device goes idle webOS forces an exhaustive, expensive GC to make up for this • With webOS 1.4 only two ways to “deal” with GC: • Minimize occurrence by not creating so many temporary objects
  16. 16. JavaScript Garbage Collection • With webOS 1.4 only one way to “deal” with GC: • Minimize occurrence by not creating so many temporary objects
  17. 17. Rule of Performance # 2 Even though this is an embedded system, all “traditional” web performance techniques still apply.
  18. 18. Traditional Techniques Still Apply • Sprite your images! • Combine multiple files into one (JS, CSS) • Use a tool like YUI Compressor or Google’s Closure Compiler to reduce the size of your script • Consider all traditional “loading” tricks even though the data is coming from flash disk rather than the network!
  19. 19. Rule of Performance # 3 Even though this is “JavaScript” you should , still consider the impact of every line you write.
  20. 20. Q &A

×