SlideShare a Scribd company logo
JSConf.eu 8 November 2009 Loading JavaScript Even a Caveman Can Do It Kyle Simpson [email_address] http://getify.com @getify #jsconf #loadjs
 
Your. Site. Probably. Sucks. At Loading JavaScript.
Sucks.
Sucks.
Sucks.
How To Suck At Loading JavaScript 1. Load too many files 2. Load too few files 3. Load all files before DOM-ready 4. Use the <script> tag 5. Load all files serially
Relax! I’m not gonna  keep  telling you how much you suck. And you don’t suck,  JavaScript loading sucks .
How To  NOT  Suck At Loading JavaScript 1. Use a build-process for local scripts 2. Use g-zip and minifiers 3. Profile, load  when  needed 4. Load parallel, execute serially 5. Load now, execute later
Build-process script handling
dojo.require
Combiner (Nicholas Zakas)
Yo, which shirt should I wear?
G-zip minify/obfuscate
Mincir “ Mincer” (to slim down) (alpha! Seriously!)
Identifier Frequency Detection “ Constants” G-zip Optimization
280 characters 272 characters
93 bytes gzip’d 84 bytes gzip’d
169 characters 163 characters
Load-time profiling
Doloto (Microsoft)
“ The key is to figure out what needs to load before the DOM is ready, and what can wait.”   --  Microsoft  Caveman
Load scripts faster Execute in correct order
<script> tags behave differently cross-browser with respect to loading and execution, either in parallel or serial. Hint: They Suck
FF3 with <script> & <img> tags FF3.5 with <script> & <img> tags
It gets crazy when you look at ie6, ie7, ie8, opera, chrome, safari…& mobile Hint: This Sucks And it gets even crazier when you load other page elements like css near your <script> tags
LABjs L oading  A nd  B locking  J ava S cript
Put simply, LABjs is intended to be a simple way to replace <script> tags with a mechanism that gives you more control over loading and execution behavior.
LABjs is a script loader that lets you load *any script, into any page, at any time. It uses an expressive API that helps you replace your script tags easily. *exceptions explained in a moment.
When  NOT  to use LABjs 1. If your script uses document.write 2. If your script  ITSELF  does unsafe DOM-ready detection  – does not apply to scripts that use the  results  of such detection.
When  TO  use LABjs ,[object Object],(actually, wherever you load scripts over-the-wire, and you care about performance, and don’t have a  suitable  loader already)
FF3 with <script> & <img> tags FF3.5 with <script> & <img> tags LABjs in  every  browser
16.84 seconds vs. 6.24 seconds 2.7x speed increase in overall page load Enough said, right?
The LABjs API is a chaining API (similar to jQuery), which you can use to express one or more groups of scripts to load, where (by default) all scripts will load in parallel, but groups will execute in serial. You can specify as many independent chains as necessary. So, you can both load scripts that have no dependencies on each other (and thus can run in parallel), and those scripts that do have execution order dependency, while still loading everything as quickly as possible.
 
 
 
 
UsePreloading [ true /false]  UseCachePreload [ true /false]  UseLocalXHR [ true /false]  AlwaysPreserveOrder [true/ false ]  AppendTo [‘ head ’/’body’]  AllowDuplicates [true/ false ]  BasePath [string]
BRIEFLY , how does LABjs do this?
Only the part of the decision matrix that works on-demand at any point in the page lifetime, for same- and cross-domain scripts, loading in parallel, ensuring execution order dependencies, allowing coupling.
LABjs’ current default behavior
Preload  “not-code” , execute  code   (later)
 
Can be inside a .js file Can be inside a <script> tag
 
 
True for desktop browsers Also true for mobile
That wasn’t so hard was it?
Kyle Simpson [email_address] http://getify.com @getify #jsconf #loadjs More Info http://labjs.com http://msdn.microsoft.com/en-us/devlabs/ee423534.aspx http://www.nczonline.net/blog/2009/09/22/introducing-combiner-a-javascriptcss-concatenation-tool/ http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html SpeakerRate (slides, code samples posted): http://speakerrate.com/talks/1754-loading-javascript-even-a-caveman-can-do-it

More Related Content

What's hot

Concurrency in ruby
Concurrency in rubyConcurrency in ruby
Concurrency in ruby
Marco Borromeo
 
Intro to Node.js (v1)
Intro to Node.js (v1)Intro to Node.js (v1)
Intro to Node.js (v1)
Chris Cowan
 
