SlideShare a Scribd company logo
JavaScript Performance Patterns

         @stoyanstefanov
       Web Directions South
       Sydney, Oct 18, 2012
JavaScript Performance Patterns
Importance of Performance




                    http://bookofspeed.com
Importance of JavaScript Performance




                         http://httparchive.org
// todo
1. Loading JavaScript
2. Runtime / UI / DOM
   + benchmarks
   + shims
JavaScript Performance Patterns
JavaScript Performance Patterns
Loading
First things first
•   reduce # of script files
•   gzip, shave 70% off
•   minify, extra 40-50%
•   Expires headers
•   CDN


                                   http://yslow.org
                                      PageSpeed
                               http://webpagetest.org
<script src="http://…">
SPOF
• Single point of failure
• JS blocks




                                                        http://phpied.com/3po-fail
                                                                    SPOF-O-Matic:
  https://chrome.google.com/webstore/detail/plikhggfbplemddobondkeogomgoodeg
Off the critical path
Asynchronous JS
• <script defer>
• <script async>
• until then…
Dynamic script node
var js = document.createElement('script');
js.src = 'http://cdn.com/my.js';
document.getElementsByTagName('head')[0].appendChild(js);




                                  http://calendar.perfplanet.com/2011/t
                                  he-art-and-craft-of-the-async-snippet/
But…, butt…, button?
Q: <button onclick="…"?
A: To hell with it

Q: Dependencies?
A: onload event and js.onreadystatechange

load('jquery.js', 'mystuff.js', function () {
  mystuff.go();
});
Unblocking onload
• Async JS blocks window.onload in !IE
• May or may not be a problem
• There's a solution: FIF
<fif>

frame-in-frame aka friendly frames
      aka this Meebo thing
FIF
1)   create
     iframe src="js:false"
2)   in the frame doc.write a
     <body onload …
3)   …that loads JS
FIF (snippet)
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;
doc.open().write('<body onload="'+
 'var js = document.createElement('script');'+
 'js.src = 'http://example.org/js.js';'+
 'document.body.appendChild(js);">');
doc.close();
FIF
• unblocks onload, but…
• more complex
• requires JS changes
your script (before)


// fun with window
// and document
your script (before)
(function() {

  // fun with window
  // and document
}());
FIF (after)
(function(window) {
  var document = window.document;
  // fun with window
  // and document
}(parent.window));
FIF in the wild
• experimental support in FB JS SDK
• http://jsbin.com/axibow/10/edit
</fif>
Load JS but not execute
• Use cases:
  – preload in anticipation
  – lazy
Preload, then eventually execute
1. fetch the script, but don’t run it
2. run it at some point (same as async JS)
Fetching
• IE: dynamic script node, not in the DOM
• All others: CORS (XHR2)
  – your CDN should let you specify
    Access-Control-Allow-Origin
    header or else!
Preload, then execute
// preload
var js = document.createElement('script');
if (!js.readyState || js.readyState !== 'uninitialized') { // non IE
  var xhr = new XMLHttpRequest();
  if ('withCredentials' in xhr) { // XHR2
    xhr.open('GET', url, false);
    xhr.send(null);
  }
}
js.src = url; // IE preloads! Thanks @getify

// execute
document.getElementsByTagName('head')[0].appendChild(js);
// todo
1. Loading JavaScript
2. Runtime / UI / DOM
   + benchmarks
   + shims
Benchmarks
•   Lies, damn lies and performance advice
•   Test the wrong thing
•   Measure the wrong thing
•   Even if not, still draw the wrong conclusions
Your first benchmark
var start = new Date();
// loop 100000 times
var took = new Date() – start;
Benchmark.js
• by John-David Dalton
• used in http://jsperf.com
  – calibrating the test
  – end time (ops/second)
  – statistical significance
  – margin of error
http://calendar.perfplanet.com/2010/bulletpro
                     of-javascript-benchmarks/
Benchmarking browsers?



       No, thanks
Let's test!
String concat?
var text = "";
text += "moar";

vs.

var parts = [];
parts.push('moar');
var text = push.join('');

                        http://jsperf.com/join-concat/
String concat
The pen is mightier than the sword! *



* Only if the sword is very small and the pen very sharp
"Don't A, B is so much faster!"



      You should check it again
Profiling
JavaScript Performance Patterns
JavaScript Performance Patterns
JavaScript Performance Patterns
Picking battles
DOM
DOM
• DOM is slow
• How slow?
• http://jsperf.com/dom-touch
DOM
// DOM
div.innerHTML = 'a';
div.innerHTML += 'b';

