SlideShare una empresa de Scribd logo
1 de 105
Descargar para leer sin conexión
High Performance JavaScript
Nicholas C. Zakas
Yahoo!, Inc.




                    The Web Industry Conference
                    September 21–25, 2010
                    Midtown Atlanta
Greetings, program




         Principal Front End      Contributor,
              Engineer         Creator of YUI Test




Author         Lead Author     Contributor           Lead Author
I know what you're thinking
Is he really going to use a Tron
    theme throughout this
         presentation?
Yes, because it's awesome
Well, mostly awsome
Does JavaScript performance
         matter?
After all, all browsers now have
     optimizing JavaScript engines




Tracemonkey/    V8     Squirrelfish   Chakra   Karakan
JaegarMonkey   (all)      (4+)         (9+)    (10.5+)
    (3.5+)
So our scripts are getting really,
           really fast
Old computers ran slow applications
     Small amounts of CPU power and memory
New computers are generally faster but
       slow applications still exist
More CPU + more memory = less disciplined application development
It's still possible to write slow
JavaScript on the new, faster
       JavaScript engines
JavaScript performance
        directly
affects user experience
"Know the enemy and know yourself; in a hundred battles you
                  will never be in peril."

                 -Sun Tzu, The Art of War
The UI Thread
The brains of the operation
The browser UI thread is responsible for
both UI updates and JavaScript execution
           Only one can happen at a time
Jobs for UI updates and JavaScript execution are
  added to a UI queue if the UI thread is busy
         Each job must wait in line for its turn to execute
<button id="btn" style="font-size: 30px; padding: 0.5em
    1em">Click Me</button>

<script type="text/javascript">
window.onload = function(){
   document.getElementById("btn").onclick = function(){
       //do something
   };
};
</script>
Before Click

UI Thread



time
                           UI Queue
When Clicked

UI Thread



time
                           UI Queue

                             UI Update

                             onclick

                             UI Update
When Clicked

UI Thread

 UI Update

time
                                   UI Queue

                                     onclick
        Draw down state
                                     UI Update
When Clicked

UI Thread

 UI Update   onclick

time
                              UI Queue

                                UI Update
When Clicked

UI Thread

 UI Update   onclick       UI Update

time
                                       UI Queue


               Draw up state
No UI updates while JavaScript is
           executing
JavaScript May Cause UI Update
<button id="btn" style="font-size: 30px; padding: 0.5em
    1em">Click Me</button>

<script type="text/javascript">
window.onload = function(){
   document.getElementById("btn").onclick = function(){
       var div = document.createElement(“div”);
       div.className = “tip”;
       div.innerHTML = “You clicked me!”;
       document.body.appendChild(div);
   };
};
</script>
A UI update must use the latest
        info available
Long-running JavaScript
          =
   Unresponsive UI
Responsive UI

UI Thread

 UI Update   JavaScript   UI Update

time
Unresponsive UI

UI Thread

 UI Update       JavaScript    UI Update

time
The longer JavaScript runs,
the worse the user experience
The browser vendors know this and
put limits on JavaScript via the
runaway script timer
Internet Explorer
Firefox
Safari
Chrome
Runaway Script Timer Limits
• Internet Explorer: 5 million statements
• Firefox: 10 seconds
• Safari: 5 seconds
• Chrome: Unknown, hooks into normal crash
  control mechanism
• Opera: none
Does JIT compiling help?
Interpreted JavaScript

UI Thread

                Interpret

time
JITed JavaScript (1st Run)

UI Thread

Compile     Execute

time
JITed JavaScript (After 1st Run)

UI Thread

   Execute

time
How Long Is Too Long?
“0.1 second [100ms] is about the limit for
having the user feel that the system is reacting
instantaneously, meaning that no special
feedback is necessary except to display the
result.”
                                  - Jakob Nielsen
Translation:
 No single JavaScript job should
execute for more than 100ms to
     ensure a responsive UI
Recommendation:
Limit JavaScript execution to no more
              than 50ms



        measured on IE6 :)
