SlideShare uma empresa Scribd logo
1 de 56
Baixar para ler offline
New Features
       Coming in
       Browsers
                  John Resig
http://ejohn.org/ - http://twitter.com/jeresig/
             jeresig@gmail.com
About Me
✦   Work for the Mozilla Corporation (Firefox!)
    ✦ Do a lot of JavaScript work
    ✦ Dromaeo.com is my performance test suite
      ✦ Tests the performance of JavaScript engines
      ✦ Tests the performance of browser DOM
    ✦ TestSwarm.com is an application for
      distributed JavaScript testing.
✦   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.5
    ✦ Safari 4
    ✦ Internet Explorer 9 (?)
    ✦ Opera 10
    ✦ Google Chrome 2

✦   Defining characteristics:
    ✦ Better performance
    ✦ Advanced JavaScript engines
Firefox 3.5
✦   Set to be released Summer 2009
✦   Goals:
    ✦ Performance improvements
    ✦ Video and Audio tags
    ✦ Private browsing

✦   Beta 4 just released
✦   http://developer.mozilla.org/En/Firefox_3.5_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

✦   http://www.microsoft.com/
    windows/internet-explorer/
    beta/readiness/new-features.aspx

✦   No details on IE 9, yet.
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.5 (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
Parallel Scripts
✦   Download scripts simultaneously
✦   Even though they must execute in order
✦   <script defer>
    ✦ From Internet Explorer
    ✦ Just landed for Firefox 3.5
    ✦ In Opera as well
    ✦ Replacement for JavaScript-based
      loading
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 secure way to pass string messages
    amongst multiple frames and windows
✦   Implemented in all browsers (in some
    capacity).

           addEventListener(“message”,...)




                          postMessage(“hi!”)
postMessage
✦   Sending a message:
✦   iframe.postMessage(“test”,
      “http://google.com/”);
✦   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.5, 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(“#foo > p”)
✦   Good cross-browser support
    ✦ IE 8, Safari 3, FF 3.5, Opera 10

✦   Drop-in replacement for JavaScript
    libraries.
Speed Results




http://www2.webkit.org/perf/slickspeed/
Traversal API
✦   W3C Specification
✦   Implemented in Firefox 3.5
✦   Some methods:
    ✦ .nextElementSibling
    ✦ .previousElementSibling
    ✦ .firstElementChild
    ✦ .lastElementChild              nextElementSibling


                                 <div>      Text          <div>
✦   Related:
                                    previousElementSibling
    ✦ .children (All browsers)
Styling and Effects
✦   Lots of commons styling effects
✦   Can be replaced and simplified by the
    browser
✦   Drastically simplify pages and improve
    their performance
✦   New: The ability to apply SVG transforms
    and effects using CSS.
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.
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(”DELETE FROM test WHERE 1=1;”);
    });
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.5 and IE 8
✦   Drop-in usable, today
    ✦ JSON.encode(object)
    ✦ JSON.decode(string)
Performance
✦   Encoding:




✦   Decoding:
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.5, Safari
    4):
    ✦ Video

✦   In an extension:
    ✦ Web Pages
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”);  
    };  
Questions?
✦   John Resig
    http://ejohn.org/
    http://twitter.com/jeresig/
    jeresig@gmail.com
✦   Mozilla will be at the Fall Career Fair

Mais conteúdo relacionado

Mais procurados

Isomorphic React Applications: Performance And Scalability
Isomorphic React Applications: Performance And ScalabilityIsomorphic React Applications: Performance And Scalability
Isomorphic React Applications: Performance And ScalabilityDenis Izmaylov
 
JS-IL: Getting MEAN in 1 Hour
JS-IL: Getting MEAN in 1 HourJS-IL: Getting MEAN in 1 Hour
JS-IL: Getting MEAN in 1 HourValeri Karpov
 
Алексей Швайка "Bundling: you are doing it wrong"
Алексей Швайка "Bundling: you are doing it wrong"Алексей Швайка "Bundling: you are doing it wrong"
Алексей Швайка "Bundling: you are doing it wrong"Fwdays
 
PHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web DevelopmentPHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web DevelopmentIrfan Maulana
 
React server side rendering performance
React server side rendering performanceReact server side rendering performance
React server side rendering performanceNick Dreckshage
 
Module, AMD, RequireJS
Module, AMD, RequireJSModule, AMD, RequireJS
Module, AMD, RequireJS偉格 高
 
