SlideShare a Scribd company logo
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/

More Related Content

What's hot

Ajax Security
Ajax SecurityAjax Security
Ajax Security
Joe Walker
 
연구자 및 교육자를 위한 계산 및 분석 플랫폼 설계 - PyCon KR 2015
연구자 및 교육자를 위한 계산 및 분석 플랫폼 설계 - PyCon KR 2015연구자 및 교육자를 위한 계산 및 분석 플랫폼 설계 - PyCon KR 2015
연구자 및 교육자를 위한 계산 및 분석 플랫폼 설계 - PyCon KR 2015
Jeongkyu 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 2010
Nicholas Zakas
 
Socket applications
Socket applicationsSocket applications
Socket applications
Joã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 js
fakedarren
 
Play vs Rails
Play vs RailsPlay vs Rails
Play vs Rails
Daniel Cukier
 
Aligning Ember.js with Web Standards
Aligning Ember.js with Web StandardsAligning Ember.js with Web Standards
Aligning Ember.js with Web Standards
Matthew 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 Jasmine
Paulo Ragonha
 
SocketStream
SocketStreamSocketStream
SocketStream
Paul Jensen
 
Dancing with websocket
Dancing with websocketDancing with websocket
Dancing with websocket
Damien Krotkine
 
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
Ben 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 2013
Cosimo 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 Opera
Cosimo Streppone
 
Ugo Cei Presentation
Ugo Cei PresentationUgo Cei Presentation
Ugo Cei Presentation
RubyOnRails_dude
 
Thomas Fuchs Presentation
Thomas Fuchs PresentationThomas Fuchs Presentation
Thomas Fuchs Presentation
RubyOnRails_dude
 
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 2016
Boiteaweb
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
Nicholas Zakas
 
Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gears
dion
 

What's hot (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
 

Viewers also liked

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
jeresig
 
Ajax Performance
Ajax PerformanceAjax Performance
Ajax Performance
kaven 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 Brain
Web Directions
 
The Theory Of The Dom
The Theory Of The DomThe Theory Of The Dom
The Theory Of The Dom
kaven yan
 
The JSON Saga
The JSON SagaThe JSON Saga
The JSON Saga
kaven 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 games
Gregory Kukolj
 
Douglas Crockford - Ajax Security
Douglas Crockford - Ajax SecurityDouglas Crockford - Ajax Security
Douglas Crockford - Ajax Security
Web Directions
 
Json
JsonJson
OOP in JavaScript
OOP in JavaScriptOOP in JavaScript
OOP in JavaScript
manugoel2003
 
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 Javascript
Adieu
 
Advanced JavaScript Concepts
Advanced JavaScript ConceptsAdvanced JavaScript Concepts
Advanced JavaScript Concepts
Naresh Kumar
 
Scalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureScalable JavaScript Application Architecture
Scalable JavaScript Application Architecture
Nicholas Zakas
 
The JavaScript Programming Language
The JavaScript Programming LanguageThe JavaScript Programming Language
The JavaScript Programming Language
guestceb98b
 
Speed Up Your JavaScript
Speed Up Your JavaScriptSpeed Up Your JavaScript
Speed Up Your JavaScript
Nicholas Zakas
 

Viewers also liked (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
 

Similar to Performance Improvements in Browsers

Performance Improvements in Browsers
Performance Improvements in BrowsersPerformance Improvements in Browsers
Performance Improvements in Browsers
jeresig
 
The Future of Firefox and JavaScript
The Future of Firefox and JavaScriptThe Future of Firefox and JavaScript
The Future of Firefox and JavaScript
jeresig
 
jQuery 1.3 and jQuery UI
jQuery 1.3 and jQuery UIjQuery 1.3 and jQuery UI
jQuery 1.3 and jQuery UI
jeresig
 
Learning jQuery @ MIT
Learning jQuery @ MITLearning jQuery @ MIT
Learning jQuery @ MIT
jeresig
 
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 Tutorial
oscon2007
 
Going Live! with Comet
Going Live! with CometGoing Live! with Comet
Going Live! with Comet
Simon 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 Years
sneeu
 
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
Simon 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 you
Simon Willison
 
Os Wilhelm
Os WilhelmOs Wilhelm
Os Wilhelm
oscon2007
 
VUG5: Varnish at Opera Software
VUG5: Varnish at Opera SoftwareVUG5: Varnish at Opera Software
VUG5: Varnish at Opera Software
Cosimo Streppone
 
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
Simon Willison
 
Improve your Java Environment with Docker
Improve your Java Environment with DockerImprove your Java Environment with Docker
Improve your Java Environment with Docker
HanoiJUG
 
JavaFX Advanced
JavaFX AdvancedJavaFX Advanced
JavaFX Advanced
Paul Bakker
 
How Akamai Made ESI Testing Simpler
How Akamai Made ESI Testing SimplerHow Akamai Made ESI Testing Simpler
How Akamai Made ESI Testing Simpler
Akamai Developers & Admins
 
Intro to go web assembly
Intro to go web assemblyIntro to go web assembly
Intro to go web assembly
Che-Chia Chang
 
Nodejs and WebSockets
Nodejs and WebSocketsNodejs and WebSockets
Nodejs and WebSockets
Gonzalo 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 Engine
catherinewall
 

Similar to 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
 

More from 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 Librarian
jeresig
 
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 Investigation
jeresig
 
Hacking Art History
Hacking Art HistoryHacking Art History
Hacking Art History
jeresig
 
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
jeresig
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
jeresig
 
NYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri ResultsNYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri Results
jeresig
 
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
jeresig
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
jeresig
 
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 Mobile
jeresig
 
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 Performance
jeresig
 
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
 

More from 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)
 

Recently uploaded

"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
Fwdays
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
Pablo Gómez Abajo
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving
 
From Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMsFrom Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMs
Sease
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
UiPathCommunity
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
Mydbops
 
Christine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptxChristine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptx
christinelarrosa
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Neo4j
 
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Ukraine
 
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdfLee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
leebarnesutopia
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
Fwdays
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
ScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking ReplicationScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking Replication
ScyllaDB
 
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeckPoznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
FilipTomaszewski5
 
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
Fwdays
 
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
AlexanderRichford
 
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptxPRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
christinelarrosa
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
Day 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio FundamentalsDay 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio Fundamentals
UiPathCommunity
 

Recently uploaded (20)

"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
 
From Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMsFrom Natural Language to Structured Solr Queries using LLMs
From Natural Language to Structured Solr Queries using LLMs
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
 
Must Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during MigrationMust Know Postgres Extension for DBA and Developer during Migration
Must Know Postgres Extension for DBA and Developer during Migration
 
Christine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptxChristine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptx
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
 
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
GlobalLogic Java Community Webinar #18 “How to Improve Web Application Perfor...
 
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdfLee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
Lee Barnes - Path to Becoming an Effective Test Automation Engineer.pdf
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
ScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking ReplicationScyllaDB Tablets: Rethinking Replication
ScyllaDB Tablets: Rethinking Replication
 
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeckPoznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
Poznań ACE event - 19.06.2024 Team 24 Wrapup slidedeck
 
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
 
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
QR Secure: A Hybrid Approach Using Machine Learning and Security Validation F...
 
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptxPRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
Day 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio FundamentalsDay 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio Fundamentals
 

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/