// string
var html = '';
html += 'a';
html += 'b';
div.innerHTML = html;
DOM
DOM + string concat
• put things in perspective   http://jsperf.com/dom-touch-concat
ECMAland   DOMland
DOM
•   caching DOM references
•   caching length in collection loops
•   "offline" changes in document fragment
•   batch style changes
•   reducing reflows and repaints
reflows
   getComputedStyle(), or currentStyle in IE


   bodystyle.color = 'red';
   tmp = computed.backgroundColor;
   bodystyle.color = 'white';
   tmp = computed.backgroundImage;
   bodystyle.color = 'green';
   tmp = computed.backgroundAttachment;




   bodystyle.color = 'red';
   bodystyle.color = 'white';
   bodystyle.color = 'green';
   tmp = computed.backgroundColor;
   tmp = computed.backgroundImage;
   tmp = computed.backgroundAttachment;
querySelectorSlow()?
<table border="1" id="test-table">
  <thead>
   <!-- ... -->
  </thead>
  <tbody>
    <tr class="rowme">
      <td>1</td><td>John</td><td><!-- ... -->
      <!-- ... -->
querySelectorSlow()?
var trs =
  tbody.getElementsByClassName('rowme');

var trs =
  tbody.getElementsByTagName('tr');

var trs =
  tbody.querySelectorAll('.rowme');
http://jsperf.com/queryinging/4
querySelectorSlow()?
for (
  var i = 0, len = trs.length;
  i < len;
  i += 2) {

    trs[i].className;

}
http://jsperf.com/queryinging/3
querySelectorSlow()?
for (
  var i = 0, len = trs.length;
  i < len;
  i += 2) {

  trs[i].className = "rowme
hilite";

}
http://jsperf.com/queryinging/2
querySelectorSlow()?
for (
  var i = 0, len = trs.length;
  i < len;
  i += 2) {

  trs[i].className = "rowme
hilite";
}
trs[0].offsetHeight;
http://jsperf.com/queryinging/
Priorities
1. Loading – drop everything, fix now
2. Reflows – fix asap
3. Writing DOM
4. Reading DOM
5. Querying DOM
6. ECMALand - later
data attributes
<div data-stuff="convenient"></div>

• div.dataset.stuff
• div.getAttribute('data-stuff')
• Data.get(div).stuff // DIY
data attributes DIY
var Data = function() {
  var warehouse = {};
  var count = 1;
  return {
    set: function (dom, data) {
      if (!dom.__data) {
        dom.__data = "hello" + count++;
      }
      warehouse[dom.__data] = data;
    },
    get: function(dom) {
      return warehouse[dom.__data];
    }
  };
}();
data attributes
data attributes
            http://jsperf.com/data-dataset
Shims and polyfills
Shims
• pick the smaller/optimized one
• one that uses native where available *
• load conditionally

e.g. JSON is non-native only for 8% of users *,
why load shim 100% of the time


                                     * http://html5please.us
Fast ECMAScript5 natives?
• JDD: "browsers optimize loops because of
  benchmarks"
• http://jsperf.com/native-for-loop-vs-array-
  foreach-and-array-map-vs-lodas/2
jQuery: the most popular polyfill
• not free (perf-wise)
• do you need it?
Cost of parsing and evaluating
                  http://calendar.perfplanet.com/2011/laz
                  y-evaluation-of-commonjs-modules/
Cost of parsing and evaluating
Experiment: jQuery vs. Zepto



What’s the cost of just dropping it on the page?
jsperf.com/zepto-jq-eval



          […]
jsperf.com/zepto-jq-eval
jsperf.com/zepto-jq-eval
In closure…
• JS off the critical path
  (async, lazy, preload)
• Practice writing jsperf.com tests
  ("jsperf URL or it didn't happen!")
• Don't touch the DOM (remember the bridge)
• Use the tools (Timeline, CPU/heap profiler,
  SpeedTracer, Dynatrace)
• Think of poor mobile
  (easy with the shims)
Thank you!



http://slideshare.net/stoyan/

More Related Content

What's hot

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
Nicholas Zakas
 
Mastering Grunt
Mastering GruntMastering Grunt
Mastering Grunt
Spencer Handley
 
Node.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseNode.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash Course
Aaron Silverman
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
Nicholas Zakas
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
dmethvin
 
SocketStream
SocketStreamSocketStream
SocketStream
Paul Jensen
 
