trimming the cruft
DESCRIPTION
A Browser performance optimization talk which includes bits on Dojo's automated steps to alleviate much pain.TRANSCRIPT
Trimming The Cruft:Getting the most of your bits
Peter Higgins (dante)Dojo Toolkit Project Lead
DevNexus: March 10 + 11, 2009
Me.
What is Dojo?
• A JavaScript Toolkit- Light-weight Base. - Use at will framework.
• 100 - point Open Source- Clean IP - Open Cycle
• Developer Tools
The History of Dojo(cli!notes version)
Alex Russell“netwindows”
A Foundation.
Unifying a DHTML landscape
A Team.
Maintaining a vision.
Dojo, Brie"y.
Plain JavaScript
• JavaScript should have:- dojo.indexOf / forEach / map / #lter - hitch / partial - declare / delegate / mixin / extend
Package / Module Loading
• dojo.require(“some.module”)• dojo.addOnLoad(function(){ ... })• dojo.registerModulePath(“my”, “../../my/”)• dojo.require(“my.code”)• dojo.provide(“my.code”)
Events, Ajax, FX, DOM
• dojo.connect(node, “onclick”, function(){ });• dojo.connect(obj, “custom”, obj, “sync”);• dojo.xhrPost({ form:”login”, load:function(dat){}});• dojo.xhrGet({ url:”foo.txt”, load:function(){ } });• dojo.anim(node, { width:200 });• dojo.fadeIn({ node: node }).play();• dojo.style(n, “height”, “50px”);• dojo.place(“<p>Hi</p>”, dojo.body());
CSS Selectors
• dojo.query(“ul > li”).addClass(“listy”);• dojo.query(“a”).onclick(function(){ });• dojo.query(“tr td + td”).forEach(function(n){ });• dojo.query(“.someClass”).map(function(n){ .. });
• dojo.NodeList.prototype / dojo.extend
Flexible Dynamic Language
// confuse people(function(foo){ var f = foo, fid = f.byId;
f.require(“my.code”); f.addOnLoad(function(){
new my.Thinger({ node: fid(‘bar’) }); });})(dojo);
// bling(function(d, $){ $(“.class”).onclick(function(){ });})(dojo, dojo.query);
Optimization Fundamentals
Separate Assets.
Scripts are Blocking, Synchronous.
<head> <script src=”dojo.js”></script> <script>/* code in dojo.js ready */</script></head><body><p>Lots of DOM</p></body>
<body> <p>Lots of DOM</p> <script src=”dojo.js”></script> <script>/* code in dojo.js ready */</script></body>
vs:
Multiple Inline Scripts
Know request limits.
gzip “required”.
• Incredible, exponential savings.- Bene#ts from patterns
• 9 / 10 Major Browsers Support
CSS is “async”
• No reliable “onload”• Put requests #rst• Limit @import
De#ne “ready”
• DOMContentLoaded & window.onload• CSS, JS and Image resources
- required or deferred?- preloaded and cached.
Content Distribution (CDN)
CDN Bene#ts
• Shared Resources- Cached, common, static
• Public vs Private• Headers / Cookies• Beating request limits
Client Considerations(on the wire cost)
JSON vs XML
JavaScript is Fast.
The DOM isn’t.
DOM & CSS
• Size• Complexity• Manipulation
- Avoiding loops- working outside the DOM
• Server vs Client
Events
• Delegation- Normalization
- Bubbles, Cancels• Invention
- mouseenter/mouseleave- onDijitClick
Code Considerations(also on the client)
Modularity. Inheritance.
More on Packages
// the package:dojo.provide(“my.Module”); // my/Module.jsdojo.require(“my._ClassBase”); // my/_ClassBase.jsdojo.declare(“my.Module”, my._ClassBase, {});
// the code:dojo.require(“my.Module”);dojo.addOnLoad(function(){ new my.Module();});
Mix-in Patterns
Arguments, etc.
// function signatures with defaultsmy.func = function(args){ var opts = dojo.mixin({ prop:”foo” }, args||{}); console.log(opts.prop);}
my.func(); // “foo”my.func({ prop:”bar” }); // “bar”
Ambiguous Constructors
dojo.declare(“some.Thing”, null, { opt:”a-default”, constructor: function(args){
dojo.mixin(this, args); }});
var a = new some.Thing(), b = new some.Thing({ opt:”x” });a.opt == “a-default”b.opt == “x”
DRY
my.turnIt = function(dir){// if 1, go next. -1, go left.
}
var next = dojo.partial(my.turnIt, 1), prev = dojo.partial(my.turnIt, -1);
// laterdojo.query(“.nextbutton”).onclick(next);
Dual Service Functions
my.func = function(node, args){ node = dojo.byId(node); // Sting|DomNode /* do something to node */}
dojo.extend(dojo.NodeList, { func: dojo.NodeList._mapAsForEach(“func”, my)});
// run one, run allmy.func(“someId”, { opts:true });dojo.query(“.someNodes”).func({ opts:true })
Mini#cation
To consider:
• YUI / ShrinkSafe / jsmin / packer- variables, whitespace- preserve public APIs
• Micro vs. Premature optimizations- For GZIP- For ShrinkSafe
Dojo Build System
All-in-One
• Works transparently with Package System• Group modules into layers• Concatenate CSS into layers• Layer & File mini#cation
- Comments, Whitespace, newlines ...
Special Builds
• Stubs (6k dojo.js)• Base++ (dojo.js with modules)• Cross-Domain• WebKit Mobile• plugd• Maven
Build Options
• #ifDef - WebKit Mobile
• stripConsole• internStrings
Questions?