Superfast Automated Web Testing with CasperJS & PhantomJS
Superfast Automated Web Testing with CasperJS & PhantomJS Superfast Automated Web Testing with CasperJS & PhantomJS
Superfast Automated Web Testing with CasperJS & PhantomJS
Hervé Vũ Roussel
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
Jack Franklin
 
Silverlight development using Eclipse4SL
Silverlight development using Eclipse4SLSilverlight development using Eclipse4SL
Silverlight development using Eclipse4SL
Sho Ito
 
Ruby vs Node ShiningRay Shanghai
Ruby vs Node ShiningRay ShanghaiRuby vs Node ShiningRay Shanghai
Ruby vs Node ShiningRay Shanghai
Jackson Tian
 
Grape golilath
Grape golilathGrape golilath
Grape golilath
Kannan Reghu
 
WordPress workflow of the future
WordPress workflow of the futureWordPress workflow of the future
WordPress workflow of the future
Eli McMakin
 
How *NOT* to firmware
How *NOT* to firmwareHow *NOT* to firmware
How *NOT* to firmware
Amit Serper
 
Dockerizing BDD : Ruby-Cucumber Example
Dockerizing BDD : Ruby-Cucumber ExampleDockerizing BDD : Ruby-Cucumber Example
Dockerizing BDD : Ruby-Cucumber Example
Shashikant Jagtap
 
Vagrant
VagrantVagrant
The internet of $h1t
The internet of $h1tThe internet of $h1t
The internet of $h1t
Amit Serper
 
How do I Write Testable Javascript so I can Test my CF API on Server and Client
How do I Write Testable Javascript so I can Test my CF API on Server and ClientHow do I Write Testable Javascript so I can Test my CF API on Server and Client
How do I Write Testable Javascript so I can Test my CF API on Server and Client
ColdFusionConference
 
Varying vagrant vagrants
Varying vagrant vagrantsVarying vagrant vagrants
Varying vagrant vagrants
Duong Ngo Thai
 
Creating Custom Slack Integrations with Vapor 3 (Redux)
Creating Custom Slack Integrations with Vapor 3 (Redux)Creating Custom Slack Integrations with Vapor 3 (Redux)
Creating Custom Slack Integrations with Vapor 3 (Redux)
🔴 Keli'i Martin
 
CasperJs Enjoy Functional Testing
CasperJs Enjoy Functional TestingCasperJs Enjoy Functional Testing
CasperJs Enjoy Functional Testing
Fabien POMEROL
 
Event Machine
Event MachineEvent Machine
Event Machine
Diego Pacheco
 
JRuby deployments
JRuby deploymentsJRuby deployments
JRuby deployments
berninme
 
Realtime MVC with Sails.js
Realtime MVC with Sails.jsRealtime MVC with Sails.js
Realtime MVC with Sails.js
Serdar Dogruyol
 
JavaScript Web Workers
JavaScript Web WorkersJavaScript Web Workers
JavaScript Web Workers
Tobias Pfeiffer
 

What's hot (20)

Concurrency in ruby
Concurrency in rubyConcurrency in ruby
Concurrency in ruby
 
Intro to Node.js (v1)
Intro to Node.js (v1)Intro to Node.js (v1)
Intro to Node.js (v1)
 
Superfast Automated Web Testing with CasperJS & PhantomJS
Superfast Automated Web Testing with CasperJS & PhantomJS Superfast Automated Web Testing with CasperJS & PhantomJS
Superfast Automated Web Testing with CasperJS & PhantomJS
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
 
Silverlight development using Eclipse4SL
Silverlight development using Eclipse4SLSilverlight development using Eclipse4SL
Silverlight development using Eclipse4SL
 
Ruby vs Node ShiningRay Shanghai
Ruby vs Node ShiningRay ShanghaiRuby vs Node ShiningRay Shanghai
Ruby vs Node ShiningRay Shanghai
 
Grape golilath
Grape golilathGrape golilath
Grape golilath
 
WordPress workflow of the future
WordPress workflow of the futureWordPress workflow of the future
WordPress workflow of the future
 
How *NOT* to firmware
How *NOT* to firmwareHow *NOT* to firmware
How *NOT* to firmware
 
Dockerizing BDD : Ruby-Cucumber Example
Dockerizing BDD : Ruby-Cucumber ExampleDockerizing BDD : Ruby-Cucumber Example
Dockerizing BDD : Ruby-Cucumber Example
 