Techniques
Ways to ensure JavaScript doesn't run away
function processArray(items, process, callback){
    for (var i=0,len=items.length; i < len; i++){
        process(items[i]);
    }
    callback();
}
Technique #1: Timers
//create a new timer and delay by 500ms
 setTimeout(function(){


     //code to execute here


 }, 500)




setTimeout() schedules a function to be
  added to the UI queue after a delay
function timedProcessArray(items, process, callback){
    //create a clone of the original
     var todo = items.concat();
    setTimeout(function(){
        var start = +new Date();
        do {
              process(todo.shift());
        } while (todo.length > 0 &&
               (+new Date() - start < 50));
        if (todo.length > 0){
              setTimeout(arguments.callee, 25);
        } else {
              callback(items);
        }
    }, 25);
}
When Clicked

UI Thread



time
                           UI Queue

                             UI Update

                             onclick

                             UI Update
When Clicked

UI Thread

 UI Update

time
                            UI Queue

                              onclick

                              UI Update
When Clicked

UI Thread

 UI Update   onclick




time
                                  UI Queue

                                    UI Update
When Clicked

UI Thread

 UI Update   onclick   UI Update

time
                                   UI Queue
After 25ms

UI Thread

 UI Update   onclick   UI Update

time
                                    UI Queue

                                      JavaScript
After 25ms

UI Thread

 UI Update   onclick   UI Update   JavaScript




time
                                                UI Queue
After Another 25ms

UI Thread

 UI Update   onclick   UI Update   JavaScript




time
                                                UI Queue

                                                  JavaScript
After Another 25ms

UI Thread

 UI Update   onclick   UI Update   JavaScript         JavaScript




time
                                                UI Queue
Technique #2: Web Workers
High Performance JavaScript - WebDirections USA 2010
Web Workers
●
  Asynchronous JavaScript execution
●
  Execution happens outside of UI thread
  ●
    Not on the UI thread = no UI delays
●
  Data-driven API
  ●
    Data is serialized when sending data into or
    out of Worker
  ●
    No access to DOM, BOM
  ●
    Completely separate execution environment
//in page
var worker = new Worker("process.js");
worker.onmessage = function(event){
     useData(event.data);
};
worker.postMessage(values);



//in process.js
self.onmessage = function(event){
     var items = event.data;
     for (var i=0,len=items.length; i < len; i++){
         process(items[i]);
     }
     self.postMessage(items);
};
When Clicked

UI Thread



time
                           UI Queue

                             UI Update

                             onclick

                             UI Update
When Clicked

UI Thread

 UI Update

time
                            UI Queue

                              onclick

                              UI Update
When Clicked

UI Thread

 UI Update   onclick




time
                                  UI Queue

                                    UI Update
When Clicked

UI Thread

 UI Update   onclick




time

             Worker Thread        UI Queue

                                    UI Update
When Clicked

UI Thread

 UI Update   onclick       UI Update

time

             Worker Thread             UI Queue

                       JavaScript
Worker Thread Complete

UI Thread

 UI Update    onclick   UI Update

time
                                    UI Queue

                                     onmessage
Worker Thread Complete

UI Thread

 UI Update    onclick   UI Update   onmessage




time
                                           UI Queue
Web Workers Support



3.5      4.0      4.0 10.6
Repaint and Reflow
Hidden performance costs of common operations
Long UI updates
       =
Unresponsive UI
Unresponsive UI

UI Thread

 UI Update   JavaScript   UI Update

time
JavaScript can cause
long UI updates by triggering
     repaint and reflow
A repaint occurs when a visual change doesn't
        require recalculation of layout
 Changes to visibility, colors (text/background), background images, etc.
Repaint
<button id="btn" style="font-size: 30px; padding: 0.5em
    1em">Click Me</button>

<script type="text/javascript">
window.onload = function(){
   document.getElementById("btn").onclick = function(){
       this.style.color = "#ff0";
   };
};
</script>                         Repaint!
A reflow occurs when a visual change
              requires a change in layout
