; CS193H-High-Performance-Web-Sites-Class-1
Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out
Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

CS193H-High-Performance-Web-Sites-Class-1

VIEWS: 9 PAGES: 13

CS193H-High-Performance-Web-Sites-Class-1

More Info
  • pg 1
									          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
11/3 – Doug Crockford from Yahoo! will be
  guest lecturer talking about "Ajax
  Performance"
              Minification
minification: removing unnecessary characters
  from code (comments, white space, etc.)
obfuscation: minify as well as reduce length of
  symbol names (munge)
                     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/
                minified code
YAHOO.util.CustomEvent=function(type,oScope,silent,signatur
e){this.type=type;this.scope=oScope||window;this.silent=sil
ent;this.signature=signature||YAHOO.util.CustomEvent.LIST;t
his.subscribers=[];if(!this.silent){}
var_onsubscribeType="_YUICEOnSubscribe";if(type!==onsubscri
beType){this.subscribeEvent=new_YAHOO.util.CustomEvent(onsu
bscribeType,this,true);}};


JSMin
   http://crockford.com/javascript/jsmin
YUI Compressor
   http://developer.yahoo.com/yui/compressor/
   also munges and minifies CSS
                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/
             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
                minification vs. obfuscation
                Original                 After
   Web Site                After JSMin
                 Size                  ShrinkSafe
amazon.com       204K         173K       156K

aol.com           44K         40K         40K

cnn.com           98K         79K         74K

myspace.com       88K         65K         64K

wikipedia.org     42K         28K         26K

youtube.com       34K         26K         24K
   Average        85K          68K         64K
                             (-21%)      (-25%)
 minify – extra savings not worth the risk
                gzip and minification
                Original                JSMIN &   Shrink-Safe
   Web Site                After Gzip
                 Size                     Gzip      & Gzip
amazon.com       204K         48K        41K         42K

aol.com           44K         16K        15K         15K

cnn.com           98K         29K        23K         23K

myspace.com       88K         23K        19K         19K

wikipedia.org     42K         13K         8K          8K

youtube.com       34K         10K         8K          8K
   Average        85K         23K         19K         19K
                            (-73%)      (-78%)      (-78%)
 minify – obfuscation benefits decline with gzip
                     Top 10 minification
                        Minify External?      Minify Inline?
                       Apr 07      Oct 08   Apr 07      Oct 08
www.amazon.com                      yes
www.aol.com                        some                 most
www.cnn.com
www.ebay.com            yes         yes                  yes
froogle.google.com      yes         yes      yes         yes
www.msn.com             yes         yes      yes         yes
www.myspace.com                    some
www.wikipedia.org
www.yahoo.com           yes         yes      yes         yes
www.youtube.com                     yes
               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:"
             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
               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?

								
To top