Lazy Loading Because I'm Lazy

Lazy Loading“do the least work possible”

Evolution of javascript application optimization <head> <script> code </script> </head> Many separate script ﬁle as separate resources (cacheable) Far futures expires headers, e-tags Reduce requests: miniﬁcation and concatenation Serve from static, “cookieless” domains, CDNs We’re still slow....what’s next?

The problem: the ﬁle keeps growing!Not scalable for large applicationsComplexity of production support increases,more code = more liability (one syntax errorand boom!)Big ball of mudHard to maintain development vs. productionsystems (dev mode with separate ﬁles, buildprocess, versioning, etc)

The solution: lazy loadAlways load core javascript framework(jquery + your framework/bootstrap) You don’t have aframework???Lazy load models and controllers based uponinteractionDon’t have an MVC framework? coremvc,JavascriptMVC, many othersAvoid dependency hell: keep it one-level/controller based. Don’t “abuse” prototype

Fine Lines Understand DOMContentLoaded and load eventsAbsolute final “End User” experience -- logsdon’t matterIt matters even for a primed cacheIt takes time to evaluate big javascript files.Caching can NEVER fix this, users see it

Possible improvements: why invest the time?Increase simplicity“Snappiness”, reduce memory footprintHide latencyManage user expectations (users expect towait when they do some action the ﬁrsttime, but hate waiting on every page load)Evaluate your site metrics (passers-by vs.heavy users), cache rate percentage forcost/beneﬁt

Where do I start?Today (probably yesterday)Evaluate your application, especially your usersY-SLOW & Firebug Net Panel. Google Page Speed PluginLook at existing solutions jquery plugins available yuiloader, requirejs, many others as well dojo loader & dep management (maybe) do your own - simple bootstrap with simple API TEST in all target browsers for loading indications. hacks will be needed

<html> A maybe-contrived example<head><title>LazyLoading Test</title><script> var AsyncLoader = function(src, cb) { var s = document.createElement(script); s.type = text/javascript; s.async = true; s.src = src + ?= + Math.random(); // make sure we are loading this once if(typeof(cb) == function) { this.onLoad(cb); } https://gist.github.com/904251 var onLoad = this.onLoad(); s.onreadystatechange = function() { if(this.readyState == loaded || this.readyState == complete) { onLoad(); } }; s.onload = onLoad; s.onerror = onLoad; var asyncLoad = function() { setTimeout(function() { document.getElementById(msg).innerHTML = document.getElementById(msg).innerHTML + Loading...; var x = document.getElementsByTagName(script)[0]; var head = document.getElementsByTagName("head")[0]; x.parentNode.insertBefore(s, x); }, 1000); }; if (window.attachEvent) { window.attachEvent(onload, asyncLoad); } else if(window.addEventListener) { window.addEventListener(load, asyncLoad, false); } }; AsyncLoader.prototype.onLoad = function(cb) { if(typeof(cb) == function) { this._cb = cb; } else if(typeof(this._cb) == function) { var that = this; return function() { that._cb(); } } }; var loader = new AsyncLoader(http://www.mersenneforum.org/txt/43.txt, function() { document.getElementById(msg).innerHTML = document.getElementById(msg).innerHTML + done; });</script></head><body><h1>Javascript Lazy Loading Test</h1><div id=msg></div><div style="height:1000px; width: 50px; background: #aaaaaa;"></div></body></html>

Desired OutcomeMinimal loading indication across mostbrowsers. “Defer” load until after load oryour custom eventGood for third party javascripts which maybe slow or trigger more blocking requeststhemselves on loadDie silently, but handle it. Don’t go on likenothing happened; don’t try to use code thatdidn’t load!

Example Resultshttp://www.letseehere.com/examples/lazy_loading/

thanks Johnathan Leppert Developer, Manta.com twitter: @iamleppert johnathan.leppert@gmail.com Let me google that for you (further reading):https://gist.github.com/904251http://velocityconf.com/velocity2010/public/schedule/detail/15412http://ajaxpatterns.org/On-Demand_Javascripthttp://jasonleveille.com/blog/2008/05/javascript-lazy-loadinghttp://developer.yahoo.com/yui/3/yui/http://requirejs.orghttp://wonko.com/post/painless_javascript_lazy_loading_with_lazyloadhttp://ajaxian.com/archives/a-technique-for-lazy-script-loading

http://www.letseehere.com	1653
http://www.letsseehere.com	77
http://abtasty.com	34
http://letsseehere.com	23
http://letseehere.com	17
http://xmppchatbar.com	5
http://www.xmppchatbar.com	4
url_unknown	4
http://webcache.googleusercontent.com	3
http://ranksit.com	1

Lazy Loading Because I'm Lazy

by Johnathan Leppert

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 1,821

Statistics