Grokking #9: Building a real-time and offline editing service with Couchbase
Grokking #9: Building a real-time and offline editing service with CouchbaseGrokking #9: Building a real-time and offline editing service with Couchbase
Grokking #9: Building a real-time and offline editing service with CouchbaseOliver N
 
MEAN Stack WeNode Barcelona Workshop
MEAN Stack WeNode Barcelona WorkshopMEAN Stack WeNode Barcelona Workshop
MEAN Stack WeNode Barcelona WorkshopValeri Karpov
 
Brief Intro to Phoenix - Elixir Meetup at BukaLapak
Brief Intro to Phoenix - Elixir Meetup at BukaLapakBrief Intro to Phoenix - Elixir Meetup at BukaLapak
Brief Intro to Phoenix - Elixir Meetup at BukaLapakRiza Fahmi
 
NodeSummit - MEAN Stack
NodeSummit - MEAN StackNodeSummit - MEAN Stack
NodeSummit - MEAN StackValeri Karpov
 
Production optimization with React and Webpack
Production optimization with React and WebpackProduction optimization with React and Webpack
Production optimization with React and Webpackk88hudson
 
Drupal, Android and iPhone
Drupal, Android and iPhoneDrupal, Android and iPhone
Drupal, Android and iPhoneAlexandru Badiu
 
Performace optimizations and frontend happiness
Performace optimizations and frontend happinessPerformace optimizations and frontend happiness
Performace optimizations and frontend happinessnuria_ruiz
 
Webpack and Web Performance Optimization
Webpack and Web Performance OptimizationWebpack and Web Performance Optimization
Webpack and Web Performance OptimizationChen-Tien Tsai
 
In-browser storage and me
In-browser storage and meIn-browser storage and me
In-browser storage and meJason Casden
 
Performance Metrics in a Day with Selenium
Performance Metrics in a Day with SeleniumPerformance Metrics in a Day with Selenium
Performance Metrics in a Day with SeleniumMark Watson
 
Complete MVC on NodeJS
Complete MVC on NodeJSComplete MVC on NodeJS
Complete MVC on NodeJSHüseyin BABAL
 

Mais procurados (20)

Why NodeJS
Why NodeJSWhy NodeJS
Why NodeJS
 
Isomorphic React Applications: Performance And Scalability
Isomorphic React Applications: Performance And ScalabilityIsomorphic React Applications: Performance And Scalability
Isomorphic React Applications: Performance And Scalability
 
The Onion
The OnionThe Onion
The Onion
 
JS-IL: Getting MEAN in 1 Hour
JS-IL: Getting MEAN in 1 HourJS-IL: Getting MEAN in 1 Hour
JS-IL: Getting MEAN in 1 Hour
 
Алексей Швайка "Bundling: you are doing it wrong"
Алексей Швайка "Bundling: you are doing it wrong"Алексей Швайка "Bundling: you are doing it wrong"
Алексей Швайка "Bundling: you are doing it wrong"
 
PHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web DevelopmentPHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web Development
 
React server side rendering performance
React server side rendering performanceReact server side rendering performance
React server side rendering performance
 
Module, AMD, RequireJS
Module, AMD, RequireJSModule, AMD, RequireJS
Module, AMD, RequireJS
 
Grokking #9: Building a real-time and offline editing service with Couchbase
Grokking #9: Building a real-time and offline editing service with CouchbaseGrokking #9: Building a real-time and offline editing service with Couchbase
Grokking #9: Building a real-time and offline editing service with Couchbase
 
MEAN Stack WeNode Barcelona Workshop
MEAN Stack WeNode Barcelona WorkshopMEAN Stack WeNode Barcelona Workshop
MEAN Stack WeNode Barcelona Workshop
 
Brief Intro to Phoenix - Elixir Meetup at BukaLapak
Brief Intro to Phoenix - Elixir Meetup at BukaLapakBrief Intro to Phoenix - Elixir Meetup at BukaLapak
Brief Intro to Phoenix - Elixir Meetup at BukaLapak
 
NodeSummit - MEAN Stack
NodeSummit - MEAN StackNodeSummit - MEAN Stack
NodeSummit - MEAN Stack
 
Production optimization with React and Webpack
Production optimization with React and WebpackProduction optimization with React and Webpack
Production optimization with React and Webpack
 
Drupal, Android and iPhone
Drupal, Android and iPhoneDrupal, Android and iPhone
Drupal, Android and iPhone
 