Initial page load ▪ browser resize ▪ DOM structure change ▪ layout style change
                          layout information retrieved
Reflow
<button id="btn" style="font-size: 30px; padding: 0.5em
    1em">Click Me</button>

<script type="text/javascript">
window.onload = function(){
   document.getElementById("btn").onclick = function(){
       var div = document.createElement(“div”);
       div.className = “tip”;
       div.innerHTML = “You clicked me!”;
       document.body.appendChild(div);
   };
};
</script>
                                Reflow!
Repaints and reflows are queued
   up as JavaScript executes
  and then executed in order
Reflow

var list = document.getElementsByClassName("items")[0],
    i, item;

for (i=0; i < 10; i++){
    item = document.createElement("li");
    item.innerHTML = "Item #" + i;
    list.appendChild(item);
}


                             Reflow x 10!
Limiting repaints/reflows
improves overall performance
Technique #1
Perform DOM manipulations
       off-document
Off-Document Operations
• Fast because there's no repaint/reflow
• Techniques:
   – Remove element from the document, make
     changes, insert back into document
   – Set element's display to “none”, make
     changes, set display back to default
   – Build up DOM changes on a
     DocumentFragment then apply all at once
DocumentFragment
• A document-like object
• Not visually represented
• Considered to be owned by the document from
  which it was created
• When passed to appendChild(), appends all
  of its children rather than itself
DocumentFragment

var list = document.getElementsByClassName("items")[0],
    fragment = document.createDocumentFragment(),
    i, item;

for (i=0; i < 10; i++){
    item = document.createElement("li");
    item.innerHTML = "Item #" + i;
    fragment.appendChild(item);
}

list.appendChild(fragment);



                         1 Reflow
Technique #2
Group Style Changes
Repaint!    Reflow!

element.style.color = "red";
element.style.height = "100px";
                                   Reflow!
element.style.fontSize = "25px";
element.style.backgroundColor = "white";



                               Repaint!
Grouping Style Changes

.active {
    color: red;
    height: 100px;
    fontSize: 25px;
    background-color: white;
}

element.className = "active";


                         Reflow!
Grouping Style Changes



var item = document.getElementById("myItem");
item.style.cssText = "color:red;height:100px;" +
             "font-size:25px;background-color: white");

                         Reflow!
Technique #3
Avoid Accidental Reflow
Accidental Reflow



element.width = "100px";

var width = element.offsetWidth;


                           Reflow!
What to do?
• Minimize access to layout information
  –   offsetTop, offsetLeft, offsetWidth, offsetHeight
  –   scrollTop, scrollLeft, scrollWidth, scrollHeight
  –   clientTop, clientLeft, clientWidth, clientHeight
  –   Most computed styles
• If a value is used more than once, store in
  local variable
Does hardware acceleration
          help?
Traditional Rendering

UI Thread

       Compositing   Drawing

time
Hardware Acceleration

UI Thread
 Prep                 Wait




time
        Rendering info            Signal complete



        Compositing     Drawing




              GPU
Recap
awesome!!
The browser UI thread is responsible for
both UI updates and JavaScript execution
           Only one can happen at a time
Responsive UI

UI Thread

 UI Update   JavaScript   UI Update

time
Unresponsive UI

UI Thread

 UI Update       JavaScript    UI Update

time
Unresponsive UI

UI Thread

 UI Update   JavaScript   UI Update

time
Avoid Slow JavaScript
• Don't allow JavaScript to execute for more
  than 50ms
• Break up long JavaScript processes using:
   – Timers
   – Web Workers
Avoid Long UI Updates
• Be careful of repaint and reflow
• Perform complex DOM operations off-
  document
   – Remove elements and re-add them
   – Use DocumentFragment objects
• Group style changes together
• Avoid accidental reflow
Etcetera
• My blog:
  www.nczonline.net
• My email:
  nzakas@yahoo-inc.com
• Twitter:
  @slicknet
• These Slides:
  http://slideshare.net/nzakas/presentations/
• Rate Me:
  http://spkr8.com/t/4511
