SlideShare une entreprise Scribd logo
1  sur  65
Télécharger pour lire hors ligne
Performance
 Improvements in
    Browsers
                  John Resig
http://ejohn.org/ - http://twitter.com/jeresig/
About Me
    Work for the Mozilla Corporation (Firefox!)
✦
    ✦ Do a lot of JavaScript performance analysis
    ✦ Dromaeo.com is my performance test suite
      ✦ Tests the performance of JavaScript engines
      ✦ Tests the performance of browser DOM

    Creator of the jQuery JavaScript Library
✦
    ✦ http://jquery.com/
    ✦ Used by Microsoft, Google, Adobe, Nokia,
      IBM, Intel, CBS News, NBC, etc.
Upcoming Browsers
    The browsers:
✦
    ✦ Firefox 3.1
    ✦ Safari 4
    ✦ Internet Explorer 8
    ✦ Opera 10
    ✦ Google Chrome

    Defining characteristics:
✦
    ✦ Better performance
    ✦ Advanced JavaScript engines
Firefox 3.1
    Set to be released Spring 2009
✦

    Goals:
✦
    ✦ Performance improvements
    ✦ Video and Audio tags
    ✦ Private browsing

    Beta 2 just released
✦

    http://developer.mozilla.org/En/Firefox_3.1_for_developers
✦
Safari 4
    Released in conjunction with OS X 10.6
✦

    Features:
✦
    ✦ Performance improvements
    ✦ Desktop Apps
    ✦ ACID 3 compliance
    ✦ Revamped dev tools

    Preview seeded to developers
✦

    http://webkit.org/blog/
✦
Internet Explorer 8
    Released early 2009
✦

    Features:
✦
    ✦ Backwards compatibility with IE 7
    ✦ Web Clips (trim out a part of a page and
      place on desktop)
    ✦ Process per tab

    RC1 recently
✦
    released
    http://www.microsoft.com/
✦
    windows/internet-explorer/
    beta/readiness/new-features.aspx
Opera 10
    Unspecified release schedule (2009?)
✦

    Features:
✦
    ✦ ACID 3 compliance
    ✦ Video and Audio tags

    Opera 9.6 recently released
✦

    http://labs.opera.com/
✦
Google Chrome
    Chrome 1.0 September 2008
✦

    Features:
✦
    ✦ Private browsing
    ✦ Process per tab

    Chrome 2.0 upcoming
✦

    http://googlechromereleases.blogspot.com/
✦
Process Per Tab
    Most browsers have a single process
✦
    ✦ Share memory, resources
    ✦ Pages rendered using threads

    IE 8 and Chrome split tabs into individual
✦
    processes
    What does this change?
✦
    ✦ Pages can do more processing
      ✦ (Not block the UI or other tabs)
    ✦ Tabs consume more memory
Process Per Tab
    Examples of changes, in Chrome.
✦

    Timer speed is what you set it to.
✦
    ✦ Browsers cap the speed to 10ms.
    ✦ setInterval(fn, 1);

    Can do more non-stop processing, without
✦
    warning:
    while (true) {}
    Chrome has a process manager (like the
✦
    OS process manager - see CPU, Memory)
JavaScript Engines
    New wave of engines:
✦
    ✦ Firefox: TraceMonkey
    ✦ Safari: SquirrelFish (Extreme)
    ✦ Chrome: V8

    Continually leap-frogging each other
✦
Common Areas
    Virtual Machines
✦
    ✦ Optimized to run a JavaScript-specific
      bytecode
    Shaping
✦
    ✦ Determine if two objects are similar
    ✦ Optimize behavior based upon that
    ✦ “Walks like a duck, quacks like a duck”
    ✦ if ( obj.walks && obj.quacks ) {}
Engine Layers

          JavaScript Code


       JavaScript Engine (C++)


                                  Virtual
             Bytecode
                                 Machine


           Machine Code
Bytecode
    Specific low-level commands
✦

    Written in machine code
✦

    a + b;
✦

    PLUS( a, b ) {
✦
      IF ISSTRING(a) OR ISSTRING(b) {
        return CONCAT( a, b );
      } ELSE {
        return ADD( a, b );
      }
    }
Shaping
    Simple JavaScript code:
✦
    obj.method()
    GETPROP( obj, name ) {
✦
      IF ISOBJECT(obj) {
        IF HASPROP(obj, name)
         return PROP(obj, name);
        ELSE
         return PROTO(obj, name)
      } ELSE {
        ERROR
      }
    }
Shaping (cont.)
    EXEC( prop ) {
✦
      IF ISFN( prop ) {
        RUN( prop )
      } ELSE {
        ERROR
      }
    }
    After shaping:
✦
    RUN( PROP( obj, name ) )
    Optimized Bytecode
✦
TraceMonkey
    Firefox uses an engine called
✦
    SpiderMonkey (written in C)
    Tracing technology layered on for Firefox
✦
    3.1 (dubbed ‘TraceMonkey’)
    Hyper-optimizes repeating patterns into
✦
    bytecode
    http://ejohn.org/blog/tracemonkey/
✦
Tracing
    for ( var i = 0; i < 1000; i++ ) {
✦
      var foo = stuff[i][0];
      foo = “more stuff ” + someFn( foo );
    }
    function someFn( foo ) {
      return foo.substr(1);
    }
    Loop is costly
✦
    ✦ ISNUM(i)
    ✦ ADD(i, 1)
    ✦ COMPARE( i, 1000 )
Function Inlining
    for ( var i = 0; i < 1000; i++ ) {
✦
      var foo = stuff[i][0];
      foo = “more stuff ” + foo.substr(1);
    }