Performace optimizations and frontend happiness
Performace optimizations and frontend happinessPerformace optimizations and frontend happiness
Performace optimizations and frontend happiness
 
Webpack and Web Performance Optimization
Webpack and Web Performance OptimizationWebpack and Web Performance Optimization
Webpack and Web Performance Optimization
 
In-browser storage and me
In-browser storage and meIn-browser storage and me
In-browser storage and me
 
Performance Metrics in a Day with Selenium
Performance Metrics in a Day with SeleniumPerformance Metrics in a Day with Selenium
Performance Metrics in a Day with Selenium
 
Complete MVC on NodeJS
Complete MVC on NodeJSComplete MVC on NodeJS
Complete MVC on NodeJS
 
JavaScript Web Workers
JavaScript Web WorkersJavaScript Web Workers
JavaScript Web Workers
 

Destaque

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 Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)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
 
The zadu dicionary
The zadu dicionaryThe zadu dicionary
The zadu dicionarytapeworm
 

Destaque (6)

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 Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)
 
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)
 
The zadu dicionary
The zadu dicionaryThe zadu dicionary
The zadu dicionary
 

Semelhante a New Features Coming in Browsers (RIT '09)

Performance Improvements in Browsers
Performance Improvements in BrowsersPerformance Improvements in Browsers
Performance Improvements in Browsersjeresig
 
Performance Improvements In Browsers
Performance Improvements In BrowsersPerformance Improvements In Browsers
Performance Improvements In BrowsersGoogleTecTalks
 
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...Building Blocks
 
Intro to go web assembly
Intro to go web assemblyIntro to go web assembly
Intro to go web assemblyChe-Chia Chang
 
Cannibalising The Google App Engine
Cannibalising The  Google  App  EngineCannibalising The  Google  App  Engine
Cannibalising The Google App Enginecatherinewall
 
Performance Improvements in Browsers
Performance Improvements in BrowsersPerformance Improvements in Browsers
Performance Improvements in Browsersjeresig
 
Cape Cod Web Technology Meetup - 3
Cape Cod Web Technology Meetup - 3Cape Cod Web Technology Meetup - 3
Cape Cod Web Technology Meetup - 3Asher Martin
 
Google Back To Front: From Gears to App Engine and Beyond
Google Back To Front: From Gears to App Engine and BeyondGoogle Back To Front: From Gears to App Engine and Beyond
Google Back To Front: From Gears to App Engine and Beyonddion
 
Tuning Web Performance
Tuning Web PerformanceTuning Web Performance
Tuning Web PerformanceEric ShangKuan
 
Tuning web performance
Tuning web performanceTuning web performance
Tuning web performanceGeorge Ang
 
Making Chrome Extension with AngularJS
Making Chrome Extension with AngularJSMaking Chrome Extension with AngularJS
Making Chrome Extension with AngularJSBen Lau
 
Web 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web SitesWeb 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web SitesSteve Souders
 
Developing web applications in 2010
Developing web applications in 2010Developing web applications in 2010
Developing web applications in 2010Ignacio Coloma
 
Intro to node.js - Ran Mizrahi (27/8/2014)
Intro to node.js - Ran Mizrahi (27/8/2014)Intro to node.js - Ran Mizrahi (27/8/2014)
Intro to node.js - Ran Mizrahi (27/8/2014)Ran Mizrahi
 
Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)Ran Mizrahi
 
HTML5 應用程式開發簡介
HTML5 應用程式開發簡介HTML5 應用程式開發簡介
HTML5 應用程式開發簡介Timothy Chien
 