Questions?
See ya!
Creative Commons Images Used
•   http://www.flickr.com/photos/hippie/2406411610/
•   http://www.flickr.com/photos/55733754@N00/3325000738/
•   http://www.flickr.com/photos/eurleif/255241547/
•   http://www.flickr.com/photos/off_the_wall/3444915939/
•   http://www.flickr.com/photos/wwarby/3296379139/
•   http://www.flickr.com/photos/derekgavey/4358797365/
•   http://www.flickr.com/photos/mulad/286641998/
•   http://www.flickr.com/photos/torley/2361164281/
•   http://www.flickr.com/photos/ottoman42/455242/

Más contenido relacionado

La actualidad más candente

Quic을 이용한 네트워크 성능 개선
 Quic을 이용한 네트워크 성능 개선 Quic을 이용한 네트워크 성능 개선
Quic을 이용한 네트워크 성능 개선NAVER D2
 
게임 분산 서버 구조
게임 분산 서버 구조게임 분산 서버 구조
게임 분산 서버 구조Hyunjik Bae
 
사설 서버를 막는 방법들 (프리섭, 더이상은 Naver)
사설 서버를 막는 방법들 (프리섭, 더이상은 Naver)사설 서버를 막는 방법들 (프리섭, 더이상은 Naver)
사설 서버를 막는 방법들 (프리섭, 더이상은 Naver)Seungmo Koo
 
Amazon S3 이미지 온디맨드 리사이징을 통한 70% 서버 비용 줄이기 - AWS Summit Seoul 2017
Amazon S3 이미지 온디맨드 리사이징을 통한 70% 서버 비용 줄이기 - AWS Summit Seoul 2017Amazon S3 이미지 온디맨드 리사이징을 통한 70% 서버 비용 줄이기 - AWS Summit Seoul 2017
Amazon S3 이미지 온디맨드 리사이징을 통한 70% 서버 비용 줄이기 - AWS Summit Seoul 2017Amazon Web Services Korea
 
Joget Workflow v6 Training Slides - 9 - Hash Variable
Joget Workflow v6 Training Slides - 9 - Hash VariableJoget Workflow v6 Training Slides - 9 - Hash Variable
Joget Workflow v6 Training Slides - 9 - Hash VariableJoget Workflow
 
Durcissement de code - Sécurité Applicative Web
Durcissement de code - Sécurité Applicative WebDurcissement de code - Sécurité Applicative Web
Durcissement de code - Sécurité Applicative WebCyrille Grandval
 
Java EE no ambiente corporativo: primeiros passos WebLogic 12c
Java EE no ambiente corporativo: primeiros passos WebLogic 12cJava EE no ambiente corporativo: primeiros passos WebLogic 12c
Java EE no ambiente corporativo: primeiros passos WebLogic 12cBruno Borges
 
JavaScript Fetch API
JavaScript Fetch APIJavaScript Fetch API
JavaScript Fetch APIXcat Liu
 
Anatomy of a Modern Node.js Application Architecture
Anatomy of a Modern Node.js Application Architecture Anatomy of a Modern Node.js Application Architecture
Anatomy of a Modern Node.js Application Architecture AppDynamics
 
Deploying a Low-Latency Multiplayer Game Globally: Loadout
Deploying a Low-Latency Multiplayer Game Globally: Loadout Deploying a Low-Latency Multiplayer Game Globally: Loadout
Deploying a Low-Latency Multiplayer Game Globally: Loadout Amazon Web Services
 
How To Manage API Request with AXIOS on a React Native App
How To Manage API Request with AXIOS on a React Native AppHow To Manage API Request with AXIOS on a React Native App
How To Manage API Request with AXIOS on a React Native AppAndolasoft Inc
 
스마트폰 온라인 게임에서 고려해야 할 것들
스마트폰 온라인 게임에서 고려해야 할 것들스마트폰 온라인 게임에서 고려해야 할 것들
스마트폰 온라인 게임에서 고려해야 할 것들Hyunjik Bae
 
