Successfully reported this slideshow.
Palm®     webOS™
          Internals
Exploring the Browser and JavaScript
                Greg Simon
       Sr. Director, ...
What Do We Mean by the “Platform?”


              Your applications



            Mojo



               Browser engine
...
Choices for a Browser Engine
... in 2008 when building webOS



           Gecko     WebKit       Opera     “Trident”




...
Choices for a Browser Engine
... in 2008 when building webOS



           Gecko     WebKit




                     Safar...
WebKit

• Already proven on
  mobile platforms
  • Symbian S60 in 2006
  • iPhone in 2007
• Very active open
  source comm...
JavaScript

• JavaScript wars!

• WebKit includes the “KJS” KDE JavaScript
  interpreter
• In 2008, Apple released a bytec...
JavaScript Engines


                      KJS          V8




                   Interpreted
          Type              ...
How JavaScript Code Gets
Executed in webOS




function foo()                     mov r1,r3         0100101000
    { ... }...
How JavaScript Code Gets
Executed in webOS


                           Compiled code from
                           Palm...
How WebKit Works

<html>
<body>               function test()
   <div id=‘foo’>    { ... }
       ...

             #foo {...
How Your Application
Gets to the Screen

                                     html

  <html>
  <body>              head   ...
How Your Application Gets to the
   Screen

                                                               #foo {
        ...
Rule of Performance
            #
                   1
The complexity of your CSS is proportional to
    the performance o...
Some Changes in the webOS Version
of WebKit

• Custom graphics system Piranha
• Loading local resources synchronously (1.4...
JavaScript Garbage Collection

• Paying your taxes!
• Unpredictable (well, sometimes)
  • Your app creates a lot of tempor...
JavaScript Garbage Collection

• With webOS 1.4 only one way to “deal” with GC:
  • Minimize occurrence by not creating so...
Rule of Performance
          #
                 2
Even though this is an embedded system,
    all “traditional” web perfo...
Traditional Techniques Still Apply

• Sprite your images!
• Combine multiple files into one (JS, CSS)
• Use a tool like YUI...
Rule of Performance
           #
                  3
Even though this is “JavaScript” you should
                         ...
Q &A
Internals - Exploring the webOS Browser and JavaScript
Internals - Exploring the webOS Browser and JavaScript
Upcoming SlideShare
Loading in …5
×

Internals - Exploring the webOS Browser and JavaScript

4,576 views

Published on

Greg Simon discusses how webkit integrates into the webOS architecture.

Published in: Technology
  • Be the first to comment

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

×