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

Lazy Load Everything!

Avatar for Sebastiano Armeli Sebastiano Armeli
October 18, 2012
Programming
3
410

Lazy Load Everything!

Talk given at Web Directions South, Sydney - October 2012
Avatar for Sebastiano Armeli

Sebastiano Armeli

October 18, 2012
Tweet

More Decks by Sebastiano Armeli

See All by Sebastiano Armeli
Cultivate Excellence In Engineering Teams through Continuous Software Engineering
Avatar for Sebastiano Armeli sebarmeli
1
150
From Strategy Definition to Execution with OKRs and Roadmap
Avatar for Sebastiano Armeli sebarmeli
0
140
From Mission to Strategy: going over OKRs and Roadmap
Avatar for Sebastiano Armeli sebarmeli
0
270
Managing a software engineering team
Avatar for Sebastiano Armeli sebarmeli
1
590
Enforcing coding standards in a JS project
Avatar for Sebastiano Armeli sebarmeli
0
580
Enforcing Coding Standards
Avatar for Sebastiano Armeli sebarmeli
1
120
ES6: The future is now
Avatar for Sebastiano Armeli sebarmeli
2
480
EcmaScript 6 - the future is here
Avatar for Sebastiano Armeli sebarmeli
5
7.2k
Dependency management and Package management in JavaScript
Avatar for Sebastiano Armeli sebarmeli
0
730

Other Decks in Programming

See All in Programming
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
Avatar for uutan1108 ohmori_yusuke
2
170
Using AI Tools Around Software Development
Avatar for inouehi inouehi
0
1.3k
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
Avatar for Kentaro Yoshida y_ken
0
310
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
Avatar for ANDPAD inc andpad
0
260
Rubyでやりたい駆動開発 / Ruby driven development
Avatar for chobishiba chobishiba
1
320
「Cursor/Devin全社導入の理想と現実」のその後
Avatar for Ryoichi Saito saitoryc
0
140
5つのアンチパターンから学ぶLT設計
Avatar for Narihara narihara
1
110
童醫院敏捷轉型的實踐經驗
Avatar for Max Lai cclai999
0
180
Effect の双対、Coeffect
Avatar for ゆきくらげ yukikurage
5
1.4k
地方に住むエンジニアの残酷な現実とキャリア論
Avatar for nakamichi ichimichi
5
1.3k
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
Avatar for Yuki Nakata chikuwait chikuwait
0
390
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
Avatar for Hiromi Hishida 77web
2
290

Featured

See All Featured
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
124
52k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
29
9.5k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Code Review Best Practice
Avatar for Trisha Gee trishagee
68
18k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
930
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.7k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
Designing for Performance
Avatar for Lara Hogan lara
609
69k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7k

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