Ajax Security
Ajax SecurityAjax Security
Ajax Security
Joe Walker
 
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
 
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other ToolsCool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Ryan Weaver
 
Don't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web Applications
Stoyan Stefanov
 
Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5
dynamis
 
Webpack
Webpack Webpack
What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?
Susan Winters
 
lecture5
lecture5lecture5
lecture5
tutorialsruby
 
Avoiding Common Pitfalls in Ember.js
Avoiding Common Pitfalls in Ember.jsAvoiding Common Pitfalls in Ember.js
Avoiding Common Pitfalls in Ember.js
Alex Speller
 
HTML5와 오픈소스 기반의 Web Components 기술
HTML5와 오픈소스 기반의 Web Components 기술HTML5와 오픈소스 기반의 Web Components 기술
HTML5와 오픈소스 기반의 Web Components 기술
Jeongkyu Shin
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
Marc Grabanski
 
HTTP 2.0 - Web Unleashed 2015
HTTP 2.0 - Web Unleashed 2015HTTP 2.0 - Web Unleashed 2015
HTTP 2.0 - Web Unleashed 2015
dmethvin
 
Web Page Test - Beyond the Basics
Web Page Test - Beyond the BasicsWeb Page Test - Beyond the Basics
Web Page Test - Beyond the Basics
Andy Davies
 
Nodejs.meetup
Nodejs.meetupNodejs.meetup
Nodejs.meetup
Vivian S. Zhang
 

What's hot (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
 
Mastering Grunt
Mastering GruntMastering Grunt
Mastering Grunt
 
Node.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseNode.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash Course
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
 
SocketStream
SocketStreamSocketStream
SocketStream
 
Ajax Security
Ajax SecurityAjax Security
Ajax Security
 
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)
 
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other ToolsCool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
 
Don't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web Applications
 
Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5
 
Webpack
Webpack Webpack
Webpack
 
What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?
 
lecture5
lecture5lecture5
lecture5
 
Avoiding Common Pitfalls in Ember.js
Avoiding Common Pitfalls in Ember.jsAvoiding Common Pitfalls in Ember.js
Avoiding Common Pitfalls in Ember.js
 
HTML5와 오픈소스 기반의 Web Components 기술
HTML5와 오픈소스 기반의 Web Components 기술HTML5와 오픈소스 기반의 Web Components 기술
HTML5와 오픈소스 기반의 Web Components 기술
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
 
HTTP 2.0 - Web Unleashed 2015
HTTP 2.0 - Web Unleashed 2015HTTP 2.0 - Web Unleashed 2015
HTTP 2.0 - Web Unleashed 2015
 
Web Page Test - Beyond the Basics
Web Page Test - Beyond the BasicsWeb Page Test - Beyond the Basics
Web Page Test - Beyond the Basics
 
Nodejs.meetup
Nodejs.meetupNodejs.meetup
Nodejs.meetup
 

Similar to JavaScript Performance Patterns

Performance patterns
Performance patternsPerformance patterns
Performance patterns
Stoyan Stefanov
 
Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)
Ontico
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web Apps
Timothy Fisher
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and Rendering
Stoyan Stefanov
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
Timothy Fisher
 
SXSW 2012 JavaScript MythBusters
SXSW 2012 JavaScript MythBustersSXSW 2012 JavaScript MythBusters
SXSW 2012 JavaScript MythBusters
Elena-Oana Tabaranu
 
Build Your Own CMS with Apache Sling
Build Your Own CMS with Apache SlingBuild Your Own CMS with Apache Sling
Build Your Own CMS with Apache Sling
Bob Paulin
 
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Patrick Meenan
 
Appsec usa2013 js_libinsecurity_stefanodipaola
Appsec usa2013 js_libinsecurity_stefanodipaolaAppsec usa2013 js_libinsecurity_stefanodipaola
Appsec usa2013 js_libinsecurity_stefanodipaola
drewz lin
 
Sanjeev ghai 12
Sanjeev ghai 12Sanjeev ghai 12
Sanjeev ghai 12
Praveen kumar
 
Server Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yetServer Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yet
Tom Croucher
 
introduction to node.js
introduction to node.jsintroduction to node.js
introduction to node.js
orkaplan
 
#NewMeetup Performance
#NewMeetup Performance#NewMeetup Performance
#NewMeetup Performance
Justin Cataldo
 
JavaScript-Core
JavaScript-CoreJavaScript-Core
JavaScript-Core
tutorialsruby
 