Vagrant
VagrantVagrant
Vagrant
 
The internet of $h1t
The internet of $h1tThe internet of $h1t
The internet of $h1t
 
How do I Write Testable Javascript so I can Test my CF API on Server and Client
How do I Write Testable Javascript so I can Test my CF API on Server and ClientHow do I Write Testable Javascript so I can Test my CF API on Server and Client
How do I Write Testable Javascript so I can Test my CF API on Server and Client
 
Varying vagrant vagrants
Varying vagrant vagrantsVarying vagrant vagrants
Varying vagrant vagrants
 
Creating Custom Slack Integrations with Vapor 3 (Redux)
Creating Custom Slack Integrations with Vapor 3 (Redux)Creating Custom Slack Integrations with Vapor 3 (Redux)
Creating Custom Slack Integrations with Vapor 3 (Redux)
 
CasperJs Enjoy Functional Testing
CasperJs Enjoy Functional TestingCasperJs Enjoy Functional Testing
CasperJs Enjoy Functional Testing
 
Event Machine
Event MachineEvent Machine
Event Machine
 
JRuby deployments
JRuby deploymentsJRuby deployments
JRuby deployments
 
Realtime MVC with Sails.js
Realtime MVC with Sails.jsRealtime MVC with Sails.js
Realtime MVC with Sails.js
 
JavaScript Web Workers
JavaScript Web WorkersJavaScript Web Workers
JavaScript Web Workers
 

Similar to Loading JavaScript: Even a caveman can do it

No more script tag soup!
No more script tag soup!No more script tag soup!
No more script tag soup!
Kyle Simpson
 
Spring Northwest Usergroup Grails Presentation
Spring Northwest Usergroup Grails PresentationSpring Northwest Usergroup Grails Presentation
Spring Northwest Usergroup Grails Presentation
ajevans
 
Sparklife - Life In The Trenches With Spark
Sparklife - Life In The Trenches With SparkSparklife - Life In The Trenches With Spark
Sparklife - Life In The Trenches With Spark
Ian Pointer
 
The Once And Future Script Loader (v3)
The Once And Future Script Loader (v3)The Once And Future Script Loader (v3)
The Once And Future Script Loader (v3)
Kyle Simpson
 
Continuous deployment of Rails apps on AWS OpsWorks
Continuous deployment of Rails apps on AWS OpsWorksContinuous deployment of Rails apps on AWS OpsWorks
Continuous deployment of Rails apps on AWS OpsWorks
Tomaž Zaman
 
DiUS Computing Lca Rails Final
DiUS  Computing Lca Rails FinalDiUS  Computing Lca Rails Final
DiUS Computing Lca Rails Final
Robert Postill
 
Zepto and the rise of the JavaScript Micro-Frameworks
Zepto and the rise of the JavaScript Micro-FrameworksZepto and the rise of the JavaScript Micro-Frameworks
Zepto and the rise of the JavaScript Micro-Frameworks
Thomas Fuchs
 
Introduction to Java Scripting
Introduction to Java ScriptingIntroduction to Java Scripting
Introduction to Java Scripting
fantasticdigitaltools
 
The Once And Future Script Loader (v2)
The Once And Future Script Loader (v2)The Once And Future Script Loader (v2)
The Once And Future Script Loader (v2)
Kyle Simpson
 
GWT is Smarter Than You
GWT is Smarter Than YouGWT is Smarter Than You
GWT is Smarter Than You
Robert Cooper
 
Integration Testing in Python
Integration Testing in PythonIntegration Testing in Python
Integration Testing in Python
Panoptic Development, Inc.
 
Red Hat Nordics 2020 - Apache Camel 3 the next generation of enterprise integ...
Red Hat Nordics 2020 - Apache Camel 3 the next generation of enterprise integ...Red Hat Nordics 2020 - Apache Camel 3 the next generation of enterprise integ...
Red Hat Nordics 2020 - Apache Camel 3 the next generation of enterprise integ...
Claus Ibsen
 
JRuby in the enterprise
JRuby in the enterpriseJRuby in the enterprise
JRuby in the enterprise
Jerry Gulla
 
Softshake 2013 - Let's take this offline
Softshake 2013 - Let's take this offlineSoftshake 2013 - Let's take this offline
Softshake 2013 - Let's take this offline
Claire Reynaud
 
JVM Web Frameworks Exploration
JVM Web Frameworks ExplorationJVM Web Frameworks Exploration
JVM Web Frameworks Exploration
Kevin H.A. Tan
 
