cs193h: high performance web sites lecture 13: rule 10 – minify javascript steve souders google...
Post on 27-Mar-2015
221 Views
Preview:
TRANSCRIPT
CS193H:High Performance Web Sites
Lecture 13: Rule 10 – Minify JavaScript
Steve SoudersGoogle
souders@cs.stanford.edu
Announcementsgrades 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"
Minificationminification: removing unnecessary characters
from code (comments, white space, etc.)obfuscation: minify as well as reduce length of
symbol names (munge)
original codeYAHOO.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 codeYAHOO.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);}};
JSMinhttp://crockford.com/javascript/jsmin
YUI Compressor http://developer.yahoo.com/yui/compressor/also munges and minifies CSS
obfuscated codeYAHOO.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 costsobfuscation 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. obfuscationWeb Site Original
Size After JSMin After 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 (-21%)
64K (-25%)
minify – extra savings not worth the risk
gzip and minificationWeb Site Original
Size After Gzip JSMIN & Gzip
Shrink-Safe & 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 (-73%)
19K (-78%)
19K (-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 yeswww.aol.com some mostwww.cnn.comwww.ebay.com yes yes yesfroogle.google.com yes yes yes yeswww.msn.com yes yes yes yeswww.myspace.com somewww.wikipedia.orgwww.yahoo.com yes yes yes yeswww.youtube.com yes
Minifying CSSsavings 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:"
Homeworkread Chapter 11 of HPWS10/29 3:15pm – check five Web 100
Performance Profile sites10/31 3:15pm – midterm11/7 11:59pm – rules 4-10 applied to your
"Improving a Top Site" class project
QuestionsWhat'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?
top related