How to Convert a Component Design into an MUI React Code
How to Convert a Component Design into an MUI React CodeHow to Convert a Component Design into an MUI React Code
How to Convert a Component Design into an MUI React CodeWrapPixel
 
【Veeam基礎】簡単解説!バックアップ可能な環境や機能をご紹介
【Veeam基礎】簡単解説!バックアップ可能な環境や機能をご紹介【Veeam基礎】簡単解説!バックアップ可能な環境や機能をご紹介
【Veeam基礎】簡単解説!バックアップ可能な環境や機能をご紹介株式会社クライム
 
React JS - A quick introduction tutorial
React JS - A quick introduction tutorialReact JS - A quick introduction tutorial
React JS - A quick introduction tutorialMohammed Fazuluddin
 
Simplifying The S's: Single Sign-On, SPNEGO and SAML
Simplifying The S's: Single Sign-On, SPNEGO and SAMLSimplifying The S's: Single Sign-On, SPNEGO and SAML
Simplifying The S's: Single Sign-On, SPNEGO and SAMLGabriella Davis
 

La actualidad más candente (20)

Quic을 이용한 네트워크 성능 개선
 Quic을 이용한 네트워크 성능 개선 Quic을 이용한 네트워크 성능 개선
Quic을 이용한 네트워크 성능 개선
 
게임 분산 서버 구조
게임 분산 서버 구조게임 분산 서버 구조
게임 분산 서버 구조
 
사설 서버를 막는 방법들 (프리섭, 더이상은 Naver)
사설 서버를 막는 방법들 (프리섭, 더이상은 Naver)사설 서버를 막는 방법들 (프리섭, 더이상은 Naver)
사설 서버를 막는 방법들 (프리섭, 더이상은 Naver)
 
Amazon S3 이미지 온디맨드 리사이징을 통한 70% 서버 비용 줄이기 - AWS Summit Seoul 2017
Amazon S3 이미지 온디맨드 리사이징을 통한 70% 서버 비용 줄이기 - AWS Summit Seoul 2017Amazon S3 이미지 온디맨드 리사이징을 통한 70% 서버 비용 줄이기 - AWS Summit Seoul 2017
Amazon S3 이미지 온디맨드 리사이징을 통한 70% 서버 비용 줄이기 - AWS Summit Seoul 2017
 
Joget Workflow v6 Training Slides - 9 - Hash Variable
Joget Workflow v6 Training Slides - 9 - Hash VariableJoget Workflow v6 Training Slides - 9 - Hash Variable
Joget Workflow v6 Training Slides - 9 - Hash Variable
 
React js
React jsReact js
React js
 
Durcissement de code - Sécurité Applicative Web
Durcissement de code - Sécurité Applicative WebDurcissement de code - Sécurité Applicative Web
Durcissement de code - Sécurité Applicative Web
 
Java EE no ambiente corporativo: primeiros passos WebLogic 12c
Java EE no ambiente corporativo: primeiros passos WebLogic 12cJava EE no ambiente corporativo: primeiros passos WebLogic 12c
Java EE no ambiente corporativo: primeiros passos WebLogic 12c
 
Understanding IIS
Understanding IISUnderstanding IIS
Understanding IIS
 
JavaScript Fetch API
JavaScript Fetch APIJavaScript Fetch API
JavaScript Fetch API
 
Anatomy of a Modern Node.js Application Architecture
Anatomy of a Modern Node.js Application Architecture Anatomy of a Modern Node.js Application Architecture
Anatomy of a Modern Node.js Application Architecture
 
Deploying a Low-Latency Multiplayer Game Globally: Loadout
Deploying a Low-Latency Multiplayer Game Globally: Loadout Deploying a Low-Latency Multiplayer Game Globally: Loadout
Deploying a Low-Latency Multiplayer Game Globally: Loadout
 
React JS
React JSReact JS
React JS
 
Presentation1.pptx
Presentation1.pptxPresentation1.pptx
Presentation1.pptx
 