Semelhante a New Features Coming in Browsers (RIT '09) (20)

Performance Improvements in Browsers
Performance Improvements in BrowsersPerformance Improvements in Browsers
Performance Improvements in Browsers
 
Performance Improvements In Browsers
Performance Improvements In BrowsersPerformance Improvements In Browsers
Performance Improvements In Browsers
 
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
 
Intro to go web assembly
Intro to go web assemblyIntro to go web assembly
Intro to go web assembly
 
Cannibalising The Google App Engine
Cannibalising The  Google  App  EngineCannibalising The  Google  App  Engine
Cannibalising The Google App Engine
 
JS class slides (2016)
JS class slides (2016)JS class slides (2016)
JS class slides (2016)
 
JS Class 2016
JS Class 2016JS Class 2016
JS Class 2016
 
Sanjeev ghai 12
Sanjeev ghai 12Sanjeev ghai 12
Sanjeev ghai 12
 
Performance Improvements in Browsers
Performance Improvements in BrowsersPerformance Improvements in Browsers
Performance Improvements in Browsers
 
Cape Cod Web Technology Meetup - 3
Cape Cod Web Technology Meetup - 3Cape Cod Web Technology Meetup - 3
Cape Cod Web Technology Meetup - 3
 
Google Back To Front: From Gears to App Engine and Beyond
Google Back To Front: From Gears to App Engine and BeyondGoogle Back To Front: From Gears to App Engine and Beyond
Google Back To Front: From Gears to App Engine and Beyond
 
Tuning Web Performance
Tuning Web PerformanceTuning Web Performance
Tuning Web Performance
 
Tuning web performance
Tuning web performanceTuning web performance
Tuning web performance
 
Making Chrome Extension with AngularJS
Making Chrome Extension with AngularJSMaking Chrome Extension with AngularJS
Making Chrome Extension with AngularJS
 
Web 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web SitesWeb 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web Sites
 
Developing web applications in 2010
Developing web applications in 2010Developing web applications in 2010
Developing web applications in 2010
 
Intro to node.js - Ran Mizrahi (27/8/2014)
Intro to node.js - Ran Mizrahi (27/8/2014)Intro to node.js - Ran Mizrahi (27/8/2014)
Intro to node.js - Ran Mizrahi (27/8/2014)
 
Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)
 
Ui dev@naukri-2011
Ui dev@naukri-2011Ui dev@naukri-2011
Ui dev@naukri-2011
 
HTML5 應用程式開發簡介
HTML5 應用程式開發簡介HTML5 應用程式開發簡介
HTML5 應用程式開發簡介
 

Mais 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 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 (Fronteer 2011)
jQuery Open Source (Fronteer 2011)jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)jeresig
 
JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)jeresig
 
Meta Programming with JavaScript
Meta Programming with JavaScriptMeta Programming with JavaScript
Meta Programming with JavaScriptjeresig
 
Advancing JavaScript with Libraries (Yahoo Tech Talk)
Advancing JavaScript with Libraries (Yahoo Tech Talk)Advancing JavaScript with Libraries (Yahoo Tech Talk)
Advancing JavaScript with Libraries (Yahoo Tech Talk)jeresig
 
The Future of JavaScript (Ajax Exp '07)
The Future of JavaScript (Ajax Exp '07)The Future of JavaScript (Ajax Exp '07)
The Future of JavaScript (Ajax Exp '07)jeresig
 
State of jQuery and Drupal
State of jQuery and DrupalState of jQuery and Drupal
State of jQuery and Drupaljeresig
 
Khan Academy Computer Science
Khan Academy Computer ScienceKhan Academy Computer Science
Khan Academy Computer Sciencejeresig
 

Mais 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 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 (Fronteer 2011)
jQuery Open Source (Fronteer 2011)jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)
 
JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)
 
Meta Programming with JavaScript
Meta Programming with JavaScriptMeta Programming with JavaScript
Meta Programming with JavaScript
 
Advancing JavaScript with Libraries (Yahoo Tech Talk)
Advancing JavaScript with Libraries (Yahoo Tech Talk)Advancing JavaScript with Libraries (Yahoo Tech Talk)
Advancing JavaScript with Libraries (Yahoo Tech Talk)
 
