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

Lazy Load Everything!

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

More Decks by Sebastiano Armeli

See All by Sebastiano Armeli
Cultivate Excellence In Engineering Teams through Continuous Software Engineering
sebarmeli
1
95
From Strategy Definition to Execution with OKRs and Roadmap
sebarmeli
0
95
From Mission to Strategy: going over OKRs and Roadmap
sebarmeli
0
240
Managing a software engineering team
sebarmeli
1
520
Enforcing coding standards in a JS project
sebarmeli
0
560
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
680

Other Decks in Programming

See All in Programming
色々なIaCツールを実際に触って比較してみる
iriikeita
0
330
Ethereum_.pdf
nekomatu
0
460
ローコードSaaSのUXを向上させるためのTypeScript
taro28
1
600
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
AWS Lambdaから始まった
Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
250
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.3k
카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우
kakao
PRO
0
110
AI時代におけるSRE、
あるいはエンジニアの生存戦略
pyama86
6
1.1k
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
870

Featured

See All Featured
Producing Creativity
orderedlist
PRO
341
39k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Building an army of robots
kneath
302
43k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
A designer walks into a library…
pauljervisheath
203
24k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
BBQ
matthewcrist
85
9.3k
A Tale of Four Properties
chriscoyier
156
23k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
730

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