Extreme JavaScript Compression With YUI Compressor
Upcoming SlideShare
Loading in...5
×
 

Extreme JavaScript Compression With YUI Compressor

on

  • 34,863 views

Slides from the Yahoo! Front End Engineering Summit presentation on how to optimize JavaScript for best minification using YUI Compressor.

Slides from the Yahoo! Front End Engineering Summit presentation on how to optimize JavaScript for best minification using YUI Compressor.

Statistics

Views

Total Views
34,863
Views on SlideShare
34,621
Embed Views
242

Actions

Likes
64
Downloads
380
Comments
5

19 Embeds 242

http://www.slideshare.net 168
http://onwebdev.blogspot.com 17
http://www.techiegyan.com 13
http://localhost 6
http://hml.facasper.com.br 5
http://blog.gabrieleromanato.com 5
http://www.e-presentations.us 4
http://us-w1.rockmelt.com 4
http://www.twylah.com 3
http://www.linkedin.com 3
http://tugll.tugraz.at 3
http://davidlong.posterous.com 2
https://www.linkedin.com 2
http://192.168.6.179 2
http://lifeofjs.com 1
http://onwebdev.blogspot.co.uk 1
https://si0.twimg.com 1
http://onwebdev.blogspot.fr 1
http://www.scoop.it 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • goog
    Are you sure you want to
    Your message goes here
    Processing…
  • Extreme JavaScript Compression With YUI Compressor
    Are you sure you want to
    Your message goes here
    Processing…
  • thx!
    Are you sure you want to
    Your message goes here
    Processing…
  • NVM. i spoke a few slides to early
    Are you sure you want to
    Your message goes here
    Processing…
  • slide #29

    Wouldn't it be even better to do:

    var C = YAHOO.Utils.DOM;

    Instead of just YAHOO.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Extreme JavaScript Compression With YUI Compressor Extreme JavaScript Compression With YUI Compressor Presentation Transcript

  • Extreme JavaScript Compression with YUI Compressor Nicholas C. Zakas Principal Front End Engineer, Yahoo!
  • Who's this guy? • Principal Front End Engineer, Yahoo! Front Page • YUI Contributor • Author
  • JavaScript Minification/Compression • Problem: Lots of JavaScript • Solution: Make JavaScript smaller • Two areas: – Wire weight – Browser weight
  • Wire Weight Solution: Gzip Internet Server
  • Wire Weight Solution: Gzip Internet Browser
  • Browser Weight
  • Browser Weight Solution: Minification • Remove comments • Remove extra white space • Identifier replacement • Other...
  • Minification Tools • ECMAScript Cruncher (ESC) – http://www.saltstorm.net/depo/esc/ • JSMin – http://www.crockford.com/javascript/jsmin.html • Packer – http://dean.edwards.name/packer/ • Dojo Shrinksafe – http://shrinksafe.dojotoolkit.org/
  • YUI Compressor http://developer.yahoo.com/yui/compressor/
  • About YUI Compressor • Remove comments • Remove extra white space • Identifier replacement • Micro-optimizations • Built on top of Rhino interpreter – Makes all optimizations safe
  • Mozilla Rhino • Open source JavaScript interpreter • Written in Java • Based on Firefox's interpreter http://www.mozilla.org/rhino/
  • How It Works
  • Micro Optimizations
  • The Results -44% -44%
  • Helping the Compressor
  • Best Optimization = Identifier Replacement (aka munging)
  • Identifier Replacement • Local identifiers only – Functions and variables
  • What Can't Be Replaced • Primitive values – strings, booleans, numbers, null, and undefined
  • Primitive Values • Strings take up the most space • Non-numeric literals take second-most – true, false – null – undefined • Approach: Any literal value used two or more times should be stored in a local variable
  • Primitive Values 263 b 172 b
  • Primitive Values 293 b 162 b
  • Prototype • 79 repeated strings = 1196 bytes • 80 true/false = 359 bytes • 44 null = 176 bytes • 21 undefined = 189 bytes • Total primitives = 1920 bytes • Potential savings > 1 kb
  • jQuery • 96 repeated strings = 1742 bytes • 107 true/false = 478 bytes • 46 null = 184 bytes • Total primitives = 2404 bytes • Potential savings > 1.3 kb • undefined = negligible
  • jQuery
  • Primitive Variables
  • What Can't Be Replaced • Primitive values – strings, booleans, numbers, null, and undefined • Global variables – window, document, XMLHttpRequest, etc.
  • Global Variables • Most bytes: – document – window • Approach: Any global variable used two or more times should be stored into a local variable
  • Global Variables 293 b 162 b
  • Global Variables 317 b 162 b
  • Prototype • 49 document = 392 bytes • 29 window = 174 bytes • Total globals = 566 bytes • Potential Savings > 500 bytes
  • jQuery • 24 document = 192 bytes • 27 window = 162 bytes • Total globals = 354 bytes • Potential Savings > 300 bytes
  • What Can't Be Replaced • Primitive values – strings, booleans, numbers, null, and undefined • Global variables – window, document, XMLHttpRequest, etc. • Property names – foo.bar
  • Property Names • Next to repeated strings, biggest source of extra bytes • Anything to the right of a dot cannot be replaced • Makes a.b.c even more expensive • Approach: Any property used two or more times should be stored into a local variable
  • Property Names 317 b 162 b
  • Property Names 291 b 144 b
  • What Can't Be Replaced • Primitive values – strings, booleans, numbers, null, and undefined • Global variables – window, document, XMLHttpRequest, etc. • Property names – foo.bar • Keywords
  • Keywords • Most commonly overused: – var – return • Approach: Try to have only one var statement and one return per function
  • Keywords 291 b 144 b
  • Keywords 308 b 127 b
  • The Results Before: 172 b After: 127 b Total Savings (from original) = 136 b (52%) Total Savings (from final) = 181 b (59%)
  • Hurting the Compressor
  • Preventing Identifier Replacement • Use of eval() function
  • “eval() is evil” -Douglas Crockford
  • eval() is Evil
  • eval() is Evil
  • Preventing Identifier Replacement • Use of eval() function – Solution #1: Don't use it – Solution #2: Create a global function that wraps eval()
  • Living with eval()
  • Preventing Identifier Replacement • Use of eval() function – Solution #1: Don't use – Solution #2: Create a global function that wraps eval() • Use of with statement
  • “with statement considered harmful” -Douglas Crockford
  • with Statement
  • Preventing Identifier Replacement • Use of eval() function – Solution #1: Don't use – Solution #2: Create a global function that wraps eval() • Use of with statement – Solution #1: Don't use – Solution #2: see Solution #1
  • Preventing Identifier Replacement • Use of eval() function – Solution #1: Don't use – Solution #2: Create a global function that wraps eval() • Use of with statement – Solution #1: Don't use – Solution #2: see Solution #1 • JScript conditional comments
  • Jscript Conditional Comments
  • Preventing Identifier Replacement • Use of eval() function – Solution #1: Don't use – Solution #2: Create a global function that wraps eval() • Use of with statement – Solution #1: Don't use – Solution #2: see Solution #1 • JScript conditional comments – Only solution: Don't use
  • The Compressor Helps You
  • Verbose Mode • Use -v switch to enable • Reports issues with code related to minification: – Undeclared variables – Unused variables – Functions with more than one var statement – Use of evil features (eval(), with, conditional comments)
  • Verbose Mode
  • Summary
  • For Optimal File Size • Use local variables to store: – Repeated primitive values – Global variables – Object properties • Limit each function to one var and one return • Avoid using eval() and with() • Heed YUI Compressor's advice • Combine with HTTP compression for best savings
  • http://developer.yahoo.com/yui/compressor/
  • Questions?
  • Etcetera • My blog: www.nczonline.net • My email: nzakas@yahoo-inc.com • Twitter: @slicknet
  • Happy crunching!
  • Creative Commons Images Used • http://flickr.com/photos/velkr0/467471030/ • http://flickr.com/photos/oskay/253010234/ • http://flickr.com/photos/pacfolly/2304020816/ • http://flickr.com/photos/blmurch/304690615/ • http://flickr.com/photos/tshirbert/191179745/ • http://flickr.com/photos/mc/27061495/ • http://flickr.com/photos/oberazzi/318947873/