SlideShare a Scribd company logo
1 of 50
Download to read offline
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

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.jsJack Franklin
 
Silverlight development using Eclipse4SL
Silverlight development using Eclipse4SLSilverlight development using Eclipse4SL
Silverlight development using Eclipse4SLSho Ito
 
Ruby vs Node ShiningRay Shanghai
Ruby vs Node ShiningRay ShanghaiRuby vs Node ShiningRay Shanghai
Ruby vs Node ShiningRay ShanghaiJackson Tian
 
WordPress workflow of the future
WordPress workflow of the futureWordPress workflow of the future
WordPress workflow of the futureEli McMakin
 
How *NOT* to firmware
How *NOT* to firmwareHow *NOT* to firmware
How *NOT* to firmwareAmit Serper
 
Dockerizing BDD : Ruby-Cucumber Example
Dockerizing BDD : Ruby-Cucumber ExampleDockerizing BDD : Ruby-Cucumber Example
Dockerizing BDD : Ruby-Cucumber ExampleShashikant Jagtap
 
The internet of $h1t
The internet of $h1tThe internet of $h1t
The internet of $h1tAmit 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 ClientColdFusionConference
 
Varying vagrant vagrants
Varying vagrant vagrantsVarying vagrant vagrants
Varying vagrant vagrantsDuong 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 TestingFabien POMEROL
 
JRuby deployments
JRuby deploymentsJRuby deployments
JRuby deploymentsberninme
 
Realtime MVC with Sails.js
Realtime MVC with Sails.jsRealtime MVC with Sails.js
Realtime MVC with Sails.jsSerdar Dogruyol
 

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 Presentationajevans
 
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 SparkIan 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 OpsWorksTomaž Zaman
 
DiUS Computing Lca Rails Final
DiUS  Computing Lca Rails FinalDiUS  Computing Lca Rails Final
DiUS Computing Lca Rails FinalRobert 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-FrameworksThomas Fuchs
 
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 YouRobert Cooper
 
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 enterpriseJerry 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 offlineClaire Reynaud
 
JVM Web Frameworks Exploration
JVM Web Frameworks ExplorationJVM Web Frameworks Exploration
JVM Web Frameworks ExplorationKevin 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 JoseSteve Reiner
 
SXSW: Even Faster Web Sites
SXSW: Even Faster Web SitesSXSW: Even Faster Web Sites
SXSW: Even Faster Web SitesSteve Souders
 
Google在Web前端方面的经验
Google在Web前端方面的经验Google在Web前端方面的经验
Google在Web前端方面的经验yiditushe
 
High Performance Ajax Applications 1197671494632682 2
High Performance Ajax Applications 1197671494632682 2High Performance Ajax Applications 1197671494632682 2
High Performance Ajax Applications 1197671494632682 2Niti 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
 
Sxsw 20090314
Sxsw 20090314Sxsw 20090314
Sxsw 20090314
 
SXSW: Even Faster Web Sites
SXSW: Even Faster Web SitesSXSW: Even Faster Web Sites
SXSW: Even Faster Web Sites
 
Google在Web前端方面的经验
Google在Web前端方面的经验Google在Web前端方面的经验
Google在Web前端方面的经验
 
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 CrackKyle 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 usKyle Simpson
 
Rise of the Middle End
Rise of the Middle EndRise of the Middle End
Rise of the Middle EndKyle 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 ArchitectureKyle Simpson
 
UI Architecture & Web Performance
UI Architecture & Web PerformanceUI Architecture & Web Performance
UI Architecture & Web PerformanceKyle 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 ItKyle 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 beKyle Simpson
 
Extending Ajax Events for all mankind
Extending Ajax Events for all mankindExtending Ajax Events for all mankind
Extending Ajax Events for all mankindKyle 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

Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 

Recently uploaded (20)

Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 

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