TypeScript for Alfresco and CMIS - Alfresco DevCon 2012 San Jose
TypeScript for Alfresco and CMIS - Alfresco DevCon 2012 San JoseTypeScript for Alfresco and CMIS - Alfresco DevCon 2012 San Jose
TypeScript for Alfresco and CMIS - Alfresco DevCon 2012 San Jose
Steve Reiner
 
Google在Web前端方面的经验
Google在Web前端方面的经验Google在Web前端方面的经验
Google在Web前端方面的经验
yiditushe
 
SXSW: Even Faster Web Sites
SXSW: Even Faster Web SitesSXSW: Even Faster Web Sites
SXSW: Even Faster Web Sites
Steve Souders
 
Sxsw 20090314
Sxsw 20090314Sxsw 20090314
Sxsw 20090314
guestcabcf63
 
High Performance Ajax Applications 1197671494632682 2
High Performance Ajax Applications 1197671494632682 2High Performance Ajax Applications 1197671494632682 2
High Performance Ajax Applications 1197671494632682 2
Niti Chotkaew
 

Similar to Loading JavaScript: Even a caveman can do it (20)

No more script tag soup!
No more script tag soup!No more script tag soup!
No more script tag soup!
 
Spring Northwest Usergroup Grails Presentation
Spring Northwest Usergroup Grails PresentationSpring Northwest Usergroup Grails Presentation
Spring Northwest Usergroup Grails Presentation
 
Sparklife - Life In The Trenches With Spark
Sparklife - Life In The Trenches With SparkSparklife - Life In The Trenches With Spark
Sparklife - Life In The Trenches With Spark
 
The Once And Future Script Loader (v3)
The Once And Future Script Loader (v3)The Once And Future Script Loader (v3)
The Once And Future Script Loader (v3)
 
Continuous deployment of Rails apps on AWS OpsWorks
Continuous deployment of Rails apps on AWS OpsWorksContinuous deployment of Rails apps on AWS OpsWorks
Continuous deployment of Rails apps on AWS OpsWorks
 
DiUS Computing Lca Rails Final
DiUS  Computing Lca Rails FinalDiUS  Computing Lca Rails Final
DiUS Computing Lca Rails Final
 
Zepto and the rise of the JavaScript Micro-Frameworks
Zepto and the rise of the JavaScript Micro-FrameworksZepto and the rise of the JavaScript Micro-Frameworks
Zepto and the rise of the JavaScript Micro-Frameworks
 
Introduction to Java Scripting
Introduction to Java ScriptingIntroduction to Java Scripting
Introduction to Java Scripting
 
The Once And Future Script Loader (v2)
The Once And Future Script Loader (v2)The Once And Future Script Loader (v2)
The Once And Future Script Loader (v2)
 
GWT is Smarter Than You
GWT is Smarter Than YouGWT is Smarter Than You
GWT is Smarter Than You
 
Integration Testing in Python
Integration Testing in PythonIntegration Testing in Python
Integration Testing in Python
 
Red Hat Nordics 2020 - Apache Camel 3 the next generation of enterprise integ...
Red Hat Nordics 2020 - Apache Camel 3 the next generation of enterprise integ...Red Hat Nordics 2020 - Apache Camel 3 the next generation of enterprise integ...
Red Hat Nordics 2020 - Apache Camel 3 the next generation of enterprise integ...
 
JRuby in the enterprise
JRuby in the enterpriseJRuby in the enterprise
JRuby in the enterprise
 
Softshake 2013 - Let's take this offline
Softshake 2013 - Let's take this offlineSoftshake 2013 - Let's take this offline
Softshake 2013 - Let's take this offline
 
JVM Web Frameworks Exploration
JVM Web Frameworks ExplorationJVM Web Frameworks Exploration
JVM Web Frameworks Exploration
 
TypeScript for Alfresco and CMIS - Alfresco DevCon 2012 San Jose
TypeScript for Alfresco and CMIS - Alfresco DevCon 2012 San JoseTypeScript for Alfresco and CMIS - Alfresco DevCon 2012 San Jose
TypeScript for Alfresco and CMIS - Alfresco DevCon 2012 San Jose
 
Google在Web前端方面的经验
Google在Web前端方面的经验Google在Web前端方面的经验
Google在Web前端方面的经验
 
SXSW: Even Faster Web Sites
SXSW: Even Faster Web SitesSXSW: Even Faster Web Sites
SXSW: Even Faster Web Sites
 