JavaScript-Core
JavaScript-CoreJavaScript-Core
JavaScript-Core
tutorialsruby
 
Building performance into the new yahoo homepage presentation
Building performance into the new yahoo  homepage presentationBuilding performance into the new yahoo  homepage presentation
Building performance into the new yahoo homepage presentation
masudakram
 
Performance on the Yahoo! Homepage
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
Nicholas Zakas
 
JavaScript Perfomance
JavaScript PerfomanceJavaScript Perfomance
JavaScript Perfomance
Anatol Alizar
 
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
Steve Souders
 
High Performance Drupal
High Performance DrupalHigh Performance Drupal
High Performance Drupal
Jeff Geerling
 

Similar to JavaScript Performance Patterns (20)

Performance patterns
Performance patternsPerformance patterns
Performance patterns
 
Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web Apps
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and Rendering
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
 
SXSW 2012 JavaScript MythBusters
SXSW 2012 JavaScript MythBustersSXSW 2012 JavaScript MythBusters
SXSW 2012 JavaScript MythBusters
 
Build Your Own CMS with Apache Sling
Build Your Own CMS with Apache SlingBuild Your Own CMS with Apache Sling
Build Your Own CMS with Apache Sling
 
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
 
Appsec usa2013 js_libinsecurity_stefanodipaola
Appsec usa2013 js_libinsecurity_stefanodipaolaAppsec usa2013 js_libinsecurity_stefanodipaola
Appsec usa2013 js_libinsecurity_stefanodipaola
 
Sanjeev ghai 12
Sanjeev ghai 12Sanjeev ghai 12
Sanjeev ghai 12
 
Server Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yetServer Side JavaScript - You ain't seen nothing yet
Server Side JavaScript - You ain't seen nothing yet
 
introduction to node.js
introduction to node.jsintroduction to node.js
introduction to node.js
 
#NewMeetup Performance
#NewMeetup Performance#NewMeetup Performance
#NewMeetup Performance
 
JavaScript-Core
JavaScript-CoreJavaScript-Core
JavaScript-Core
 
JavaScript-Core
JavaScript-CoreJavaScript-Core
JavaScript-Core
 
Building performance into the new yahoo homepage presentation
Building performance into the new yahoo  homepage presentationBuilding performance into the new yahoo  homepage presentation
Building performance into the new yahoo homepage presentation
 
Performance on the Yahoo! Homepage
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
 
JavaScript Perfomance
JavaScript PerfomanceJavaScript Perfomance
JavaScript Perfomance
 
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
 
High Performance Drupal
High Performance DrupalHigh Performance Drupal
High Performance Drupal
 

More from Stoyan Stefanov

Reactive JavaScript
Reactive JavaScriptReactive JavaScript
Reactive JavaScript
Stoyan Stefanov
 
YSlow hacking
YSlow hackingYSlow hacking
YSlow hacking
Stoyan Stefanov
 
Social Button BFFs
Social Button BFFsSocial Button BFFs
Social Button BFFs
Stoyan Stefanov
 
JavaScript навсякъде
JavaScript навсякъдеJavaScript навсякъде
JavaScript навсякъде
Stoyan Stefanov
 
JavaScript is everywhere
JavaScript is everywhereJavaScript is everywhere
JavaScript is everywhere
Stoyan Stefanov
 
JavaScript shell scripting
JavaScript shell scriptingJavaScript shell scripting
JavaScript shell scripting
Stoyan Stefanov
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developers
Stoyan Stefanov
 
WPO @ PubCon 2010
WPO @ PubCon 2010WPO @ PubCon 2010
WPO @ PubCon 2010
Stoyan Stefanov
 
Voices that matter: High Performance Web Sites
Voices that matter: High Performance Web SitesVoices that matter: High Performance Web Sites
Voices that matter: High Performance Web Sites
Stoyan Stefanov
 
Psychology of performance
Psychology of performancePsychology of performance
Psychology of performance
Stoyan Stefanov
 
3-in-1 YSlow
3-in-1 YSlow3-in-1 YSlow
3-in-1 YSlow
Stoyan Stefanov
 
CSS and image optimization
CSS and image optimizationCSS and image optimization
CSS and image optimization
Stoyan Stefanov
 
High-performance DOM scripting
High-performance DOM scriptingHigh-performance DOM scripting
High-performance DOM scripting
Stoyan Stefanov
 
The business of performance
The business of performanceThe business of performance
The business of performance
Stoyan Stefanov
 
