1 / 13

CS193H: High Performance Web Sites Lecture 13: Rule 10 – Minify JavaScript

CS193H: High Performance Web Sites Lecture 13: Rule 10 – Minify JavaScript. Steve Souders Google souders@cs.stanford.edu. Announcements. grades for last assignment were emailed out yesterday; contact Aravind if you didn't get an email midterm Friday 10/31 – 30-40 short answer questions

valdemar
Download Presentation

CS193H: High Performance Web Sites Lecture 13: Rule 10 – Minify JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CS193H:High Performance Web SitesLecture 13: Rule 10 – Minify JavaScript Steve Souders Google souders@cs.stanford.edu

  2. Announcements grades for last assignment were emailed out yesterday; contact Aravind if you didn't get an email midterm Friday 10/31 – 30-40 short answer questions 11/3 – Doug Crockford from Yahoo! will be guest lecturer talking about "Ajax Performance"

  3. Minification minification: removing unnecessary characters from code (comments, white space, etc.) obfuscation: minify as well as reduce length of symbol names (munge)

  4. original code YAHOO.util.CustomEvent = function(type, oScope, silent, signature) { this.type = type; this.scope = oScope || window; this.silent = silent; this.signature = signature || YAHOO.util.CustomEvent.LIST; this.subscribers = [];   if (!this.silent) { }   var onsubscribeType = "_YUICEOnSubscribe"; if (type !== onsubscribeType) { this.subscribeEvent = new YAHOO.util.CustomEvent(onsubscribeType, this, true);   } }; event.js from YUI – http://developer.yahoo.com/yui/

  5. minified code YAHOO.util.CustomEvent=function(type,oScope,silent,signature){this.type=type;this.scope=oScope||window;this.silent=silent;this.signature=signature||YAHOO.util.CustomEvent.LIST;this.subscribers=[];if(!this.silent){} var_onsubscribeType="_YUICEOnSubscribe";if(type!==onsubscribeType){this.subscribeEvent=new_YAHOO.util.CustomEvent(onsubscribeType,this,true);}}; JSMin http://crockford.com/javascript/jsmin YUI Compressor http://developer.yahoo.com/yui/compressor/ also munges and minifies CSS

  6. obfuscated code YAHOO.util.CustomEvent=function(_1,_2,_3,_4){ this.type=_1; this.scope=_2||window; this.silent=_3; this.signature=_4||YAHOO.util.CustomEvent.LIST; this.subscribers=[]; if(!this.silent){ } var _5="_YUICEOnSubscribe"; if(_1!==_5){ this.subscribeEvent=new YAHOO.util.CustomEvent(_5,this,true); } }; DoJo Compressor (ShrinkSafe) http://dojotoolkit.org/docs/shrinksafe/ YUI Compressor http://developer.yahoo.com/yui/compressor/

  7. obfuscation costs obfuscation typically reduces size more, but has some costs • bugs – symbol munged to "aa", namespace conflict • maintenance – tag external symbols (eg, API) • debugging – harder to read in production

  8. minification vs. obfuscation minify – extra savings not worth the risk

  9. gzip and minification minify – obfuscation benefits decline with gzip

  10. Top 10 minification

  11. Minifying CSS savings are typically less compared to JavaScript • not as much CSS as JavaScript • CSS typically has fewer comments and whitespace greater savings from CSS optimizations • merging identical rules • abbreviations "#660066" => "#606" "0px" => "0" "background-color:" => "background:"

  12. Homework read Chapter 11 of HPWS 10/29 3:15pm – check five Web 100 Performance Profile sites 10/31 3:15pm – midterm 11/7 11:59pm – rules 4-10 applied to your "Improving a Top Site" class project

  13. Questions What's the difference between minification and obfuscation? How do they compare wrt reducing JavaScript size? What's the percentage size reduction after applying minification? What about applying minification and then gzipping? What are three drawbacks to obfuscation?

More Related