How To Manage API Request with AXIOS on a React Native App
How To Manage API Request with AXIOS on a React Native AppHow To Manage API Request with AXIOS on a React Native App
How To Manage API Request with AXIOS on a React Native App
 
스마트폰 온라인 게임에서 고려해야 할 것들
스마트폰 온라인 게임에서 고려해야 할 것들스마트폰 온라인 게임에서 고려해야 할 것들
스마트폰 온라인 게임에서 고려해야 할 것들
 
How to Convert a Component Design into an MUI React Code
How to Convert a Component Design into an MUI React CodeHow to Convert a Component Design into an MUI React Code
How to Convert a Component Design into an MUI React Code
 
【Veeam基礎】簡単解説!バックアップ可能な環境や機能をご紹介
【Veeam基礎】簡単解説!バックアップ可能な環境や機能をご紹介【Veeam基礎】簡単解説!バックアップ可能な環境や機能をご紹介
【Veeam基礎】簡単解説!バックアップ可能な環境や機能をご紹介
 
React JS - A quick introduction tutorial
React JS - A quick introduction tutorialReact JS - A quick introduction tutorial
React JS - A quick introduction tutorial
 
Simplifying The S's: Single Sign-On, SPNEGO and SAML
Simplifying The S's: Single Sign-On, SPNEGO and SAMLSimplifying The S's: Single Sign-On, SPNEGO and SAML
Simplifying The S's: Single Sign-On, SPNEGO and SAML
 

Destacado

JavaScript Prototype and Module Pattern
JavaScript Prototype and Module PatternJavaScript Prototype and Module Pattern
JavaScript Prototype and Module PatternNarendra Sisodiya
 
JavaScript Functions
JavaScript Functions JavaScript Functions
JavaScript Functions Reem Alattas
 
Fundamental JavaScript [In Control 2009]
Fundamental JavaScript [In Control 2009]Fundamental JavaScript [In Control 2009]
Fundamental JavaScript [In Control 2009]Aaron Gustafson
 
High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010Nicholas Zakas
 
She Looks Just Like Me 2017
She Looks Just Like Me 2017She Looks Just Like Me 2017
She Looks Just Like Me 2017Reem Alattas
 
Evolutionary Algorithms
Evolutionary AlgorithmsEvolutionary Algorithms
Evolutionary AlgorithmsReem Alattas
 
JavaScript Conditional Statements
JavaScript Conditional StatementsJavaScript Conditional Statements
JavaScript Conditional StatementsMarlon Jamera
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript ProgrammingSehwan Noh
 

Destacado (8)

JavaScript Prototype and Module Pattern
JavaScript Prototype and Module PatternJavaScript Prototype and Module Pattern
JavaScript Prototype and Module Pattern
 
JavaScript Functions
JavaScript Functions JavaScript Functions
JavaScript Functions
 
Fundamental JavaScript [In Control 2009]
Fundamental JavaScript [In Control 2009]Fundamental JavaScript [In Control 2009]
Fundamental JavaScript [In Control 2009]
 
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
 
She Looks Just Like Me 2017
She Looks Just Like Me 2017She Looks Just Like Me 2017
She Looks Just Like Me 2017
 
Evolutionary Algorithms
Evolutionary AlgorithmsEvolutionary Algorithms
Evolutionary Algorithms
 
JavaScript Conditional Statements
JavaScript Conditional StatementsJavaScript Conditional Statements
JavaScript Conditional Statements
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript Programming
 

Similar a High Performance JavaScript - WebDirections USA 2010

Nicholas' Performance Talk at Google
Nicholas' Performance Talk at GoogleNicholas' Performance Talk at Google
Nicholas' Performance Talk at GoogleNicholas Zakas
 
JavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and PerformanceJavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and PerformanceNicholas Zakas
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)Nicholas Zakas
 
High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010Nicholas Zakas
 
High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)Nicholas Zakas
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)Nicholas Zakas
 
CyberArk Impact 2017 - REST for the Rest of Us
CyberArk Impact 2017 - REST for the Rest of UsCyberArk Impact 2017 - REST for the Rest of Us
CyberArk Impact 2017 - REST for the Rest of UsJoe Garcia
 