JavaScript Patterns
JavaScript PatternsJavaScript Patterns
JavaScript Patterns
Stoyan Stefanov
 
Ignite Velocity: Image Weight Loss Clinic
Ignite Velocity: Image Weight Loss ClinicIgnite Velocity: Image Weight Loss Clinic
Ignite Velocity: Image Weight Loss Clinic
Stoyan Stefanov
 
High Performance Kick Ass Web Apps (JavaScript edition)
High Performance Kick Ass Web Apps (JavaScript edition)High Performance Kick Ass Web Apps (JavaScript edition)
High Performance Kick Ass Web Apps (JavaScript edition)
Stoyan Stefanov
 
YSlow 2.0
YSlow 2.0YSlow 2.0
YSlow 2.0
Stoyan Stefanov
 
Beginning Object-Oriented JavaScript
Beginning Object-Oriented JavaScriptBeginning Object-Oriented JavaScript
Beginning Object-Oriented JavaScript
Stoyan Stefanov
 
Image Optimization for the Web at php|works
Image Optimization for the Web at php|worksImage Optimization for the Web at php|works
Image Optimization for the Web at php|works
Stoyan Stefanov
 

More from Stoyan Stefanov (20)

Reactive JavaScript
Reactive JavaScriptReactive JavaScript
Reactive JavaScript
 
YSlow hacking
YSlow hackingYSlow hacking
YSlow hacking
 
Social Button BFFs
Social Button BFFsSocial Button BFFs
Social Button BFFs
 
JavaScript навсякъде
JavaScript навсякъдеJavaScript навсякъде
JavaScript навсякъде
 
JavaScript is everywhere
JavaScript is everywhereJavaScript is everywhere
JavaScript is everywhere
 
JavaScript shell scripting
JavaScript shell scriptingJavaScript shell scripting
JavaScript shell scripting
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developers
 
WPO @ PubCon 2010
WPO @ PubCon 2010WPO @ PubCon 2010
WPO @ PubCon 2010
 
Voices that matter: High Performance Web Sites
Voices that matter: High Performance Web SitesVoices that matter: High Performance Web Sites
Voices that matter: High Performance Web Sites
 
Psychology of performance
Psychology of performancePsychology of performance
Psychology of performance
 
3-in-1 YSlow
3-in-1 YSlow3-in-1 YSlow
3-in-1 YSlow
 
CSS and image optimization
CSS and image optimizationCSS and image optimization
CSS and image optimization
 
High-performance DOM scripting
High-performance DOM scriptingHigh-performance DOM scripting
High-performance DOM scripting
 
The business of performance
The business of performanceThe business of performance
The business of performance
 
JavaScript Patterns
JavaScript PatternsJavaScript Patterns
JavaScript Patterns
 
Ignite Velocity: Image Weight Loss Clinic
Ignite Velocity: Image Weight Loss ClinicIgnite Velocity: Image Weight Loss Clinic
Ignite Velocity: Image Weight Loss Clinic
 
High Performance Kick Ass Web Apps (JavaScript edition)
High Performance Kick Ass Web Apps (JavaScript edition)High Performance Kick Ass Web Apps (JavaScript edition)
High Performance Kick Ass Web Apps (JavaScript edition)
 
YSlow 2.0
YSlow 2.0YSlow 2.0
YSlow 2.0
 
Beginning Object-Oriented JavaScript
Beginning Object-Oriented JavaScriptBeginning Object-Oriented JavaScript
Beginning Object-Oriented JavaScript
 
Image Optimization for the Web at php|works
Image Optimization for the Web at php|worksImage Optimization for the Web at php|works
Image Optimization for the Web at php|works
 

Recently uploaded

How to build a generative AI solution A step-by-step guide (2).pdf
How to build a generative AI solution A step-by-step guide (2).pdfHow to build a generative AI solution A step-by-step guide (2).pdf
How to build a generative AI solution A step-by-step guide (2).pdf
ChristopherTHyatt
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Kunal Gupta
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
digitalxplive
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
Priyanka Aash
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
BrainSell Technologies
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Muhammad Ali
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
kumarjarun2010
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
aakash malhotra
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
Anant Gupta
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
Matthias Neugebauer
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Networks
 

Recently uploaded (20)

How to build a generative AI solution A step-by-step guide (2).pdf
How to build a generative AI solution A step-by-step guide (2).pdfHow to build a generative AI solution A step-by-step guide (2).pdf
How to build a generative AI solution A step-by-step guide (2).pdf
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
 

JavaScript Performance Patterns