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

Lazy Load Everything!

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Sebastiano Armeli Sebastiano Armeli
October 18, 2012
Programming
420
3

Lazy Load Everything!

Talk given at Web Directions South, Sydney - October 2012

Avatar for Sebastiano Armeli

Sebastiano Armeli

October 18, 2012

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
220
From Strategy Definition to Execution with OKRs and Roadmap
Avatar for Sebastiano Armeli sebarmeli
0
240
From Mission to Strategy: going over OKRs and Roadmap
Avatar for Sebastiano Armeli sebarmeli
0
320
Managing a software engineering team
Avatar for Sebastiano Armeli sebarmeli
1
670
Enforcing coding standards in a JS project
Avatar for Sebastiano Armeli sebarmeli
0
620
Enforcing Coding Standards
Avatar for Sebastiano Armeli sebarmeli
1
140
ES6: The future is now
Avatar for Sebastiano Armeli sebarmeli
2
520
EcmaScript 6 - the future is here
Avatar for Sebastiano Armeli sebarmeli
5
7.6k
Dependency management and Package management in JavaScript
Avatar for Sebastiano Armeli sebarmeli
0
790

Other Decks in Programming

See All in Programming
プロポーザルを書いてもらう
Avatar for pvcresin pvcresin
0
200
FDEが実現するAI駆動経営の現在地
Avatar for ryuta sakamoto gonta
2
260
AI時代、エンジニアはどう育つのか -未経験エンジニアの成長を間近で見て考えたこと-
Avatar for ta-hasunuma thasu0123
0
220
【やさしく解説 設計編・中級 #6】良いアーキテクチャとは ～ 一本の登り道の、行き先 ～
Avatar for HideyukiKitao panda728
PRO
0
210
Detecting Compromised CI with eBPF and Cilium Tetragon
Avatar for Liz Rice lizrice
0
140
ここ半年くらいでAIに作らせたR用ツール
Avatar for eitsupi eitsupi
0
370
改善しないと、タスクが回らない。 “てんこ盛りポジション” を引き継いだ情シスの、入社3ヶ月の業務改善録
Avatar for Kurumi Watabe krm963
0
250
Claude CodeとAgentCore Gatewayを繋ぐ際の認証認可 / Authentication and authorization when connecting Claude Code with AgentCore Gateway
Avatar for Har1101 har1101
1
230
複数の Claude Code が"放置"されてしまう問題をCLI ダッシュボードを自作して解決した話
Avatar for sumihiro3 sumihiro3
1
660
『コードを書く以外の』エンジニアリング〜課金基盤移行プロジェクト推進のためのTips4選
Avatar for yuriko yuriko1211
0
570
テーブルをDELETEした
Avatar for yuzneri yuzneri
0
130
PHP Application における Kubernetes 内 gRPC 通信
Avatar for Shin Ohno ganchiku
0
580

Featured

See All Featured
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
200
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
420
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
240
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
450
Done Done
Avatar for chrislema chrislema
186
16k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
830
Designing for Performance
Avatar for Lara Hogan lara
611
70k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.3k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
190
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
240
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
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