Introducing PanelKit
Introducing PanelKitIntroducing PanelKit
Introducing PanelKitLouis D'hauwe
 
The fundamental problems of GUI applications and why people choose React
The fundamental problems of GUI applications and why people choose ReactThe fundamental problems of GUI applications and why people choose React
The fundamental problems of GUI applications and why people choose ReactOliver N
 
Plug yourself in and your app will never be the same (1 hr edition)
Plug yourself in and your app will never be the same (1 hr edition)Plug yourself in and your app will never be the same (1 hr edition)
Plug yourself in and your app will never be the same (1 hr edition)Mikkel Flindt Heisterberg
 
Continuous Delivery - Voxxed Days Cluj-Napoca 2017
Continuous Delivery - Voxxed Days Cluj-Napoca 2017Continuous Delivery - Voxxed Days Cluj-Napoca 2017
Continuous Delivery - Voxxed Days Cluj-Napoca 2017Rafał Leszko
 
Jenkins CI for MacDevOps
Jenkins CI for MacDevOpsJenkins CI for MacDevOps
Jenkins CI for MacDevOpsTimothy Sutton
 
Medium TechTalk — iOS
Medium TechTalk — iOSMedium TechTalk — iOS
Medium TechTalk — iOSjimmyatmedium
 
Angular - Improve Runtime performance 2019
Angular - Improve Runtime performance 2019Angular - Improve Runtime performance 2019
Angular - Improve Runtime performance 2019Eliran Eliassy
 
Programming iOS in C#
Programming iOS in C#Programming iOS in C#
Programming iOS in C#Frank Krueger
 
[NDC 2019] Functions 2.0: Enterprise-Grade Serverless
[NDC 2019] Functions 2.0: Enterprise-Grade Serverless[NDC 2019] Functions 2.0: Enterprise-Grade Serverless
[NDC 2019] Functions 2.0: Enterprise-Grade ServerlessKatyShimizu
 
[NDC 2019] Enterprise-Grade Serverless
[NDC 2019] Enterprise-Grade Serverless[NDC 2019] Enterprise-Grade Serverless
[NDC 2019] Enterprise-Grade ServerlessKatyShimizu
 

Similar a High Performance JavaScript - WebDirections USA 2010 (20)

Nicholas' Performance Talk at Google
Nicholas' Performance Talk at GoogleNicholas' Performance Talk at Google
Nicholas' Performance Talk at Google
 
JavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and PerformanceJavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and Performance
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
 
High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010
 
Responsive interfaces
Responsive interfacesResponsive interfaces
Responsive interfaces
 
High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
 
CyberArk Impact 2017 - REST for the Rest of Us
CyberArk Impact 2017 - REST for the Rest of UsCyberArk Impact 2017 - REST for the Rest of Us
CyberArk Impact 2017 - REST for the Rest of Us
 
TechGarage Hackaton
TechGarage HackatonTechGarage Hackaton
TechGarage Hackaton
 
Introducing PanelKit
Introducing PanelKitIntroducing PanelKit
Introducing PanelKit
 
The fundamental problems of GUI applications and why people choose React
The fundamental problems of GUI applications and why people choose ReactThe fundamental problems of GUI applications and why people choose React
The fundamental problems of GUI applications and why people choose React
 
Plug yourself in and your app will never be the same (1 hr edition)
Plug yourself in and your app will never be the same (1 hr edition)Plug yourself in and your app will never be the same (1 hr edition)
Plug yourself in and your app will never be the same (1 hr edition)
 
Continuous Delivery - Voxxed Days Cluj-Napoca 2017
Continuous Delivery - Voxxed Days Cluj-Napoca 2017Continuous Delivery - Voxxed Days Cluj-Napoca 2017
Continuous Delivery - Voxxed Days Cluj-Napoca 2017
 
Android Threading
Android ThreadingAndroid Threading
Android Threading
 
Jenkins CI for MacDevOps
Jenkins CI for MacDevOpsJenkins CI for MacDevOps
Jenkins CI for MacDevOps
 
