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
400
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
110
From Strategy Definition to Execution with OKRs and Roadmap
sebarmeli
0
110
From Mission to Strategy: going over OKRs and Roadmap
sebarmeli
0
250
Managing a software engineering team
sebarmeli
1
540
Enforcing coding standards in a JS project
sebarmeli
0
570
Enforcing Coding Standards
sebarmeli
1
110
ES6: The future is now
sebarmeli
2
470
EcmaScript 6 - the future is here
sebarmeli
5
7.1k
Dependency management and Package management in JavaScript
sebarmeli
0
700
Other Decks in Programming
See All in Programming
Внедряем бюджетирование, или Как сделать хорошо?
lamodatech
0
940
ドメインイベント増えすぎ問題
h0r15h0
2
560
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
430
毎日13時間もかかるバッチ処理をたった3日で60%短縮するためにやったこと
sho_ssk_
1
550
Alba: Why, How and What's So Interesting
okuramasafumi
0
210
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
770
Findy Team+ Awardを受賞したかった!ベストプラクティス応募内容をふりかえり、開発生産性向上もふりかえる / Findy Team Plus Award BestPractice and DPE Retrospective 2024
honyanya
0
140
Androidアプリの One Experience リリース
nein37
0
1.2k
2025.01.17_Sansan × DMM.swift
riofujimon
2
540
선언형 UI에서의 상태관리
l2hyunwoo
0
270
為你自己學 Python
eddie
0
520
React 19でお手軽にCSS-in-JSを自作する
yukukotani
5
560
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
How STYLIGHT went responsive
nonsquared
96
5.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
240
KATA
mclloyd
29
14k
How to train your dragon (web standard)
notwaldorf
89
5.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Site-Speed That Sticks
csswizardry
2
270
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Typedesign – Prime Four
hannesfritz
40
2.5k
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