Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Lazy Load Everything!
Sebastiano Armeli-Battana
October 18, 2012
Programming
3
240
Lazy Load Everything!
Talk given at Web Directions South, Sydney - October 2012
Sebastiano Armeli-Battana
October 18, 2012
Tweet
Share
More Decks by Sebastiano Armeli-Battana
See All by Sebastiano Armeli-Battana
Managing a software engineering team
sebarmeli
1
270
Enforcing coding standards in a JS project
sebarmeli
0
390
Enforcing Coding Standards
sebarmeli
1
89
ES6: The future is now
sebarmeli
2
410
EcmaScript 6 - the future is here
sebarmeli
5
6.6k
Dependency management and Package management in JavaScript
sebarmeli
0
450
Karma - JS Test Runner
sebarmeli
1
590
RequireJS
sebarmeli
5
280
MVC on the server and on the client
sebarmeli
0
51
Other Decks in Programming
See All in Programming
脱オブジェクト指向講座(5分LT資料)
kishida
8
11k
Becoming an Android Librarian
skydoves
3
490
[RailsConf 2022] The pitfalls of realtime-ification
palkan
0
370
マイクロインタラクション入門〜ディテイルにこだわるエンジニアリング〜
swimmyxox
0
120
OSS Forward Workshop
giginet
2
440
Why declarative UI frameworks?
tkuenneth
0
200
CIでAndroidUIテストの様子を録画してみた
mkeeda
0
190
코드 품질 1% 올리기
pluu
1
1k
バンドル最適化マニアクス at tfconf
mizchi
5
2.4k
Unboxing Rails 7
claudiob
1
120
SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計
ahomu
3
1.9k
読みやすいコードを書こう
yutorin
0
440
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
920
Designing with Data
zakiwarfel
91
3.9k
Infographics Made Easy
chrislema
233
17k
Ruby is Unlike a Banana
tanoku
91
9.2k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Navigating Team Friction
lara
175
11k
Intergalactic Javascript Robots from Outer Space
tanoku
261
25k
Happy Clients
brianwarren
89
5.6k
A Tale of Four Properties
chriscoyier
149
20k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
5.9k
Rails Girls Zürich Keynote
gr2m
86
12k
Transcript
LAZY LOAD EVERYTHING! Sebastiano Armeli @sebarmeli Web Directions South 2012,
Sydney Monday, 3 June 13
LAZYNESS?? Monday, 3 June 13
PERFORMANCE Monday, 3 June 13
• Asynchronous calls • Load on-demand LAZY LOADING • window
‘onload’ NOT delayed • Driven by Events Monday, 3 June 13
What can we lazy load? Monday, 3 June 13
<script> </script> Monday, 3 June 13
<body> <!-- Page content --> <img .../> <!--JS concatenated, at
the bottom--> <script src=”js/one.min.js”></script> </body> Concatenation Monday, 3 June 13
‘onload’ ‘DOMContentLoaded’ Monday, 3 June 13
DRAWBACKS • No parallel downloads • Limit bene!ts from caching
• Limit bene!ts from CDN • ‘DOMContentLoaded’ still late Monday, 3 June 13
var g = document.createElement('script'); g.type = 'text/javascript'; g.async = true;
g.src = 'js/third_party.js'; var s = document. getElementsByTagName('script')[0]; s.parentNode.insertBefore(g, s); Dynamic <script> Monday, 3 June 13
<script async src="script.js"></script> HTML 5 Async Monday, 3 June 13
$(window).load(function(){ // Async insert <script> var g = document.createElement('script'); g.type
= 'text/javascript'; g.async = true; g.src = 'js/third_party.js'; var s = document. getElementsByTagName('script')[0]; s.parentNode.insertBefore(g, s); }); Async + Event-driven Monday, 3 June 13
after ‘onload’ Monday, 3 June 13
What if some JS code depends on a lazy-loaded file?
Monday, 3 June 13
Monitor readyState attribute Monday, 3 June 13
• Dependecy Management • Intuitive methods to load JS SCRIPT
LOADERS • Parallel downloads Monday, 3 June 13
$('img').click(function(){ yepnope.injectJs("script.js", function(){ // Executed when the script is loaded
console.log("Hi!"); }); }); YepNope.js Monday, 3 June 13
Lazy load assets based on visibility Monday, 3 June 13
function loadVisible(el, script, callback) { var rect = el.getBoundingClientRect(); if
(rect.top >= 0 && rect.left >= 0 && rect.bottom <= window.innerHeight && rect.right <= window.innerWidth) { // Load the script yepnope.injectJs(script, function(){ if (callback) { callback(); } }); } } Monday, 3 June 13
<img> Monday, 3 June 13
The problem Visible and not visible images are loaded Monday,
3 June 13
JAIL LazyLoad YUI ImageLoader or ... mod_pagespeed Monday, 3 June
13
JAIL.js • jQuery plugin by @sebarmeli • Easy to use
-> $(‘img’).jail() • ‘data-src’ attribute • A few con!gurations available Monday, 3 June 13
// Images loaded scrolling down $(function(){ $(‘img’).jail(); }); // Images
loaded after an event $(function(){ $(‘img’).jail({ triggerElement: ‘a.link’, event: ‘click’ }); }); Monday, 3 June 13
4 images downloaded after ‘onload’ in different moments! Monday, 3
June 13
Monday, 3 June 13
Monday, 3 June 13
http://requirejs.com http://yepnopejs.com/ http://sebarmeli.github.com/jail @sebarmeli https://gist.github.com/3899364 Monday, 3 June 13