Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Lazy Load Everything!

A32ee5b05bff6b42a3dd62b5732065f8?s=47 Sebastiano Armeli-Battana
October 18, 2012
Programming
3
240

Lazy Load Everything!

Talk given at Web Directions South, Sydney - October 2012

A32ee5b05bff6b42a3dd62b5732065f8?s=128

Sebastiano Armeli-Battana

October 18, 2012
Tweet

More Decks by Sebastiano Armeli-Battana

See All by Sebastiano Armeli-Battana
Managing a software engineering team
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
1
270
Enforcing coding standards in a JS project
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
0
390
Enforcing Coding Standards
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
1
89
ES6: The future is now
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
2
410
EcmaScript 6 - the future is here
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
5
6.6k
Dependency management and Package management in JavaScript
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
0
450
Karma - JS Test Runner
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
1
590
RequireJS
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
5
280
MVC on the server and on the client
A32ee5b05bff6b42a3dd62b5732065f8?s=48 sebarmeli
0
51

Other Decks in Programming

See All in Programming
脱オブジェクト指向講座(5分LT資料)
9e840766611f942c7c0a9ad6987a5d78?s=48 kishida
8
11k
Becoming an Android Librarian
D4df9c152982182ce1125e49fe83527c?s=48 skydoves
3
490
[RailsConf 2022] The pitfalls of realtime-ification
52cc8a838bf44a589d2572833b2dd1b9?s=48 palkan
0
370
マイクロインタラクション入門〜ディテイルにこだわるエンジニアリング〜
F1fc4b62755cd021f4bf9ce5543065aa?s=48 swimmyxox
0
120
OSS Forward Workshop
011714704c4a925e542d426d4cdaa4e3?s=48 giginet
2
440
Why declarative UI frameworks?
6233177bc63ec02060206adef9108601?s=48 tkuenneth
0
200
CIでAndroidUIテストの様子を録画してみた
46b3bc302e3a40f8df60cfb60d59c313?s=48 mkeeda
0
190
코드 품질 1% 올리기
354271902cd8ba2762d05b251dfa0f84?s=48 pluu
1
1k
バンドル最適化マニアクス at tfconf
3aebd86547bfc5cdb451d5f2f95ed5d8?s=48 mizchi
5
2.4k
Unboxing Rails 7
0722f1ff8d0a69bce57ebdb93dafc395?s=48 claudiob
1
120
SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計
1644fba8a219c89987390ef4f23d06bf?s=48 ahomu
3
1.9k
読みやすいコードを書こう
A7048be18b1c2e712e5b564b1adb1f7e?s=48 yutorin
0
440

Featured

See All Featured
Fashionably flexible responsive web design (full day workshop)
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
396
62k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
15
920
Designing with Data
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
91
3.9k
Infographics Made Easy
282d599b414022eba5096510f675b6e2?s=48 chrislema
233
17k
Ruby is Unlike a Banana
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
91
9.2k
How GitHub Uses GitHub to Build GitHub
78b475797a14c84799063c7cd073962f?s=48 holman
465
280k
Navigating Team Friction
245cee81a9c424266e5e401d844ea881?s=48 lara
175
11k
Intergalactic Javascript Robots from Outer Space
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
261
25k
Happy Clients
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
89
5.6k
A Tale of Four Properties
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
149
20k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
100
5.9k
Rails Girls Zürich Keynote
24fc194843a71f10949be18d5a692682?s=48 gr2m
86
12k

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