Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Exploring the Browser and JavaScript in webOS
Similar to Exploring the Browser and JavaScript in webOS (20)
Recently uploaded
Recently uploaded (20)
Exploring the Browser and JavaScript in webOS
- 2. Palm® webOS™ Internals Exploring the Browser and JavaScript Greg Simon Sr. Director, webOS Platform April 24, 2010
- 3. What Do We Mean by the “Platform?” Your applications Mojo Browser engine JavaScript VM
- 4. 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
- 5. Choices for a Browser Engine ... in 2008 when building webOS Gecko WebKit Safari, FireFox Chrome Open Open Source Source
- 6. 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)
- 7. 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!?
- 8. JavaScript Engines KJS V8 Interpreted Type Compiled JIT Backend x86 x86, ARM
- 9. 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
- 10. How JavaScript Code Gets Executed in webOS Compiled code from Palm “the ROM” CPU JS Code compiled at runtime
- 11. How WebKit Works <html> <body> function test() <div id=‘foo’> { ... } ... #foo { border:1px solid ... WebKit Image icon Your app
- 12. 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.
- 13. 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.
- 14. Rule of Performance # 1 The complexity of your CSS is proportional to the performance of your application.
- 15. 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”
- 16. 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
- 17. JavaScript Garbage Collection • With webOS 1.4 only one way to “deal” with GC: • Minimize occurrence by not creating so many temporary objects
- 18. Rule of Performance # 2 Even though this is an embedded system, all “traditional” web performance techniques still apply.
- 19. 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!
- 20. Rule of Performance # 3 Even though this is “JavaScript” you should , still consider the impact of every line you write.
- 21. Q &A