SquirrelFish
    Just-in-time compilation for JavaScript
✦

    Compiles a bytecode for common
✦
    functionality
    Specialties:
✦
    ✦ Bytecodes for regular expressions (super-
      fast)
    http://arstechnica.com/journals/linux.ars/2008/10/07/extreme-
✦
    javascript-performance
Chrome V8
    Makes extensive use of shaping (fast
✦
    property lookups)
    Hyper-optimized function calls and
✦
    recursion
    Dynamic machine code generation
✦

    http://code.google.com/p/v8/
✦
Measuring Speed
    SunSpider
✦
    ✦ Released by the WebKit team last fall
    ✦ Focuses completely on JavaScript

    Dromaeo
✦
    ✦ Released by Mozilla this spring
    ✦ Mix of JavaScript and DOM

    V8 Benchmark
✦
    ✦ Released by Chrome team last month
    ✦ Lots of recursion testing

    Quality: http://ejohn.org/blog/javascript-benchmark-quality/
✦
http://ejohn.org/blog/javascript-performance-rundown/
http://ejohn.org/blog/javascript-performance-rundown/
http://ejohn.org/blog/javascript-performance-rundown/
Network
Network
    Steve Souders’ UA tool:
✦
    http://stevesouders.com/ua/
    Also see: YSlow
✦
Simultaneous Conn.
    Number of downloads per domain
✦

    Should be at least 4
✦
    ✦ FF 2, IE 6, and IE 7 are 2
    ✦ Safari is 4
    ✦ Everyone else is 6-7

    Max connections: Number of simultaneous
✦
    downloads
    ✦ Firefox, Opera: 25-30
    ✦ Everyone else: 50-60
Parallel Scripts
    Download scripts simultaneously
✦

    Even though they must execute in order
✦

    <script defer>
✦
    ✦ From Internet Explorer
    ✦ Just landed for Firefox 3.1
    ✦ In Opera as well
    ✦ Replacement for JavaScript-based
      loading
Redirect Caching
    A simple request:
✦
    http://foo.com ->
    http://www.foo.com ->
    http://www.foo.com/
    Very costly, should be cached.
✦

    Chrome and Firefox do well here.
✦
Link Prefetching
    <link rel=”prefetch” href=”someimg.png”/>
✦

    Pre-load resources for later use
✦
    ✦ (images, stylesheets)

    Currently only in Firefox
✦

    Replacement for JavaScript preloading
✦
Communication
postMessage
    A way to pass messages amongst multiple
✦
    frames and windows
    Implemented in all browsers (in some
✦
    capacity).
    Sending a message:
