$30 off During Our Annual Pro Sale. View Details »

Lazy Load Everything!

Sebastiano Armeli-Battana
October 18, 2012
Programming
3
270

Lazy Load Everything!

Talk given at Web Directions South, Sydney - October 2012

Sebastiano Armeli-Battana

October 18, 2012
Tweet

More Decks by Sebastiano Armeli-Battana

See All by Sebastiano Armeli-Battana
Managing a software engineering team
sebarmeli
1
300
Enforcing coding standards in a JS project
sebarmeli
0
420
Enforcing Coding Standards
sebarmeli
1
93
ES6: The future is now
sebarmeli
2
420
EcmaScript 6 - the future is here
sebarmeli
5
6.7k
Dependency management and Package management in JavaScript
sebarmeli
0
500
Karma - JS Test Runner
sebarmeli
1
640
RequireJS
sebarmeli
5
300
MVC on the server and on the client
sebarmeli
0
56

Other Decks in Programming

See All in Programming
LintオタクによるLint解説 / Introduction to Lints
orgachem
20
5.8k
良い設計と悪い設計の違い
masuda220
PRO
16
17k
よくあるケースから学ぶ！AWS で想定外のコスト増につながるような実装や設計
track3jyo
PRO
9
640
JavaOne 2022 報告会（パターンマッチングとString Templatesの話）
takasyou
0
100
Import Maps: The Next Evolution Step for Micro Frontends?
manfredsteyer
PRO
0
140
최신 Flutter Desktop 톺아보기 - DevFest 2022 Songdo
itsmedreamwalker
0
180
ネットスーパーにおける商品在庫データのアプリケーション構築事例
10xinc
7
2.6k
Micro Frontends with Module Federation: Beyond the Basics
manfredsteyer
PRO
0
300
redux使うのやめました
hirasa
1
140
CSC308 Lecture 20
javiergs
PRO
0
110
傾聴対話ライブラリ実装 -おうむ返し-
sadahry
0
1k
Wantedlyのフロントエンド領域の取り組みと課題
chloe463
0
3.1k

Featured

See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
8
1.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
215
21k
Building Flexible Design Systems
yeseniaperezcruz
311
34k
Happy Clients
brianwarren
89
5.7k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
74
4.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
214
11k
From Idea to $5000 a Month in 5 Months
shpigford
374
44k
Three Pipe Problems
jasonvnalue
89
8.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
239
11k

Transcript

  1. LAZY LOAD EVERYTHING! Sebastiano Armeli @sebarmeli Web Directions South 2012,

    Sydney Monday, 3 June 13

  2. LAZYNESS?? Monday, 3 June 13

  3. PERFORMANCE Monday, 3 June 13

  4. • Asynchronous calls • Load on-demand LAZY LOADING • window

    ‘onload’ NOT delayed • Driven by Events Monday, 3 June 13

  5. What can we lazy load? Monday, 3 June 13

  6. <script> </script> Monday, 3 June 13

  7. <body> <!-- Page content --> <img .../> <!--JS concatenated, at

    the bottom--> <script src=”js/one.min.js”></script> </body> Concatenation Monday, 3 June 13

  8. ‘onload’ ‘DOMContentLoaded’ Monday, 3 June 13

  9. DRAWBACKS • No parallel downloads • Limit bene!ts from caching

    • Limit bene!ts from CDN • ‘DOMContentLoaded’ still late Monday, 3 June 13

  10. 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

  11. <script async src="script.js"></script> HTML 5 Async Monday, 3 June 13

  12. $(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

  13. after ‘onload’ Monday, 3 June 13

  14. What if some JS code depends on a lazy-loaded file?

    Monday, 3 June 13

  15. Monitor readyState attribute Monday, 3 June 13

  16. • Dependecy Management • Intuitive methods to load JS SCRIPT

    LOADERS • Parallel downloads Monday, 3 June 13

  17. $('img').click(function(){ yepnope.injectJs("script.js", function(){ // Executed when the script is loaded

    console.log("Hi!"); }); }); YepNope.js Monday, 3 June 13

  18. Lazy load assets based on visibility Monday, 3 June 13

  19. 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

  20. <img> Monday, 3 June 13

  21. The problem Visible and not visible images are loaded Monday,

    3 June 13

  22. JAIL LazyLoad YUI ImageLoader or ... mod_pagespeed Monday, 3 June

    13

  23. JAIL.js • jQuery plugin by @sebarmeli • Easy to use

    -> $(‘img’).jail() • ‘data-src’ attribute • A few con!gurations available Monday, 3 June 13

  24. // Images loaded scrolling down $(function(){ $(‘img’).jail(); }); // Images

    loaded after an event $(function(){ $(‘img’).jail({ triggerElement: ‘a.link’, event: ‘click’ }); }); Monday, 3 June 13

  25. 4 images downloaded after ‘onload’ in different moments! Monday, 3

    June 13

  26. Monday, 3 June 13

  27. Monday, 3 June 13

  28. http://requirejs.com http://yepnopejs.com/ http://sebarmeli.github.com/jail @sebarmeli https://gist.github.com/3899364 Monday, 3 June 13