Medium TechTalk — iOS
Medium TechTalk — iOSMedium TechTalk — iOS
Medium TechTalk — iOS
 
Angular - Improve Runtime performance 2019
Angular - Improve Runtime performance 2019Angular - Improve Runtime performance 2019
Angular - Improve Runtime performance 2019
 
Programming iOS in C#
Programming iOS in C#Programming iOS in C#
Programming iOS in C#
 
[NDC 2019] Functions 2.0: Enterprise-Grade Serverless
[NDC 2019] Functions 2.0: Enterprise-Grade Serverless[NDC 2019] Functions 2.0: Enterprise-Grade Serverless
[NDC 2019] Functions 2.0: Enterprise-Grade Serverless
 
[NDC 2019] Enterprise-Grade Serverless
[NDC 2019] Enterprise-Grade Serverless[NDC 2019] Enterprise-Grade Serverless
[NDC 2019] Enterprise-Grade Serverless
 

Más de Nicholas Zakas

Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceNicholas Zakas
 
Enough with the JavaScript already!
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!Nicholas Zakas
 
JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)Nicholas Zakas
 
Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012Nicholas Zakas
 
Maintainable JavaScript 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012Nicholas Zakas
 
Maintainable JavaScript 2011
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011Nicholas Zakas
 
High Performance JavaScript 2011
High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011Nicholas Zakas
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed BumpsNicholas Zakas
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
 
YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)Nicholas Zakas
 
Performance on the Yahoo! Homepage
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! HomepageNicholas Zakas
 
Scalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureScalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureNicholas Zakas
 
Extreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI CompressorExtreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI CompressorNicholas Zakas
 
Writing Efficient JavaScript
Writing Efficient JavaScriptWriting Efficient JavaScript
Writing Efficient JavaScriptNicholas Zakas
 
Speed Up Your JavaScript
Speed Up Your JavaScriptSpeed Up Your JavaScript
Speed Up Your JavaScriptNicholas Zakas
 
Maintainable JavaScript
Maintainable JavaScriptMaintainable JavaScript
Maintainable JavaScriptNicholas Zakas
 
JavaScript Variable Performance
JavaScript Variable PerformanceJavaScript Variable Performance
JavaScript Variable PerformanceNicholas Zakas
 
The New Yahoo! Homepage and YUI 3
The New Yahoo! Homepage and YUI 3The New Yahoo! Homepage and YUI 3
The New Yahoo! Homepage and YUI 3Nicholas Zakas
 

Más de Nicholas Zakas (20)

Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
 
Enough with the JavaScript already!
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!
 
The Pointerless Web
The Pointerless WebThe Pointerless Web
The Pointerless Web
 
JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)
 
Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012
 
Maintainable JavaScript 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012
 
Maintainable JavaScript 2011
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011
 
High Performance JavaScript 2011
High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
 
YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)
 
Performance on the Yahoo! Homepage
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
 
Scalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureScalable JavaScript Application Architecture
Scalable JavaScript Application Architecture
 
Extreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI CompressorExtreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI Compressor
 
Writing Efficient JavaScript
Writing Efficient JavaScriptWriting Efficient JavaScript
Writing Efficient JavaScript
 
Speed Up Your JavaScript
Speed Up Your JavaScriptSpeed Up Your JavaScript
Speed Up Your JavaScript
 
Maintainable JavaScript
Maintainable JavaScriptMaintainable JavaScript
Maintainable JavaScript
 
JavaScript Variable Performance
JavaScript Variable PerformanceJavaScript Variable Performance
JavaScript Variable Performance
 
The New Yahoo! Homepage and YUI 3
The New Yahoo! Homepage and YUI 3The New Yahoo! Homepage and YUI 3
The New Yahoo! Homepage and YUI 3
 

Último

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
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
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
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
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
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
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
 
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
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
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
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 

Último (20)

Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
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
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
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
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
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
 
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
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
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
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 

High Performance JavaScript - WebDirections USA 2010