The Future of JavaScript (Ajax Exp '07)
The Future of JavaScript (Ajax Exp '07)The Future of JavaScript (Ajax Exp '07)
The Future of JavaScript (Ajax Exp '07)
 
State of jQuery and Drupal
State of jQuery and DrupalState of jQuery and Drupal
State of jQuery and Drupal
 
Khan Academy Computer Science
Khan Academy Computer ScienceKhan Academy Computer Science
Khan Academy Computer Science
 

Último

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
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
 
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
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
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
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
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
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
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
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
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
 

Último (20)

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
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
 
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
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
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
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
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
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
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
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
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
 

New Features Coming in Browsers (RIT '09)

  • 1. New Features Coming in Browsers John Resig http://ejohn.org/ - http://twitter.com/jeresig/ jeresig@gmail.com
  • 2. About Me ✦ Work for the Mozilla Corporation (Firefox!) ✦ Do a lot of JavaScript work ✦ Dromaeo.com is my performance test suite ✦ Tests the performance of JavaScript engines ✦ Tests the performance of browser DOM ✦ TestSwarm.com is an application for distributed JavaScript testing. ✦ 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.5 ✦ Safari 4 ✦ Internet Explorer 9 (?) ✦ Opera 10 ✦ Google Chrome 2 ✦ Defining characteristics: ✦ Better performance ✦ Advanced JavaScript engines
  • 4. Firefox 3.5 ✦ Set to be released Summer 2009 ✦ Goals: ✦ Performance improvements ✦ Video and Audio tags ✦ Private browsing ✦ Beta 4 just released ✦ http://developer.mozilla.org/En/Firefox_3.5_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 ✦ http://www.microsoft.com/ windows/internet-explorer/ beta/readiness/new-features.aspx ✦ No details on IE 9, yet.
  • 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.5 (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. Parallel Scripts ✦ Download scripts simultaneously ✦ Even though they must execute in order ✦ <script defer> ✦ From Internet Explorer ✦ Just landed for Firefox 3.5 ✦ In Opera as well ✦ Replacement for JavaScript-based loading
  • 29. Link Prefetching ✦ <link rel=”prefetch” href=”someimg.png”/> ✦ Pre-load resources for later use ✦ (images, stylesheets) ✦ Currently only in Firefox ✦ Replacement for JavaScript preloading
  • 31. postMessage ✦ A secure way to pass string messages amongst multiple frames and windows ✦ Implemented in all browsers (in some capacity). addEventListener(“message”,...) postMessage(“hi!”)
  • 32. postMessage ✦ Sending a message: ✦ iframe.postMessage(“test”, “http://google.com/”); ✦ Receiving a Message: ✦ window.addEventListener(”message”, function(e){ if (e.origin !== “http://example.com:8080“) return; alert( e.data ); }, false);
  • 33. Cross-Domain XHR ✦ Landed in Firefox 3.5, 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
  • 35. 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
  • 37. Selectors API ✦ querySelectorAll ✦ Use CSS selectors to find DOM elements ✦ document.querySelectorAll(“#foo > p”) ✦ Good cross-browser support ✦ IE 8, Safari 3, FF 3.5, Opera 10 ✦ Drop-in replacement for JavaScript libraries.
  • 39. Traversal API ✦ W3C Specification ✦ Implemented in Firefox 3.5 ✦ Some methods: ✦ .nextElementSibling ✦ .previousElementSibling ✦ .firstElementChild ✦ .lastElementChild nextElementSibling <div> Text <div> ✦ Related: previousElementSibling ✦ .children (All browsers)
  • 40. Styling and Effects ✦ Lots of commons styling effects ✦ Can be replaced and simplified by the browser ✦ Drastically simplify pages and improve their performance ✦ New: The ability to apply SVG transforms and effects using CSS.
  • 41. Rounded Corners ✦ CSS 3 specification ✦ Implemented in Safari, Firefox, Opera ✦ -moz-border-radius: 5px; ✦ -webkit-border-radius: 5px; ✦ Can replace clumsy, slow, old methods.
  • 42. 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.
  • 43. Example Shadows ✦ Demos: http://maettig.com/code/css/text- shadow.html http://webkit.org/blog/86/box-shadow/
  • 44. 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.
  • 45. 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.
  • 46. Data
  • 47. 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(”DELETE FROM test WHERE 1=1;”); });
  • 48. 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.5 and IE 8 ✦ Drop-in usable, today ✦ JSON.encode(object) ✦ JSON.decode(string)
  • 49. Performance ✦ Encoding: ✦ Decoding:
  • 50. 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
  • 51. Shapes and Paths ✦ NOT vectors (unlike SVG) ✦ Rectangles ✦ Arcs ✦ Lines ✦ Curves ✦ Charts:
  • 52. Fill and Stroke ✦ All can be styled (similar to CSS) ✦ Stroke styles the path (or outline) ✦ Fill is the color of the interior ✦ Sparklines:
  • 53. Canvas Embedding ✦ Canvases can consume: ✦ Images ✦ Other Canvases ✦ Will be able to consume (Firefox 3.5, Safari 4): ✦ Video ✦ In an extension: ✦ Web Pages
  • 54. 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.
  • 55. A Simple Worker ✦ var myWorker = new Worker(’my_worker.js’);   myWorker.onmessage = function(event) {   alert(”Called back by the worker!n”);   };  
  • 56. Questions? ✦ John Resig http://ejohn.org/ http://twitter.com/jeresig/ jeresig@gmail.com ✦ Mozilla will be at the Fall Career Fair