Sxsw 20090314
Sxsw 20090314Sxsw 20090314
Sxsw 20090314
 
High Performance Ajax Applications 1197671494632682 2
High Performance Ajax Applications 1197671494632682 2High Performance Ajax Applications 1197671494632682 2
High Performance Ajax Applications 1197671494632682 2
 

More from Kyle Simpson

HTML5 JavaScript On Crack
HTML5 JavaScript On CrackHTML5 JavaScript On Crack
HTML5 JavaScript On Crack
Kyle Simpson
 
The Once And Future Script Loader (v1)
The Once And Future Script Loader (v1)The Once And Future Script Loader (v1)
The Once And Future Script Loader (v1)
Kyle Simpson
 
Server-side JavaScript for the rest of us
Server-side JavaScript for the rest of usServer-side JavaScript for the rest of us
Server-side JavaScript for the rest of us
Kyle Simpson
 
Rise of the Middle End
Rise of the Middle EndRise of the Middle End
Rise of the Middle End
Kyle Simpson
 
Dude, That's Some Strange UI Architecture
Dude, That's Some Strange UI ArchitectureDude, That's Some Strange UI Architecture
Dude, That's Some Strange UI Architecture
Kyle Simpson
 
UI Architecture & Web Performance
UI Architecture & Web PerformanceUI Architecture & Web Performance
UI Architecture & Web Performance
Kyle Simpson
 
Dude, where's my UI architecture?
Dude, where's my UI architecture?Dude, where's my UI architecture?
Dude, where's my UI architecture?
Kyle Simpson
 
JavaScript Architecture: The Front and the Back of It
JavaScript Architecture: The Front and the Back of ItJavaScript Architecture: The Front and the Back of It
JavaScript Architecture: The Front and the Back of It
Kyle Simpson
 
JavaScript UI Architecture: Be all that you can be
JavaScript UI Architecture: Be all that you can beJavaScript UI Architecture: Be all that you can be
JavaScript UI Architecture: Be all that you can be
Kyle Simpson
 
Extending Ajax Events for all mankind
Extending Ajax Events for all mankindExtending Ajax Events for all mankind
Extending Ajax Events for all mankind
Kyle Simpson
 

More from Kyle Simpson (10)

HTML5 JavaScript On Crack
HTML5 JavaScript On CrackHTML5 JavaScript On Crack
HTML5 JavaScript On Crack
 
The Once And Future Script Loader (v1)
The Once And Future Script Loader (v1)The Once And Future Script Loader (v1)
The Once And Future Script Loader (v1)
 
Server-side JavaScript for the rest of us
Server-side JavaScript for the rest of usServer-side JavaScript for the rest of us
Server-side JavaScript for the rest of us
 
Rise of the Middle End
Rise of the Middle EndRise of the Middle End
Rise of the Middle End
 
Dude, That's Some Strange UI Architecture
Dude, That's Some Strange UI ArchitectureDude, That's Some Strange UI Architecture
Dude, That's Some Strange UI Architecture
 
UI Architecture & Web Performance
UI Architecture & Web PerformanceUI Architecture & Web Performance
UI Architecture & Web Performance
 
Dude, where's my UI architecture?
Dude, where's my UI architecture?Dude, where's my UI architecture?
Dude, where's my UI architecture?
 
JavaScript Architecture: The Front and the Back of It
JavaScript Architecture: The Front and the Back of ItJavaScript Architecture: The Front and the Back of It
JavaScript Architecture: The Front and the Back of It
 
JavaScript UI Architecture: Be all that you can be
JavaScript UI Architecture: Be all that you can beJavaScript UI Architecture: Be all that you can be
JavaScript UI Architecture: Be all that you can be
 
Extending Ajax Events for all mankind
Extending Ajax Events for all mankindExtending Ajax Events for all mankind
Extending Ajax Events for all mankind
 

Recently uploaded

Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Tatiana Kojar
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
saastr
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
Finale of the Year: Apply for Next One!
Finale of the Year: Apply for Next One!Finale of the Year: Apply for Next One!
Finale of the Year: Apply for Next One!
GDSC PJATK
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
fredae14
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
HarisZaheer8
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
alexjohnson7307
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Alpen-Adria-Universität
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
Dinusha Kumarasiri
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
Jeffrey Haguewood
 
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdfNunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
flufftailshop
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
Shinana2
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 

