Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Lazy Load Everything!
Search
Sebastiano Armeli
October 18, 2012
Programming
3
390
Lazy Load Everything!
Talk given at Web Directions South, Sydney - October 2012
Sebastiano Armeli
October 18, 2012
Tweet
Share
More Decks by Sebastiano Armeli
See All by Sebastiano Armeli
Cultivate Excellence In Engineering Teams through Continuous Software Engineering
sebarmeli
1
86
From Strategy Definition to Execution with OKRs and Roadmap
sebarmeli
0
90
From Mission to Strategy: going over OKRs and Roadmap
sebarmeli
0
240
Managing a software engineering team
sebarmeli
1
510
Enforcing coding standards in a JS project
sebarmeli
0
550
Enforcing Coding Standards
sebarmeli
1
110
ES6: The future is now
sebarmeli
2
470
EcmaScript 6 - the future is here
sebarmeli
5
7k
Dependency management and Package management in JavaScript
sebarmeli
0
660
Other Decks in Programming
See All in Programming
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
120
LangChainの現在とv0.3にむけて
os1ma
3
720
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
120
Using Livebook to build and deploy internal tools @ ElixirConf 2024
hugobarauna
0
220
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
180
XStateでReactに秩序を与えたい
gizm000
0
470
私のEbitengineの第一歩
qt_luigi
0
420
Mastering AsyncSequence - 使う・作る・他のデザインパターン(クロージャ、Delegate など)から移行する
treastrain
4
1.4k
Mergeable Libraryで 高速なアプリ起動を実現しよう!
giginet
PRO
1
2k
Amebaチョイス立ち上げの裏側 ~依存システムとの闘い~
daichi_igarashi
0
220
どうしてこうなった?から理解するActive Recordの関連の裏側
willnet
5
530
null or undefined
susisu
22
5.7k
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
25
1.3k
Building an army of robots
kneath
302
42k
Fashionably flexible responsive web design (full day workshop)
malarkey
400
65k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
27
8.9k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Designing Experiences People Love
moore
138
23k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Adopting Sorbet at Scale
ufuk
72
8.9k
Git: the NoSQL Database
bkeepers
PRO
425
64k
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