✦

    iframe.postMessage(“test”,
✦
      “http://google.com/”);
postMessage
    Receiving a Message:
✦

    window.addEventListener(”message”, function(e){
✦
      if (e.origin !== “http://example.com:8080“)
        return;
      alert( e.data );
    }, false);
Cross-Domain XHR
    Landed in Firefox 3.1, support in IE 8
✦

    Add a header to your content:
✦
    Access-Control-Allow-Origin: *
    XMLHttpRequest can now pull it in, even
✦
    across domains
    https://developer.mozilla.org/En/
✦
    HTTP_Access_Control
DOM Navigation
Class Name
    New method:
✦
    getElementsByClassName
    Works just like:
✦
    getElementsByTagName
    Fast way of finding elements by their class
✦
    name(s):
    <div class=”person sidebar”></div>
    document.getElementsByClassName(“sidebar”)
✦


    Safari 3.1, Firefox 3.0, Opera 9.6
✦

    Drop-in replacement for existing queries
✦
Speed Results




http://ejohn.org/blog/getelementsbyclassname-speed-comparison/
Selectors API
    querySelectorAll
✦

    Use CSS selectors to find DOM elements
✦

    document.querySelectorAll(“div p”)
✦

    Good cross-browser support
✦
    ✦ IE 8, Safari 4, FF 3, Opera 10

    Drop-in replacement for JavaScript
✦
    libraries.
Speed Results




http://www2.webkit.org/perf/slickspeed/
Traversal API
    W3C Specification
✦

    Implemented in Firefox 3.1
✦

    Some methods:
✦
    ✦ .nextElementSibling
    ✦ .previousElementSibling
    ✦ .firstElementChild
    ✦ .lastElementChild

    Related:
✦
    ✦ .children (All browsers)
Drag and Drop
HTML 5 Dragging
    Includes full support drag and drop events
✦

    Events: dragstart, dragend, dragenter,
✦
    dragleave, dragover, drag, drop
    <div draggable=”true”
✦
    ondragstart=”event.dataTransfer.setData
    (’text/plain’, ‘This text may be dragged’)”>
      This text <strong>may</strong> be
    dragged.
    </div>
    Only in Firefox 3.1
✦
Bounding
    getBoundingClientRect
✦
    ✦ Introduced by IE
    ✦ Seeing a wider introduction

    Super-fast way to determine the position
✦
    of an element
    Better alternative to manual computation
✦
JavaScript Threads
    JavaScript has always been single-threaded
✦

    Limited to working linearly
✦

    New HTML 5 Web Workers
✦

    Spawn JavaScript threads
✦

    Run complicated work in the background
✦
    ✦ Doesn’t block the browser!

    Drop-in usable, huge quality boost.
✦
A Simple Worker
    var myWorker = new Worker(’my_worker.js’);  
✦
    myWorker.onmessage = function(event) {  
      alert(”Called back by the worker!n”);  
    };  
Styling and Effects
    Lots of commons styling effects
✦

    Can be replaced and simplified by the
✦
    browser
    Drastically simplify pages and improve
✦
    their performance
Rounded Corners
    CSS 3 specification
✦




    Implemented in Safari, Firefox, Opera
✦
    ✦ -moz-border-radius: 5px;
    ✦ -webkit-border-radius: 5px;

    Can replace clumsy, slow, old methods.
✦
Shadows
    Box Shadows
✦
    ✦ Shadow behind a div
        -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5)
    ✦


    Text Shadows
✦
    ✦ Shadow behind some text
        text-shadow: -1px -1px #666, 1px 1px #FFF;
    ✦

    Implemented in WebKit, Firefox
✦

    Can replace clumsy, slow, old methods.
✦
Example Shadows




    Demos: http://maettig.com/code/css/text-
✦
    shadow.html
    http://webkit.org/blog/86/box-shadow/
Custom Fonts
    Load in custom fonts
✦

    Can load TrueType fonts
✦

    Implemented in Safari and Firefox
✦

    Demo: http://ejohn.org/apps/fontface/
✦
    blok.html
    Can replace using Flash-based fonts.
✦
Transforms and Animations
    Transforms allow you to rotate, scale, and
✦
    offset an element
    ✦ -webkit-transform: rotate(30deg);

    Animations allow you to morph an
✦
    element using nothing but CSS
    ✦ -webkit-transition: all 1s ease-in-out;

    Implemented in WebKit and Firefox
✦

    Demo: http://www.the-art-of-web.com/css/
✦
    css-animation/
    Can replace JS animations, today.
✦
Canvas
    Proposed and first implemented by Apple
✦
    in WebKit
    A 2d drawing layer
✦
    ✦ With possibilities for future expansion

    Embedded in web pages (looks and
✦
    behaves like an img element)
    Works in all browsers (IE with ExCanvas)
✦

    Offload rendering to client
✦

    Better user interaction
✦
Shapes and Paths
    NOT vectors (unlike SVG)
✦

    Rectangles
✦

    Arcs
✦

    Lines
✦

    Curves
✦




    Charts:
✦
Fill and Stroke
    All can be styled (similar to CSS)
✦

    Stroke styles the path (or outline)
✦

    Fill is the color of the interior
✦

    Sparklines:
✦
Canvas Embedding
    Canvases can consume:
✦
    ✦ Images
    ✦ Other Canvases

    Will be able to consume (Firefox 3.1, Safari
✦
    4):
    ✦ Video

    In an extension:
✦
    ✦ Web Pages
Data
SQL Storage
    Part of HTML 5 - a full client-side SQL
✦
    database (SQLite)
    Implemented in WebKit
✦

    var database = openDatabase(”db”, “1.0”);
✦
    database.executeSql(”SELECT * FROM test”, function(result1) {
       // do something with the results
       database.executeSql(”DROP TABLE test”);
    });
Native JSON
    JSON is a format for transferring data
✦
    ✦ (Uses JavaScript syntax to achieve this.)
    ✦ Has been slow and a little hacky.

    Browser now have native support in
✦
    Firefox 3.1 and IE 8
    Drop-in usable, today
✦
    ✦ JSON.encode(object)
    ✦ JSON.decode(string)
Performance
    Encoding:
✦




    Decoding:
✦
New Measurements
Painting
    When something is physically drawn to
✦
    the screen
    Hard to quantify without more
✦
    information
    Firefox 3.1 includes a new event:
✦
    MozAfterPaint
    Demo: http://ejohn.org/blog/browser-
✦
    paint-events/
Paint Events
Reflow
    CSS has lots of boxes in it
✦

    Position of boxes is constantly recomputed
✦
    and repositioned (before being painted)
    ✦ This is reflow

    Demo: http://dougt.wordpress.com/
✦
    2008/05/24/what-is-a-reflow/
Questions?
    John Resig
✦
    http://ejohn.org/
    http://twitter.com/jeresig/

Contenu connexe

Tendances

연구자 및 교육자를 위한 계산 및 분석 플랫폼 설계 - PyCon KR 2015
연구자 및 교육자를 위한 계산 및 분석 플랫폼 설계 - PyCon KR 2015연구자 및 교육자를 위한 계산 및 분석 플랫폼 설계 - PyCon KR 2015
연구자 및 교육자를 위한 계산 및 분석 플랫폼 설계 - PyCon KR 2015Jeongkyu Shin
 
High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010Nicholas Zakas
 
Socket applications
Socket applicationsSocket applications
Socket applicationsJoão Moura
 
Building a real life application in node js
Building a real life application in node jsBuilding a real life application in node js
Building a real life application in node jsfakedarren
 
Aligning Ember.js with Web Standards
Aligning Ember.js with Web StandardsAligning Ember.js with Web Standards
Aligning Ember.js with Web StandardsMatthew Beale
 
Single Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and JasmineSingle Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and JasminePaulo Ragonha
 
Building Realtime Apps with Ember.js and WebSockets
Building Realtime Apps with Ember.js and WebSocketsBuilding Realtime Apps with Ember.js and WebSockets
Building Realtime Apps with Ember.js and WebSocketsBen Limmer
 
Django Rest Framework and React and Redux, Oh My!
Django Rest Framework and React and Redux, Oh My!Django Rest Framework and React and Redux, Oh My!
Django Rest Framework and React and Redux, Oh My!Eric Palakovich Carr
 
Puppet at Opera Sofware - PuppetCamp Oslo 2013
Puppet at Opera Sofware - PuppetCamp Oslo 2013Puppet at Opera Sofware - PuppetCamp Oslo 2013
Puppet at Opera Sofware - PuppetCamp Oslo 2013Cosimo Streppone
 
How we use and deploy Varnish at Opera
How we use and deploy Varnish at OperaHow we use and deploy Varnish at Opera
How we use and deploy Varnish at OperaCosimo Streppone
 
Advanced AV Foundation (CocoaConf, Aug '11)
Advanced AV Foundation (CocoaConf, Aug '11)Advanced AV Foundation (CocoaConf, Aug '11)
Advanced AV Foundation (CocoaConf, Aug '11)Chris Adamson
 
Transients are good for you - WordCamp London 2016
Transients are good for you - WordCamp London 2016Transients are good for you - WordCamp London 2016
Transients are good for you - WordCamp London 2016Boiteaweb
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010Nicholas Zakas
 
Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gearsdion
 

Tendances (20)

Ajax Security
Ajax SecurityAjax Security
Ajax Security
 
연구자 및 교육자를 위한 계산 및 분석 플랫폼 설계 - PyCon KR 2015
연구자 및 교육자를 위한 계산 및 분석 플랫폼 설계 - PyCon KR 2015연구자 및 교육자를 위한 계산 및 분석 플랫폼 설계 - PyCon KR 2015
연구자 및 교육자를 위한 계산 및 분석 플랫폼 설계 - PyCon KR 2015
 
High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010
 
Socket applications
Socket applicationsSocket applications
Socket applications
 
Building a real life application in node js
Building a real life application in node jsBuilding a real life application in node js
Building a real life application in node js
 
Play vs Rails
Play vs RailsPlay vs Rails
Play vs Rails
 
Aligning Ember.js with Web Standards
Aligning Ember.js with Web StandardsAligning Ember.js with Web Standards
Aligning Ember.js with Web Standards
 
Single Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and JasmineSingle Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and Jasmine
 
SocketStream
SocketStreamSocketStream
SocketStream
 
Dancing with websocket
Dancing with websocketDancing with websocket
Dancing with websocket
 
Building Realtime Apps with Ember.js and WebSockets
Building Realtime Apps with Ember.js and WebSocketsBuilding Realtime Apps with Ember.js and WebSockets
Building Realtime Apps with Ember.js and WebSockets
 
Django Rest Framework and React and Redux, Oh My!
Django Rest Framework and React and Redux, Oh My!Django Rest Framework and React and Redux, Oh My!
Django Rest Framework and React and Redux, Oh My!
 
Puppet at Opera Sofware - PuppetCamp Oslo 2013
Puppet at Opera Sofware - PuppetCamp Oslo 2013Puppet at Opera Sofware - PuppetCamp Oslo 2013
Puppet at Opera Sofware - PuppetCamp Oslo 2013
 
How we use and deploy Varnish at Opera
How we use and deploy Varnish at OperaHow we use and deploy Varnish at Opera
How we use and deploy Varnish at Opera
 
Ugo Cei Presentation
Ugo Cei PresentationUgo Cei Presentation
Ugo Cei Presentation
 
Thomas Fuchs Presentation
Thomas Fuchs PresentationThomas Fuchs Presentation
Thomas Fuchs Presentation
 
Advanced AV Foundation (CocoaConf, Aug '11)
Advanced AV Foundation (CocoaConf, Aug '11)Advanced AV Foundation (CocoaConf, Aug '11)
Advanced AV Foundation (CocoaConf, Aug '11)
 
Transients are good for you - WordCamp London 2016
Transients are good for you - WordCamp London 2016Transients are good for you - WordCamp London 2016
Transients are good for you - WordCamp London 2016
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
 
Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gears
 

En vedette

Performance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScriptPerformance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScriptjeresig
 
Ajax Performance
Ajax PerformanceAjax Performance
Ajax Performancekaven yan
 
Douglas Crockford - Programming Style and Your Brain
Douglas Crockford - Programming Style and Your BrainDouglas Crockford - Programming Style and Your Brain
Douglas Crockford - Programming Style and Your BrainWeb Directions
 
The Theory Of The Dom
The Theory Of The DomThe Theory Of The Dom
The Theory Of The Domkaven yan
 
The JSON Saga
The JSON SagaThe JSON Saga
The JSON Sagakaven yan
 
10 tips to get started with html5 games
10 tips to get started with html5 games10 tips to get started with html5 games
10 tips to get started with html5 gamesGregory Kukolj
 
Douglas Crockford - Ajax Security
Douglas Crockford - Ajax SecurityDouglas Crockford - Ajax Security
Douglas Crockford - Ajax SecurityWeb Directions
 
Good Parts of JavaScript Douglas Crockford
Good Parts of JavaScript Douglas CrockfordGood Parts of JavaScript Douglas Crockford
Good Parts of JavaScript Douglas Crockfordrajivmordani
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced JavascriptAdieu
 
Advanced JavaScript Concepts
Advanced JavaScript ConceptsAdvanced JavaScript Concepts
Advanced JavaScript ConceptsNaresh Kumar
 
Scalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureScalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureNicholas Zakas
 
The JavaScript Programming Language
The JavaScript Programming LanguageThe JavaScript Programming Language
The JavaScript Programming Languageguestceb98b
 
Speed Up Your JavaScript
Speed Up Your JavaScriptSpeed Up Your JavaScript
Speed Up Your JavaScriptNicholas Zakas
 

En vedette (15)

Performance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScriptPerformance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScript
 
Ajax Performance
Ajax PerformanceAjax Performance
Ajax Performance
 
Douglas Crockford - Programming Style and Your Brain
Douglas Crockford - Programming Style and Your BrainDouglas Crockford - Programming Style and Your Brain
Douglas Crockford - Programming Style and Your Brain
 
The Theory Of The Dom
The Theory Of The DomThe Theory Of The Dom
The Theory Of The Dom
 
The JSON Saga
The JSON SagaThe JSON Saga
The JSON Saga
 
10 tips to get started with html5 games
10 tips to get started with html5 games10 tips to get started with html5 games
10 tips to get started with html5 games
 
Douglas Crockford - Ajax Security
Douglas Crockford - Ajax SecurityDouglas Crockford - Ajax Security
Douglas Crockford - Ajax Security
 
Json
JsonJson
Json
 
OOP in JavaScript
OOP in JavaScriptOOP in JavaScript
OOP in JavaScript
 
Good Parts of JavaScript Douglas Crockford
Good Parts of JavaScript Douglas CrockfordGood Parts of JavaScript Douglas Crockford
Good Parts of JavaScript Douglas Crockford
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
 
Advanced JavaScript Concepts
Advanced JavaScript ConceptsAdvanced JavaScript Concepts
Advanced JavaScript Concepts
 
Scalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureScalable JavaScript Application Architecture
Scalable JavaScript Application Architecture
 
The JavaScript Programming Language
The JavaScript Programming LanguageThe JavaScript Programming Language
The JavaScript Programming Language
 
Speed Up Your JavaScript
Speed Up Your JavaScriptSpeed Up Your JavaScript
Speed Up Your JavaScript
 

Similaire à Performance Improvements in Browsers

Performance Improvements in Browsers
Performance Improvements in BrowsersPerformance Improvements in Browsers
Performance Improvements in Browsersjeresig
 
The Future of Firefox and JavaScript
The Future of Firefox and JavaScriptThe Future of Firefox and JavaScript
The Future of Firefox and JavaScriptjeresig
 
jQuery 1.3 and jQuery UI
jQuery 1.3 and jQuery UIjQuery 1.3 and jQuery UI
jQuery 1.3 and jQuery UIjeresig
 
Learning jQuery @ MIT
Learning jQuery @ MITLearning jQuery @ MIT
Learning jQuery @ MITjeresig
 
New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)jeresig
 
Ajax Tutorial
Ajax TutorialAjax Tutorial
Ajax Tutorialoscon2007
 
Going Live! with Comet
Going Live! with CometGoing Live! with Comet
Going Live! with CometSimon Willison
 
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Patrick Chanezon
 
Web Development: The Next Five Years
Web Development: The Next Five YearsWeb Development: The Next Five Years
Web Development: The Next Five Yearssneeu
 
Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript librariesJazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript librariesSimon Willison
 
How to make Ajax Libraries work for you
How to make Ajax Libraries work for youHow to make Ajax Libraries work for you
How to make Ajax Libraries work for youSimon Willison
 
VUG5: Varnish at Opera Software
VUG5: Varnish at Opera SoftwareVUG5: Varnish at Opera Software
VUG5: Varnish at Opera SoftwareCosimo Streppone
 
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureSimon Willison
 
Improve your Java Environment with Docker
Improve your Java Environment with DockerImprove your Java Environment with Docker
Improve your Java Environment with DockerHanoiJUG
 
Intro to go web assembly
Intro to go web assemblyIntro to go web assembly
Intro to go web assemblyChe-Chia Chang
 
Nodejs and WebSockets
Nodejs and WebSocketsNodejs and WebSockets
Nodejs and WebSocketsGonzalo Ayuso
 
Castles in the Cloud: Developing with Google App Engine
Castles in the Cloud: Developing with Google App EngineCastles in the Cloud: Developing with Google App Engine
Castles in the Cloud: Developing with Google App Enginecatherinewall
 

Similaire à Performance Improvements in Browsers (20)

Performance Improvements in Browsers
Performance Improvements in BrowsersPerformance Improvements in Browsers
Performance Improvements in Browsers
 
The Future of Firefox and JavaScript
The Future of Firefox and JavaScriptThe Future of Firefox and JavaScript
The Future of Firefox and JavaScript
 
jQuery 1.3 and jQuery UI
jQuery 1.3 and jQuery UIjQuery 1.3 and jQuery UI
jQuery 1.3 and jQuery UI
 
Learning jQuery @ MIT
Learning jQuery @ MITLearning jQuery @ MIT
Learning jQuery @ MIT
 
New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)
 
Ajax Tutorial
Ajax TutorialAjax Tutorial
Ajax Tutorial
 
Going Live! with Comet
Going Live! with CometGoing Live! with Comet
Going Live! with Comet
 
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?
 
Web Development: The Next Five Years
Web Development: The Next Five YearsWeb Development: The Next Five Years
Web Development: The Next Five Years
 
Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript librariesJazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
Jazz up your JavaScript: Unobtrusive scripting with JavaScript libraries
 
How to make Ajax Libraries work for you
How to make Ajax Libraries work for youHow to make Ajax Libraries work for you
How to make Ajax Libraries work for you
 
Os Wilhelm
Os WilhelmOs Wilhelm
Os Wilhelm
 
VUG5: Varnish at Opera Software
VUG5: Varnish at Opera SoftwareVUG5: Varnish at Opera Software
VUG5: Varnish at Opera Software
 
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
 
Improve your Java Environment with Docker
Improve your Java Environment with DockerImprove your Java Environment with Docker
Improve your Java Environment with Docker
 
JavaFX Advanced
JavaFX AdvancedJavaFX Advanced
JavaFX Advanced
 
How Akamai Made ESI Testing Simpler
How Akamai Made ESI Testing SimplerHow Akamai Made ESI Testing Simpler
How Akamai Made ESI Testing Simpler
 
Intro to go web assembly
Intro to go web assemblyIntro to go web assembly
Intro to go web assembly
 
Nodejs and WebSockets
Nodejs and WebSocketsNodejs and WebSockets
Nodejs and WebSockets
 
Castles in the Cloud: Developing with Google App Engine
Castles in the Cloud: Developing with Google App EngineCastles in the Cloud: Developing with Google App Engine
Castles in the Cloud: Developing with Google App Engine
 

Plus de jeresig

Does Coding Every Day Matter?
Does Coding Every Day Matter?Does Coding Every Day Matter?
Does Coding Every Day Matter?jeresig
 
Accidentally Becoming a Digital Librarian
Accidentally Becoming a Digital LibrarianAccidentally Becoming a Digital Librarian
Accidentally Becoming a Digital Librarianjeresig
 
2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)jeresig
 
Computer Vision as Art Historical Investigation
Computer Vision as Art Historical InvestigationComputer Vision as Art Historical Investigation
Computer Vision as Art Historical Investigationjeresig
 
Hacking Art History
Hacking Art HistoryHacking Art History
Hacking Art Historyjeresig
 
Using JS to teach JS at Khan Academy
Using JS to teach JS at Khan AcademyUsing JS to teach JS at Khan Academy
Using JS to teach JS at Khan Academyjeresig
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art Historyjeresig
 
NYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri ResultsNYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri Resultsjeresig
 
EmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image AnalysisEmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image Analysisjeresig
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art Historyjeresig
 
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)jeresig
 
Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)jeresig
 
jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jeresig
 
jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)jeresig
 
jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)jeresig
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobilejeresig
 
jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)jeresig
 
Holistic JavaScript Performance
Holistic JavaScript PerformanceHolistic JavaScript Performance
Holistic JavaScript Performancejeresig
 
Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)jeresig
 
Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)jeresig
 

Plus de jeresig (20)

Does Coding Every Day Matter?
Does Coding Every Day Matter?Does Coding Every Day Matter?
Does Coding Every Day Matter?
 
Accidentally Becoming a Digital Librarian
Accidentally Becoming a Digital LibrarianAccidentally Becoming a Digital Librarian
Accidentally Becoming a Digital Librarian
 
2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)
 
Computer Vision as Art Historical Investigation
Computer Vision as Art Historical InvestigationComputer Vision as Art Historical Investigation
Computer Vision as Art Historical Investigation
 
Hacking Art History
Hacking Art HistoryHacking Art History
Hacking Art History
 
Using JS to teach JS at Khan Academy
Using JS to teach JS at Khan AcademyUsing JS to teach JS at Khan Academy
Using JS to teach JS at Khan Academy
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
 
NYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri ResultsNYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri Results
 
EmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image AnalysisEmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image Analysis
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
 
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
 
Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)
 
jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)
 
jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)
 
jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)
 
Holistic JavaScript Performance
Holistic JavaScript PerformanceHolistic JavaScript Performance
Holistic JavaScript Performance
 
Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)
 
Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)
 

Dernier

UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 

Dernier (20)

UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 

Performance Improvements in Browsers

  • 1. Performance Improvements in Browsers John Resig http://ejohn.org/ - http://twitter.com/jeresig/
  • 2. About Me Work for the Mozilla Corporation (Firefox!) ✦ ✦ Do a lot of JavaScript performance analysis ✦ Dromaeo.com is my performance test suite ✦ Tests the performance of JavaScript engines ✦ Tests the performance of browser DOM Creator of the jQuery JavaScript Library ✦ ✦ http://jquery.com/ ✦ Used by Microsoft, Google, Adobe, Nokia, IBM, Intel, CBS News, NBC, etc.
  • 3. Upcoming Browsers The browsers: ✦ ✦ Firefox 3.1 ✦ Safari 4 ✦ Internet Explorer 8 ✦ Opera 10 ✦ Google Chrome Defining characteristics: ✦ ✦ Better performance ✦ Advanced JavaScript engines
  • 4. Firefox 3.1 Set to be released Spring 2009 ✦ Goals: ✦ ✦ Performance improvements ✦ Video and Audio tags ✦ Private browsing Beta 2 just released ✦ http://developer.mozilla.org/En/Firefox_3.1_for_developers ✦
  • 5. Safari 4 Released in conjunction with OS X 10.6 ✦ Features: ✦ ✦ Performance improvements ✦ Desktop Apps ✦ ACID 3 compliance ✦ Revamped dev tools Preview seeded to developers ✦ http://webkit.org/blog/ ✦
  • 6. Internet Explorer 8 Released early 2009 ✦ Features: ✦ ✦ Backwards compatibility with IE 7 ✦ Web Clips (trim out a part of a page and place on desktop) ✦ Process per tab RC1 recently ✦ released http://www.microsoft.com/ ✦ windows/internet-explorer/ beta/readiness/new-features.aspx
  • 7. Opera 10 Unspecified release schedule (2009?) ✦ Features: ✦ ✦ ACID 3 compliance ✦ Video and Audio tags Opera 9.6 recently released ✦ http://labs.opera.com/ ✦
  • 8. Google Chrome Chrome 1.0 September 2008 ✦ Features: ✦ ✦ Private browsing ✦ Process per tab Chrome 2.0 upcoming ✦ http://googlechromereleases.blogspot.com/ ✦
  • 9. Process Per Tab Most browsers have a single process ✦ ✦ Share memory, resources ✦ Pages rendered using threads IE 8 and Chrome split tabs into individual ✦ processes What does this change? ✦ ✦ Pages can do more processing ✦ (Not block the UI or other tabs) ✦ Tabs consume more memory
  • 10. Process Per Tab Examples of changes, in Chrome. ✦ Timer speed is what you set it to. ✦ ✦ Browsers cap the speed to 10ms. ✦ setInterval(fn, 1); Can do more non-stop processing, without ✦ warning: while (true) {} Chrome has a process manager (like the ✦ OS process manager - see CPU, Memory)
  • 11. JavaScript Engines New wave of engines: ✦ ✦ Firefox: TraceMonkey ✦ Safari: SquirrelFish (Extreme) ✦ Chrome: V8 Continually leap-frogging each other ✦
  • 12. Common Areas Virtual Machines ✦ ✦ Optimized to run a JavaScript-specific bytecode Shaping ✦ ✦ Determine if two objects are similar ✦ Optimize behavior based upon that ✦ “Walks like a duck, quacks like a duck” ✦ if ( obj.walks && obj.quacks ) {}
  • 13. Engine Layers JavaScript Code JavaScript Engine (C++) Virtual Bytecode Machine Machine Code
  • 14. Bytecode Specific low-level commands ✦ Written in machine code ✦ a + b; ✦ PLUS( a, b ) { ✦ IF ISSTRING(a) OR ISSTRING(b) { return CONCAT( a, b ); } ELSE { return ADD( a, b ); } }
  • 15. Shaping Simple JavaScript code: ✦ obj.method() GETPROP( obj, name ) { ✦ IF ISOBJECT(obj) { IF HASPROP(obj, name) return PROP(obj, name); ELSE return PROTO(obj, name) } ELSE { ERROR } }
  • 16. Shaping (cont.) EXEC( prop ) { ✦ IF ISFN( prop ) { RUN( prop ) } ELSE { ERROR } } After shaping: ✦ RUN( PROP( obj, name ) ) Optimized Bytecode ✦
  • 17. TraceMonkey Firefox uses an engine called ✦ SpiderMonkey (written in C) Tracing technology layered on for Firefox ✦ 3.1 (dubbed ‘TraceMonkey’) Hyper-optimizes repeating patterns into ✦ bytecode http://ejohn.org/blog/tracemonkey/ ✦
  • 18. Tracing for ( var i = 0; i < 1000; i++ ) { ✦ var foo = stuff[i][0]; foo = “more stuff ” + someFn( foo ); } function someFn( foo ) { return foo.substr(1); } Loop is costly ✦ ✦ ISNUM(i) ✦ ADD(i, 1) ✦ COMPARE( i, 1000 )
  • 19. Function Inlining for ( var i = 0; i < 1000; i++ ) { ✦ var foo = stuff[i][0]; foo = “more stuff ” + foo.substr(1); }
  • 20. SquirrelFish Just-in-time compilation for JavaScript ✦ Compiles a bytecode for common ✦ functionality Specialties: ✦ ✦ Bytecodes for regular expressions (super- fast) http://arstechnica.com/journals/linux.ars/2008/10/07/extreme- ✦ javascript-performance
  • 21. Chrome V8 Makes extensive use of shaping (fast ✦ property lookups) Hyper-optimized function calls and ✦ recursion Dynamic machine code generation ✦ http://code.google.com/p/v8/ ✦
  • 22. Measuring Speed SunSpider ✦ ✦ Released by the WebKit team last fall ✦ Focuses completely on JavaScript Dromaeo ✦ ✦ Released by Mozilla this spring ✦ Mix of JavaScript and DOM V8 Benchmark ✦ ✦ Released by Chrome team last month ✦ Lots of recursion testing Quality: http://ejohn.org/blog/javascript-benchmark-quality/ ✦
  • 27. Network Steve Souders’ UA tool: ✦ http://stevesouders.com/ua/ Also see: YSlow ✦
  • 28. Simultaneous Conn. Number of downloads per domain ✦ Should be at least 4 ✦ ✦ FF 2, IE 6, and IE 7 are 2 ✦ Safari is 4 ✦ Everyone else is 6-7 Max connections: Number of simultaneous ✦ downloads ✦ Firefox, Opera: 25-30 ✦ Everyone else: 50-60
  • 29. Parallel Scripts Download scripts simultaneously ✦ Even though they must execute in order ✦ <script defer> ✦ ✦ From Internet Explorer ✦ Just landed for Firefox 3.1 ✦ In Opera as well ✦ Replacement for JavaScript-based loading
  • 30. Redirect Caching A simple request: ✦ http://foo.com -> http://www.foo.com -> http://www.foo.com/ Very costly, should be cached. ✦ Chrome and Firefox do well here. ✦
  • 31. Link Prefetching <link rel=”prefetch” href=”someimg.png”/> ✦ Pre-load resources for later use ✦ ✦ (images, stylesheets) Currently only in Firefox ✦ Replacement for JavaScript preloading ✦
  • 33. postMessage A way to pass messages amongst multiple ✦ frames and windows Implemented in all browsers (in some ✦ capacity). Sending a message: ✦ iframe.postMessage(“test”, ✦ “http://google.com/”);
  • 34. postMessage Receiving a Message: ✦ window.addEventListener(”message”, function(e){ ✦ if (e.origin !== “http://example.com:8080“) return; alert( e.data ); }, false);
  • 35. Cross-Domain XHR Landed in Firefox 3.1, support in IE 8 ✦ Add a header to your content: ✦ Access-Control-Allow-Origin: * XMLHttpRequest can now pull it in, even ✦ across domains https://developer.mozilla.org/En/ ✦ HTTP_Access_Control
  • 37. Class Name New method: ✦ getElementsByClassName Works just like: ✦ getElementsByTagName Fast way of finding elements by their class ✦ name(s): <div class=”person sidebar”></div> document.getElementsByClassName(“sidebar”) ✦ Safari 3.1, Firefox 3.0, Opera 9.6 ✦ Drop-in replacement for existing queries ✦
  • 39. Selectors API querySelectorAll ✦ Use CSS selectors to find DOM elements ✦ document.querySelectorAll(“div p”) ✦ Good cross-browser support ✦ ✦ IE 8, Safari 4, FF 3, Opera 10 Drop-in replacement for JavaScript ✦ libraries.
  • 41. Traversal API W3C Specification ✦ Implemented in Firefox 3.1 ✦ Some methods: ✦ ✦ .nextElementSibling ✦ .previousElementSibling ✦ .firstElementChild ✦ .lastElementChild Related: ✦ ✦ .children (All browsers)
  • 43. HTML 5 Dragging Includes full support drag and drop events ✦ Events: dragstart, dragend, dragenter, ✦ dragleave, dragover, drag, drop <div draggable=”true” ✦ ondragstart=”event.dataTransfer.setData (’text/plain’, ‘This text may be dragged’)”> This text <strong>may</strong> be dragged. </div> Only in Firefox 3.1 ✦
  • 44. Bounding getBoundingClientRect ✦ ✦ Introduced by IE ✦ Seeing a wider introduction Super-fast way to determine the position ✦ of an element Better alternative to manual computation ✦
  • 45. JavaScript Threads JavaScript has always been single-threaded ✦ Limited to working linearly ✦ New HTML 5 Web Workers ✦ Spawn JavaScript threads ✦ Run complicated work in the background ✦ ✦ Doesn’t block the browser! Drop-in usable, huge quality boost. ✦
  • 46. A Simple Worker var myWorker = new Worker(’my_worker.js’);   ✦ myWorker.onmessage = function(event) {   alert(”Called back by the worker!n”);   };  
  • 47. Styling and Effects Lots of commons styling effects ✦ Can be replaced and simplified by the ✦ browser Drastically simplify pages and improve ✦ their performance
  • 48. Rounded Corners CSS 3 specification ✦ Implemented in Safari, Firefox, Opera ✦ ✦ -moz-border-radius: 5px; ✦ -webkit-border-radius: 5px; Can replace clumsy, slow, old methods. ✦
  • 49. Shadows Box Shadows ✦ ✦ Shadow behind a div -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) ✦ Text Shadows ✦ ✦ Shadow behind some text text-shadow: -1px -1px #666, 1px 1px #FFF; ✦ Implemented in WebKit, Firefox ✦ Can replace clumsy, slow, old methods. ✦
  • 50. Example Shadows Demos: http://maettig.com/code/css/text- ✦ shadow.html http://webkit.org/blog/86/box-shadow/
  • 51. Custom Fonts Load in custom fonts ✦ Can load TrueType fonts ✦ Implemented in Safari and Firefox ✦ Demo: http://ejohn.org/apps/fontface/ ✦ blok.html Can replace using Flash-based fonts. ✦
  • 52. Transforms and Animations Transforms allow you to rotate, scale, and ✦ offset an element ✦ -webkit-transform: rotate(30deg); Animations allow you to morph an ✦ element using nothing but CSS ✦ -webkit-transition: all 1s ease-in-out; Implemented in WebKit and Firefox ✦ Demo: http://www.the-art-of-web.com/css/ ✦ css-animation/ Can replace JS animations, today. ✦
  • 53. Canvas Proposed and first implemented by Apple ✦ in WebKit A 2d drawing layer ✦ ✦ With possibilities for future expansion Embedded in web pages (looks and ✦ behaves like an img element) Works in all browsers (IE with ExCanvas) ✦ Offload rendering to client ✦ Better user interaction ✦
  • 54. Shapes and Paths NOT vectors (unlike SVG) ✦ Rectangles ✦ Arcs ✦ Lines ✦ Curves ✦ Charts: ✦
  • 55. Fill and Stroke All can be styled (similar to CSS) ✦ Stroke styles the path (or outline) ✦ Fill is the color of the interior ✦ Sparklines: ✦
  • 56. Canvas Embedding Canvases can consume: ✦ ✦ Images ✦ Other Canvases Will be able to consume (Firefox 3.1, Safari ✦ 4): ✦ Video In an extension: ✦ ✦ Web Pages
  • 57. Data
  • 58. SQL Storage Part of HTML 5 - a full client-side SQL ✦ database (SQLite) Implemented in WebKit ✦ var database = openDatabase(”db”, “1.0”); ✦ database.executeSql(”SELECT * FROM test”, function(result1) { // do something with the results database.executeSql(”DROP TABLE test”); });
  • 59. Native JSON JSON is a format for transferring data ✦ ✦ (Uses JavaScript syntax to achieve this.) ✦ Has been slow and a little hacky. Browser now have native support in ✦ Firefox 3.1 and IE 8 Drop-in usable, today ✦ ✦ JSON.encode(object) ✦ JSON.decode(string)
  • 60. Performance Encoding: ✦ Decoding: ✦
  • 62. Painting When something is physically drawn to ✦ the screen Hard to quantify without more ✦ information Firefox 3.1 includes a new event: ✦ MozAfterPaint Demo: http://ejohn.org/blog/browser- ✦ paint-events/
  • 64. Reflow CSS has lots of boxes in it ✦ Position of boxes is constantly recomputed ✦ and repositioned (before being painted) ✦ This is reflow Demo: http://dougt.wordpress.com/ ✦ 2008/05/24/what-is-a-reflow/
  • 65. Questions? John Resig ✦ http://ejohn.org/ http://twitter.com/jeresig/