Recently uploaded (20)

Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
Finale of the Year: Apply for Next One!
Finale of the Year: Apply for Next One!Finale of the Year: Apply for Next One!
Finale of the Year: Apply for Next One!
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
Letter and Document Automation for Bonterra Impact Management (fka Social Sol...
 
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdfNunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 

Loading JavaScript: Even a caveman can do it

  • 1. JSConf.eu 8 November 2009 Loading JavaScript Even a Caveman Can Do It Kyle Simpson [email_address] http://getify.com @getify #jsconf #loadjs
  • 2.  
  • 3. Your. Site. Probably. Sucks. At Loading JavaScript.
  • 7. How To Suck At Loading JavaScript 1. Load too many files 2. Load too few files 3. Load all files before DOM-ready 4. Use the <script> tag 5. Load all files serially
  • 8. Relax! I’m not gonna keep telling you how much you suck. And you don’t suck, JavaScript loading sucks .
  • 9. How To NOT Suck At Loading JavaScript 1. Use a build-process for local scripts 2. Use g-zip and minifiers 3. Profile, load when needed 4. Load parallel, execute serially 5. Load now, execute later
  • 13. Yo, which shirt should I wear?
  • 15. Mincir “ Mincer” (to slim down) (alpha! Seriously!)
  • 16. Identifier Frequency Detection “ Constants” G-zip Optimization
  • 17. 280 characters 272 characters
  • 18. 93 bytes gzip’d 84 bytes gzip’d
  • 19. 169 characters 163 characters
  • 22. “ The key is to figure out what needs to load before the DOM is ready, and what can wait.” -- Microsoft Caveman
  • 23. Load scripts faster Execute in correct order
  • 24. <script> tags behave differently cross-browser with respect to loading and execution, either in parallel or serial. Hint: They Suck
  • 25. FF3 with <script> & <img> tags FF3.5 with <script> & <img> tags
  • 26. It gets crazy when you look at ie6, ie7, ie8, opera, chrome, safari…& mobile Hint: This Sucks And it gets even crazier when you load other page elements like css near your <script> tags
  • 27. LABjs L oading A nd B locking J ava S cript
  • 28. Put simply, LABjs is intended to be a simple way to replace <script> tags with a mechanism that gives you more control over loading and execution behavior.
  • 29. LABjs is a script loader that lets you load *any script, into any page, at any time. It uses an expressive API that helps you replace your script tags easily. *exceptions explained in a moment.
  • 30. When NOT to use LABjs 1. If your script uses document.write 2. If your script ITSELF does unsafe DOM-ready detection – does not apply to scripts that use the results of such detection.
  • 31.
  • 32. FF3 with <script> & <img> tags FF3.5 with <script> & <img> tags LABjs in every browser
  • 33. 16.84 seconds vs. 6.24 seconds 2.7x speed increase in overall page load Enough said, right?
  • 34. The LABjs API is a chaining API (similar to jQuery), which you can use to express one or more groups of scripts to load, where (by default) all scripts will load in parallel, but groups will execute in serial. You can specify as many independent chains as necessary. So, you can both load scripts that have no dependencies on each other (and thus can run in parallel), and those scripts that do have execution order dependency, while still loading everything as quickly as possible.
  • 35.  
  • 36.  
  • 37.  
  • 38.  
  • 39. UsePreloading [ true /false] UseCachePreload [ true /false] UseLocalXHR [ true /false] AlwaysPreserveOrder [true/ false ] AppendTo [‘ head ’/’body’] AllowDuplicates [true/ false ] BasePath [string]
  • 40. BRIEFLY , how does LABjs do this?
  • 41. Only the part of the decision matrix that works on-demand at any point in the page lifetime, for same- and cross-domain scripts, loading in parallel, ensuring execution order dependencies, allowing coupling.
  • 43. Preload “not-code” , execute code (later)
  • 44.  
  • 45. Can be inside a .js file Can be inside a <script> tag
  • 46.  
  • 47.  
  • 48. True for desktop browsers Also true for mobile
  • 49. That wasn’t so hard was it?
  • 50. Kyle Simpson [email_address] http://getify.com @getify #jsconf #loadjs More Info http://labjs.com http://msdn.microsoft.com/en-us/devlabs/ee423534.aspx http://www.nczonline.net/blog/2009/09/22/introducing-combiner-a-javascriptcss-concatenation-tool/ http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html SpeakerRate (slides, code samples posted): http://speakerrate.com/talks/1754-loading-javascript-even-a-caveman-can-do-it