SlideShare a Scribd company logo
The State of jQuery
AspDotNetStorefront Conference
November, 2013
Dave Methvin
President, jQuery Foundation
Lead Developer, jQuery Core
The jQuery Foundation Is...

• A non-profit organization
• Funded by
o Conferences
o Donations

o Personal and Corporate Memberships
 http://jquery.org/join
jQuery Foundation Projects

• http://github.com/jquery
• jQuery Core, UI, Mobile
• Sizzle selector engine
• QUnit unit test framework
• jQuery Migrate plugin
• TestSwarm CI testing
• Documentation
jQuery Foundation Initiatives
●
●
●
●
●

Support jQuery development
Support web developers
Support web standards
Advocate for developer needs
Participate in standards process
○ W3C
○ ECMA 262 (JavaScript)
jQuery Team - World Wide

Not shown: Brazil, Australia
jQuery Contributors

http://contribute.jquery.org

Maybe You?
jQuery - builtwith.com
jQuery Core Bug Trend
jQuery UI - builtwith.com
jQuery UI Bug Trend
Visual Studio 2013 -- ASP.NET
jQuery in 2013
The jQuery Core Plan

• jQuery 1.x vs. 2.x

o jQuery 1.x still supports IE 6/7/8
o jQuery 2.x supports modern browsers
o Both are maintained by the team
o Deprecated features removed
 Still supported jQuery Migrate
o Same API
We're Ready to Ship!

• Released jQuery 1.9 in January
• Released jQuery 2.0 in April
What We Learned (the Hard
Way)
are using "latest"
versions in live sites!

NEVER HOTLINK:
http://code.jquery.com/jquery-latest.js
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js
jQuery 1.9: Users Loved It!
jQuery Migrate Plugin

• Identifies things your code is doing that
jQuery 1.9+ doesn't support anymore
• Actually makes older code work
• Lets you use newer jQuery with older
code that hasn't been upgraded yet
jQuery Migrate Console Output
jQuery Migrate Warnings

• Shown in the uncompressed version
• Problem and solutions documented
The Moral of the Story
In jQuery, every change is a breaking change for some poor developer.
jQuery 1.10

• Relatively minor changes from 1.9
• Brings 1.x into alignment with 2.x line
• Simplifies cross-version comparisons
o 1.10 --> 2.0
o 1.11 --> 2.1
o 1.12 --> 2.2
jQuery 2.0 is a good fit for

• Chrome or Firefox plugins
• node.js apps (jsdom)
• Windows 8 Store apps
• PhoneGap / Cordova
• Embedded UIWebKit or WebBrowser
• Intranet applications
AND
• Public web sites that support only
modern browsers (not IE 6/7/8)
Which version to use?

• The jQuery team supports both 1.x and
•

2.x; there isn't a problem of using an
"unsupported version"
Since 1.x/2.x APIs are the same, there is
no problem in using 1.x exclusively on a
public web site -- it's recommended
jQuery 1.11/2.1: Next Version

• Asynchronous Module Definition
• AMD takes care of internal dependencies
• You can choose the modules to load
• More flexible and granular than previous
custom grunt build process
1.11/2.1: Just-In-Time Detects
● Previously: jQuery runs feature detects
all at once, on page load
○ Impacts page load performance

● Now: Feature detect runs the first time
the feature is used
○ Defers the (layout) impact until needed
jQuery 1.11/2.1: Still Simple

• You don't have to use Bower
• You don't have to use npm
• You don't have to use AMD
• Just include from a <script> tag
• You'll still get the performance boost
1.11/2.1: When?

• Beta is out NOW
• Give it a try
• Tell us when you think it's ready
• Which means you have to try it

o http://code.jquery.com/jquery-git1.js
o http://code.jquery.com/jquery-git2.js
• Removed $.browser
• Removed .live()
Why $.browser Deserves To Go

• Based on the unreliable userAgent string
• Often assumes future browsers and
versions will be broken the same way
• Horribly misused and misunderstood
Browser Name is Only a BRAND
Opera's future products will be based
on WebKit, not their Presto engine.
Browser Directions in 2014
Disclaimer

•These are general stats collected from a
wide variety of different sites
•Always look at the actual stats for your

sites before making decisions about what
to include or exclude
Desktop vs. Mobile
Desktop vs. Mobile - US/Canada
2013 Trend - StatCounter.com

IE
~30%
2013 Trend - W3Counter.com
Chrome Versions - Clicky.com
IE Versions - Clicky.com
IE6 is Dead! (Except in China)
What it All Means

• Desktop is still king
• Chrome ahead, but not massively
• IE share actually grew in 2013
• IE 6/7/8 demise will accelerate
o XP support ends in April 2014
• IE 9+ is on the auto-update path

o But maybe the next business plateau?
You Need to Test Multiple IEs

• Emulation is not the real thing
• http://modern.ie

o Free VM images
o Free BrowserStack 3-month subscription
o Free compatibility scan
This is IE11 running in
IE7 emulation -- not
the same thing as IE7!
Web Devs Take Note
● jQuery ...
○ simplifies/shortens code
○ hides browser differences
○ doesn't try to hide the browser model

● You still need to Know JavaScript
● You still need to Know the Browser
○ Especially the layout engine
How the Programmer Sees It

JavaScript

Browser
How the Programmer Sees It

JavaScript

Browser
Web Developer's Reality
Content caching

HTML

CSS
Network requests

Screen paints

Browser
Layout calculation

Image decoding
Keyboard

Touch
Focus management

Mouse

JavaScript
Web Developer's Reality
Content caching

HTML

CSS
Network requests

Screen paints

Browser

JavaScript

Layout calculation

Image decoding
Keyboard

Touch
Focus management

Mouse

Optional
Programmers often worry about the performance of things that don't really matter.
Example: Loops and jsperf.com
Example: Loops and jsperf.com

Slowest looping style still only
takes 1.4 milliseconds to do
100 iterations of a loop!

Simple, straightforward for
loop turns out to be the fastest,
no trickery needed!
Know (and Use) Your Tools
● Understand the browser
● Know the components of performance
○ Asset loading
○ Page rendering
○ Script execution

● Learn how to find bottlenecks
● Measure them in your app/page!
Plenty of Free Tools and Info

• http://calendar.perfplanet.com
• Webpagetest.org
• YSlow
• Google PageSpeed Insights
• Fiddler
• Built-in browser dev tools
Learn to Love the Browser Model

Two heads (threads) are better than one.
Most Browser Work is 1 Thread

• Few things happen in other threads
• JavaScript runs on the UI thread
• Don't block the UI thread!
o Long-running scripts
o Synchronous XMLHTTPRequest
o Forced Layouts
Make the Most of Parallelism

• Start network requests early

o Use the browser's HTML asset scan
o AJAX before the HTML page is ready


(or generate on the server side)

• Image downloading
• Image decoding
• Web Workers
Some Performance Guidelines
● CSS at the top, scripts at the bottom
● Define <img> tags in initial HTML
○ allows speculative fetching

● Non-essential assets after page load
○ "above the fold" should have priority

● Minimize use of $(document).ready()
● Don't make the browser recalc layout
Questions?
Twitter: @davemethvin
GitHub: @dmethvin
IRC (Freenode): DaveMethvin #jquery-dev
Email: dave@jquery.com

More Related Content

What's hot

Popluar AngularJS Frameworks
Popluar AngularJS FrameworksPopluar AngularJS Frameworks
Popluar AngularJS Frameworks
JaneKimHyun
 
Webview: The fifth element
Webview: The fifth elementWebview: The fifth element
Webview: The fifth element
Fernando Cejas
 
A team 43 C
A team 43 CA team 43 C
A team 43 C
aldenustream
 
What's this jQuery? Where it came from, and how it will drive innovation
What's this jQuery? Where it came from, and how it will drive innovationWhat's this jQuery? Where it came from, and how it will drive innovation
What's this jQuery? Where it came from, and how it will drive innovation
Marakana Inc.
 
JavaScript in Universal Windows Platform apps
JavaScript in Universal Windows Platform appsJavaScript in Universal Windows Platform apps
JavaScript in Universal Windows Platform apps
Timmy Kokke
 
Mobile web performance dwx13
Mobile web performance dwx13Mobile web performance dwx13
Mobile web performance dwx13
Avenga Germany GmbH
 
Making HTML5 Work Everywhere
Making HTML5 Work EverywhereMaking HTML5 Work Everywhere
Making HTML5 Work Everywhere
Todd Anglin
 
Top java script frameworks ppt
Top java script frameworks pptTop java script frameworks ppt
Top java script frameworks ppt
Omkarsoft Bangalore
 
MEAN Stack Warm-up
MEAN Stack Warm-upMEAN Stack Warm-up
MEAN Stack Warm-up
Troy Miles
 
Angular mobile angular_u
Angular mobile angular_uAngular mobile angular_u
Angular mobile angular_u
Doris Chen
 
Engage 2015 - 10 Mistakes You and Every XPages Developer Make. Yes, I said YOU!
Engage 2015 - 10 Mistakes You and Every XPages Developer Make. Yes, I said YOU!Engage 2015 - 10 Mistakes You and Every XPages Developer Make. Yes, I said YOU!
Engage 2015 - 10 Mistakes You and Every XPages Developer Make. Yes, I said YOU!
Serdar Basegmez
 
Modern javascript
Modern javascriptModern javascript
Modern javascript
Kevin Ball
 
Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...
Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...
Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...
Geoff Varosky
 
Ui development frameworks html-bootstrap by awa
Ui development frameworks html-bootstrap by awaUi development frameworks html-bootstrap by awa
Ui development frameworks html-bootstrap by awa
Ace Web Academy -Career Development Center
 
Sencha and Spring (Spring 2GX 2013)
Sencha and Spring (Spring 2GX 2013) Sencha and Spring (Spring 2GX 2013)
Sencha and Spring (Spring 2GX 2013)
Sencha
 
Better Page Object Handling with Loadable Component Pattern
Better Page Object Handling with Loadable Component PatternBetter Page Object Handling with Loadable Component Pattern
Better Page Object Handling with Loadable Component Pattern
Sargis Sargsyan
 
Edge of the Web
Edge of the WebEdge of the Web
Edge of the Web
Todd Anglin
 
Performance testing of mobile apps
Performance testing of mobile appsPerformance testing of mobile apps
Performance testing of mobile apps
vodQA
 
Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012
Adam Mokan
 
Smooth Animations for Web & Hybrid
Smooth Animations for Web & HybridSmooth Animations for Web & Hybrid
Smooth Animations for Web & Hybrid
FITC
 

What's hot (20)

Popluar AngularJS Frameworks
Popluar AngularJS FrameworksPopluar AngularJS Frameworks
Popluar AngularJS Frameworks
 
Webview: The fifth element
Webview: The fifth elementWebview: The fifth element
Webview: The fifth element
 
A team 43 C
A team 43 CA team 43 C
A team 43 C
 
What's this jQuery? Where it came from, and how it will drive innovation
What's this jQuery? Where it came from, and how it will drive innovationWhat's this jQuery? Where it came from, and how it will drive innovation
What's this jQuery? Where it came from, and how it will drive innovation
 
JavaScript in Universal Windows Platform apps
JavaScript in Universal Windows Platform appsJavaScript in Universal Windows Platform apps
JavaScript in Universal Windows Platform apps
 
Mobile web performance dwx13
Mobile web performance dwx13Mobile web performance dwx13
Mobile web performance dwx13
 
Making HTML5 Work Everywhere
Making HTML5 Work EverywhereMaking HTML5 Work Everywhere
Making HTML5 Work Everywhere
 
Top java script frameworks ppt
Top java script frameworks pptTop java script frameworks ppt
Top java script frameworks ppt
 
MEAN Stack Warm-up
MEAN Stack Warm-upMEAN Stack Warm-up
MEAN Stack Warm-up
 
Angular mobile angular_u
Angular mobile angular_uAngular mobile angular_u
Angular mobile angular_u
 
Engage 2015 - 10 Mistakes You and Every XPages Developer Make. Yes, I said YOU!
Engage 2015 - 10 Mistakes You and Every XPages Developer Make. Yes, I said YOU!Engage 2015 - 10 Mistakes You and Every XPages Developer Make. Yes, I said YOU!
Engage 2015 - 10 Mistakes You and Every XPages Developer Make. Yes, I said YOU!
 
Modern javascript
Modern javascriptModern javascript
Modern javascript
 
Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...
Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...
Best Practices in SharePoint Development - Just Freakin Work! Overcoming Hurd...
 
Ui development frameworks html-bootstrap by awa
Ui development frameworks html-bootstrap by awaUi development frameworks html-bootstrap by awa
Ui development frameworks html-bootstrap by awa
 
Sencha and Spring (Spring 2GX 2013)
Sencha and Spring (Spring 2GX 2013) Sencha and Spring (Spring 2GX 2013)
Sencha and Spring (Spring 2GX 2013)
 
Better Page Object Handling with Loadable Component Pattern
Better Page Object Handling with Loadable Component PatternBetter Page Object Handling with Loadable Component Pattern
Better Page Object Handling with Loadable Component Pattern
 
Edge of the Web
Edge of the WebEdge of the Web
Edge of the Web
 
Performance testing of mobile apps
Performance testing of mobile appsPerformance testing of mobile apps
Performance testing of mobile apps
 
Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012
 
Smooth Animations for Web & Hybrid
Smooth Animations for Web & HybridSmooth Animations for Web & Hybrid
Smooth Animations for Web & Hybrid
 

Viewers also liked

jQuery Foot-Gun Features
jQuery Foot-Gun FeaturesjQuery Foot-Gun Features
jQuery Foot-Gun Features
dmethvin
 
jQuery Conference Toronto
jQuery Conference TorontojQuery Conference Toronto
jQuery Conference Toronto
dmethvin
 
jQuery Conference Chicago - September 2014
jQuery Conference Chicago - September 2014jQuery Conference Chicago - September 2014
jQuery Conference Chicago - September 2014
dmethvin
 
PrairieDevCon 2014 - Web Doesn't Mean Slow
PrairieDevCon 2014 -  Web Doesn't Mean SlowPrairieDevCon 2014 -  Web Doesn't Mean Slow
PrairieDevCon 2014 - Web Doesn't Mean Slow
dmethvin
 
Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece
Transforming Front-End Disaster Code™ Into A Maintainable MasterpieceTransforming Front-End Disaster Code™ Into A Maintainable Masterpiece
Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece
Dan Gribbin
 
HTTP 2.0 - Web Unleashed 2015
HTTP 2.0 - Web Unleashed 2015HTTP 2.0 - Web Unleashed 2015
HTTP 2.0 - Web Unleashed 2015
dmethvin
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
dmethvin
 

Viewers also liked (7)

jQuery Foot-Gun Features
jQuery Foot-Gun FeaturesjQuery Foot-Gun Features
jQuery Foot-Gun Features
 
jQuery Conference Toronto
jQuery Conference TorontojQuery Conference Toronto
jQuery Conference Toronto
 
jQuery Conference Chicago - September 2014
jQuery Conference Chicago - September 2014jQuery Conference Chicago - September 2014
jQuery Conference Chicago - September 2014
 
PrairieDevCon 2014 - Web Doesn't Mean Slow
PrairieDevCon 2014 -  Web Doesn't Mean SlowPrairieDevCon 2014 -  Web Doesn't Mean Slow
PrairieDevCon 2014 - Web Doesn't Mean Slow
 
Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece
Transforming Front-End Disaster Code™ Into A Maintainable MasterpieceTransforming Front-End Disaster Code™ Into A Maintainable Masterpiece
Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece
 
HTTP 2.0 - Web Unleashed 2015
HTTP 2.0 - Web Unleashed 2015HTTP 2.0 - Web Unleashed 2015
HTTP 2.0 - Web Unleashed 2015
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
 

Similar to State of jQuery - AspDotNetStorefront Conference

State of jQuery June 2013 - Portland
State of jQuery June 2013 - PortlandState of jQuery June 2013 - Portland
State of jQuery June 2013 - Portland
dmethvin
 
jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013
dmethvin
 
John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)
Jia Mi
 
jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013
dmethvin
 
jQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPagesjQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPages
Teamstudio
 
Mvvm knockout vs angular
Mvvm knockout vs angularMvvm knockout vs angular
Mvvm knockout vs angular
Basarat Syed
 
Untying the Knots of Web Dev with Internet Explorer
Untying the Knots of Web Dev with Internet Explorer Untying the Knots of Web Dev with Internet Explorer
Untying the Knots of Web Dev with Internet Explorer
Sarah Dutkiewicz
 
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateevWin j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Mihail Mateev
 
Enterprise Strength Mobile JavaScript
Enterprise Strength Mobile JavaScriptEnterprise Strength Mobile JavaScript
Enterprise Strength Mobile JavaScript
Troy Miles
 
GWT HJUG Presentation
GWT HJUG PresentationGWT HJUG Presentation
GWT HJUG Presentation
Derrick Bowen
 
Phonegap for Engineers
Phonegap for EngineersPhonegap for Engineers
Phonegap for Engineers
Brian LeRoux
 
"WebView, the fifth element" por @fernando_cejas
"WebView, the fifth element" por @fernando_cejas"WebView, the fifth element" por @fernando_cejas
"WebView, the fifth element" por @fernando_cejas
webcat
 
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Adam Dunford
 
Building Mobile Web Apps with jQM and Cordova on Azure
Building Mobile Web Apps with jQM and Cordova on AzureBuilding Mobile Web Apps with jQM and Cordova on Azure
Building Mobile Web Apps with jQM and Cordova on Azure
Brian Lyttle
 
Discover the power of browser developer tools
Discover the power of browser developer toolsDiscover the power of browser developer tools
Discover the power of browser developer tools
ylefebvre
 
Getting started with Vue.js - CodeMash 2020
Getting started with Vue.js - CodeMash 2020Getting started with Vue.js - CodeMash 2020
Getting started with Vue.js - CodeMash 2020
Burton Smith
 
DIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development todayDIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development today
Bojan Veljanovski
 
Training presentation.pptx
Training presentation.pptxTraining presentation.pptx
Training presentation.pptx
NishchaiyaBayla1
 
Staying connected: An Overview of Announcements from Microsoft’s Connect();
Staying connected: An Overview of Announcements from Microsoft’s Connect();Staying connected: An Overview of Announcements from Microsoft’s Connect();
Staying connected: An Overview of Announcements from Microsoft’s Connect();
dotNet Miami
 
Microsoft power point automation-opensourcetestingtools_matrix-1
Microsoft power point   automation-opensourcetestingtools_matrix-1Microsoft power point   automation-opensourcetestingtools_matrix-1
Microsoft power point automation-opensourcetestingtools_matrix-1
tactqa
 

Similar to State of jQuery - AspDotNetStorefront Conference (20)

State of jQuery June 2013 - Portland
State of jQuery June 2013 - PortlandState of jQuery June 2013 - Portland
State of jQuery June 2013 - Portland
 
jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013
 
John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)
 
jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013
 
jQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPagesjQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPages
 
Mvvm knockout vs angular
Mvvm knockout vs angularMvvm knockout vs angular
Mvvm knockout vs angular
 
Untying the Knots of Web Dev with Internet Explorer
Untying the Knots of Web Dev with Internet Explorer Untying the Knots of Web Dev with Internet Explorer
Untying the Knots of Web Dev with Internet Explorer
 
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateevWin j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
 
Enterprise Strength Mobile JavaScript
Enterprise Strength Mobile JavaScriptEnterprise Strength Mobile JavaScript
Enterprise Strength Mobile JavaScript
 
GWT HJUG Presentation
GWT HJUG PresentationGWT HJUG Presentation
GWT HJUG Presentation
 
Phonegap for Engineers
Phonegap for EngineersPhonegap for Engineers
Phonegap for Engineers
 
"WebView, the fifth element" por @fernando_cejas
"WebView, the fifth element" por @fernando_cejas"WebView, the fifth element" por @fernando_cejas
"WebView, the fifth element" por @fernando_cejas
 
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
 
Building Mobile Web Apps with jQM and Cordova on Azure
Building Mobile Web Apps with jQM and Cordova on AzureBuilding Mobile Web Apps with jQM and Cordova on Azure
Building Mobile Web Apps with jQM and Cordova on Azure
 
Discover the power of browser developer tools
Discover the power of browser developer toolsDiscover the power of browser developer tools
Discover the power of browser developer tools
 
Getting started with Vue.js - CodeMash 2020
Getting started with Vue.js - CodeMash 2020Getting started with Vue.js - CodeMash 2020
Getting started with Vue.js - CodeMash 2020
 
DIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development todayDIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development today
 
Training presentation.pptx
Training presentation.pptxTraining presentation.pptx
Training presentation.pptx
 
Staying connected: An Overview of Announcements from Microsoft’s Connect();
Staying connected: An Overview of Announcements from Microsoft’s Connect();Staying connected: An Overview of Announcements from Microsoft’s Connect();
Staying connected: An Overview of Announcements from Microsoft’s Connect();
 
Microsoft power point automation-opensourcetestingtools_matrix-1
Microsoft power point   automation-opensourcetestingtools_matrix-1Microsoft power point   automation-opensourcetestingtools_matrix-1
Microsoft power point automation-opensourcetestingtools_matrix-1
 

Recently uploaded

Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
ScyllaDB
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
Jason Yip
 
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
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
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
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
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
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Precisely
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 

Recently uploaded (20)

Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
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
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
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...
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 

State of jQuery - AspDotNetStorefront Conference

  • 1. The State of jQuery AspDotNetStorefront Conference November, 2013
  • 2.
  • 3. Dave Methvin President, jQuery Foundation Lead Developer, jQuery Core
  • 4. The jQuery Foundation Is... • A non-profit organization • Funded by o Conferences o Donations o Personal and Corporate Memberships  http://jquery.org/join
  • 5. jQuery Foundation Projects • http://github.com/jquery • jQuery Core, UI, Mobile • Sizzle selector engine • QUnit unit test framework • jQuery Migrate plugin • TestSwarm CI testing • Documentation
  • 6. jQuery Foundation Initiatives ● ● ● ● ● Support jQuery development Support web developers Support web standards Advocate for developer needs Participate in standards process ○ W3C ○ ECMA 262 (JavaScript)
  • 7. jQuery Team - World Wide Not shown: Brazil, Australia
  • 11. jQuery UI - builtwith.com
  • 12. jQuery UI Bug Trend
  • 13. Visual Studio 2013 -- ASP.NET
  • 15. The jQuery Core Plan • jQuery 1.x vs. 2.x o jQuery 1.x still supports IE 6/7/8 o jQuery 2.x supports modern browsers o Both are maintained by the team o Deprecated features removed  Still supported jQuery Migrate o Same API
  • 16. We're Ready to Ship! • Released jQuery 1.9 in January • Released jQuery 2.0 in April
  • 17. What We Learned (the Hard Way) are using "latest" versions in live sites! NEVER HOTLINK: http://code.jquery.com/jquery-latest.js http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js
  • 18. jQuery 1.9: Users Loved It!
  • 19. jQuery Migrate Plugin • Identifies things your code is doing that jQuery 1.9+ doesn't support anymore • Actually makes older code work • Lets you use newer jQuery with older code that hasn't been upgraded yet
  • 21. jQuery Migrate Warnings • Shown in the uncompressed version • Problem and solutions documented
  • 22. The Moral of the Story In jQuery, every change is a breaking change for some poor developer.
  • 23. jQuery 1.10 • Relatively minor changes from 1.9 • Brings 1.x into alignment with 2.x line • Simplifies cross-version comparisons o 1.10 --> 2.0 o 1.11 --> 2.1 o 1.12 --> 2.2
  • 24. jQuery 2.0 is a good fit for • Chrome or Firefox plugins • node.js apps (jsdom) • Windows 8 Store apps • PhoneGap / Cordova • Embedded UIWebKit or WebBrowser • Intranet applications AND • Public web sites that support only modern browsers (not IE 6/7/8)
  • 25. Which version to use? • The jQuery team supports both 1.x and • 2.x; there isn't a problem of using an "unsupported version" Since 1.x/2.x APIs are the same, there is no problem in using 1.x exclusively on a public web site -- it's recommended
  • 26. jQuery 1.11/2.1: Next Version • Asynchronous Module Definition • AMD takes care of internal dependencies • You can choose the modules to load • More flexible and granular than previous custom grunt build process
  • 27. 1.11/2.1: Just-In-Time Detects ● Previously: jQuery runs feature detects all at once, on page load ○ Impacts page load performance ● Now: Feature detect runs the first time the feature is used ○ Defers the (layout) impact until needed
  • 28. jQuery 1.11/2.1: Still Simple • You don't have to use Bower • You don't have to use npm • You don't have to use AMD • Just include from a <script> tag • You'll still get the performance boost
  • 29. 1.11/2.1: When? • Beta is out NOW • Give it a try • Tell us when you think it's ready • Which means you have to try it o http://code.jquery.com/jquery-git1.js o http://code.jquery.com/jquery-git2.js
  • 30. • Removed $.browser • Removed .live()
  • 31. Why $.browser Deserves To Go • Based on the unreliable userAgent string • Often assumes future browsers and versions will be broken the same way • Horribly misused and misunderstood
  • 32. Browser Name is Only a BRAND Opera's future products will be based on WebKit, not their Presto engine.
  • 34. Disclaimer •These are general stats collected from a wide variety of different sites •Always look at the actual stats for your sites before making decisions about what to include or exclude
  • 36. Desktop vs. Mobile - US/Canada
  • 37. 2013 Trend - StatCounter.com IE ~30%
  • 38. 2013 Trend - W3Counter.com
  • 39. Chrome Versions - Clicky.com
  • 40. IE Versions - Clicky.com
  • 41. IE6 is Dead! (Except in China)
  • 42. What it All Means • Desktop is still king • Chrome ahead, but not massively • IE share actually grew in 2013 • IE 6/7/8 demise will accelerate o XP support ends in April 2014 • IE 9+ is on the auto-update path o But maybe the next business plateau?
  • 43. You Need to Test Multiple IEs • Emulation is not the real thing • http://modern.ie o Free VM images o Free BrowserStack 3-month subscription o Free compatibility scan This is IE11 running in IE7 emulation -- not the same thing as IE7!
  • 44.
  • 45. Web Devs Take Note ● jQuery ... ○ simplifies/shortens code ○ hides browser differences ○ doesn't try to hide the browser model ● You still need to Know JavaScript ● You still need to Know the Browser ○ Especially the layout engine
  • 46. How the Programmer Sees It JavaScript Browser
  • 47. How the Programmer Sees It JavaScript Browser
  • 48. Web Developer's Reality Content caching HTML CSS Network requests Screen paints Browser Layout calculation Image decoding Keyboard Touch Focus management Mouse JavaScript
  • 49. Web Developer's Reality Content caching HTML CSS Network requests Screen paints Browser JavaScript Layout calculation Image decoding Keyboard Touch Focus management Mouse Optional
  • 50. Programmers often worry about the performance of things that don't really matter.
  • 51. Example: Loops and jsperf.com
  • 52. Example: Loops and jsperf.com Slowest looping style still only takes 1.4 milliseconds to do 100 iterations of a loop! Simple, straightforward for loop turns out to be the fastest, no trickery needed!
  • 53. Know (and Use) Your Tools ● Understand the browser ● Know the components of performance ○ Asset loading ○ Page rendering ○ Script execution ● Learn how to find bottlenecks ● Measure them in your app/page!
  • 54. Plenty of Free Tools and Info • http://calendar.perfplanet.com • Webpagetest.org • YSlow • Google PageSpeed Insights • Fiddler • Built-in browser dev tools
  • 55. Learn to Love the Browser Model Two heads (threads) are better than one.
  • 56. Most Browser Work is 1 Thread • Few things happen in other threads • JavaScript runs on the UI thread • Don't block the UI thread! o Long-running scripts o Synchronous XMLHTTPRequest o Forced Layouts
  • 57. Make the Most of Parallelism • Start network requests early o Use the browser's HTML asset scan o AJAX before the HTML page is ready  (or generate on the server side) • Image downloading • Image decoding • Web Workers
  • 58. Some Performance Guidelines ● CSS at the top, scripts at the bottom ● Define <img> tags in initial HTML ○ allows speculative fetching ● Non-essential assets after page load ○ "above the fold" should have priority ● Minimize use of $(document).ready() ● Don't make the browser recalc layout
  • 59. Questions? Twitter: @davemethvin GitHub: @dmethvin IRC (Freenode): DaveMethvin #jquery-dev Email: dave@jquery.com

Editor's Notes

  1. Saw the attendee list, imagine audience as a box of kittens
  2. I am Dave Methvin, President of the jQuery Foundation and also the lead developer of the jQuery Core library. The organizers of the conference wanted to choose a speaker who is known around the world for his expertise in computer technology and has experience in all aspects of data processing. They found an American who would be perfect and he is now here in Russia..
  3. Most of you are familiar with the jQuery JavaScript libraries, but perhaps not as many know about the jQuery Foundation. The Foundation is a non-profit organization founded in March 2012. It coordinates the work that is required to maintain the libraries, documentation, and events surrounding jQuery. Anyone can support the foundation by making a donation or becoming a member.
  4. Most of the jQuery Foundation&apos;s work is done on GitHub. That includes both the code and the documentation. Content from our documentation sites is also kept on GitHub, and the sites themselves are driven through WordPress using server and bandwidth resources donated by Media Temple.
  5. However, the jQuery Foundation does much more than just maintain code and documentation for the JavaScript libraries. We support and advocate for the needs of web developers worldwide. Organizations such as the W3C and ECMA create the standards that we all use, but they are primarily controlled by the large companies that make web browsers and platforms. The jQuery Foundation provides a voice for developers in this process.
  6. And the jQuery Foundation is truly a worldwide organization. We are proud to have team members contributing from all over the globe, including Russia. We have landed pull requests from contributors on every continent except for Antartica. We are very disappointed in Antartica.
  7. We are always looking for new people to help with the work that needs to be done. If you are interested, go to contribute.jquery.org.
  8. If you want some evidence of jQuery&apos;s popularity, go to builtwith.com. Right now the library is used by more than two-thirds of the top 10,000 web sites.
  9. I am proud of the way our team has made the library smaller, faster, and more reliable over the past few years. We have very few new bugs being reported.
  10. At the beginning of this year, the Core team released jQuery 1.9. A few months later, we released jQuery 2.0. Both versions clean up the API, removing things that are considered very bad development practices like browser sniffing. Both versions are being supported, and they have the same API. The only difference is that the 1.x versions support Internet Explorer 6, 7, and 8.
  11. The team understands that there is a lot of older jQuery code that may break when version 1.9 or 2.0 is used. That is why we created the jQuery Migrate plugin. In most cases you just need to add this plugin to your older project to get it to work. But the jQuery Migrate plugin also generates console messages that help you find and fix the problems in the code. We do not recommend it as a permanent compatibility crutch, but instead as a diagnostic tool for your web sites.
  12. We are currently working on a new version of jQuery that uses AMD internally. It provides much finer control over what can be included or excluded from a custom build. This is especially useful for web applications. Although both branches of jQuery support this feature, users of the 2.1 branch will probably find it to be the most useful.
  13. We also took a fresh look at performance for this upcoming version. Feature detection is the right way to apply browser-specific patches, but in previous versions we ran all of those tests when jQuery loaded. This could cause the page load to be slower than necessary, especially on mobile devices that are slow anyway. Now we only run the feature detects the first time the functionality is needed. If your code doesn&apos;t ever use a method such as .offset(), you will never need pay the price for its feature detection.
  14. With all these changes to the way jQuery is built, we still wanted to keep things simple for the average web developer. Yes, we will be supporting a lot of new things, but jQuery will still be available from the standard CDNs as a single file, included by a script tag. And, you will still get the performance benefits that we provide, since the new code will wait for the first use to do feature detection.
  15. We released the first beta of jQuery 1.11 and 2.1 last month. Please do go and try it, and let us know if you have any problems. Nothing saddens us more than having a long beta period where we give developers a chance to try the code, and getting several bug reports the first day of the final release.
  16. Perhaps you&apos;re wondering how long we&apos;ll need to support jQuery 1.x, and of course that depends on how long IE 6/7/8 hang around. So let&apos;s look at browser trends over the past year, to see where things might be headed.
  17. Programmers coming from native client development world, or from server environments, often see the browser as if it were a runtime library of methods they call to get something done. That is, their JavaScript code is still controlling the browser and it is clearly the most important thing in the system.
  18. But that is not the case at all!
  19. In reality, the browser is doing most of the work. All of those words in red are just a few of the things that the browser takes care of without your JavaScript being involved at all. If you ask it to, the browser will call your code at various times so you can do something. But the browser is running the show.
  20. To make it clear how important JavaScript is to the browser, remember that there are many perfectly good web pages that don&apos;t have any JavaScript in them at all. JavaScript is completely optional. When it comes to performance, all you can do is make things worse. :-)
  21. To put it another way, programmers often focus on the wrong things when it comes to performance. They can see that it makes a difference in some benchmark test they create, but they don&apos;t realize that in a bigger system the difference is unimportant.
  22. Here is a simple example using jsperf.com to compare several different ways of doing a loop. As you can see, there seem to be significant differences in the performance.
  23. However, even the slowest looping style is incredibly fast for most needs and loop sizes. And it turns out that the simplest method, a for-loop, is the fastest anyway. Worrying about loops like this is a waste of time until it&apos;s proven to be the bottleneck. Premature optimization is the root of all evil, but also a waste of your time.
  24. To avoid making things worse, you need to understand how the browser works. In particular, understand the steps a browser takes to load a page and all the assets such as images, CSS, scripts, frames, and the like. When a performance problem does arise, you must understand how to use the browser&apos;s tools to find it and fix it.
  25. Let&apos;s look at how the browser works. A good way to solve a problem quickly is to get more than one person working on it. We can use a similar strategy to improve the performance of a web page.
  26. Unfortunately, most browser work happens on just one thread, the UI thread. This is the thread responsible for calculating styles, redrawing the screen, and running JavaScript. So, the worst thing you can do for performance is to create more work for this thread to do, with nothing going on in parallel.
  27. Of the things that the browser can do in parallel on other threads, the most common is network requests. When images and scripts are in the HTML of the original page, the browser can &quot;see&quot; and request them very early in the load process. It turns out that modern browsers also use a separate thread to decode images once they are received -- for example, to convert a JPEG file into a bitmap that can be displayed by the graphics processor. Finally, the new Web Workers spec lets you run JavaScript in a separate thread, but it is restricted in what it can do.
  28. The page won&apos;t render until the external CSS has been loaded, so put those references in the head of the document near the very top. Scripts in the head will block rendering, so use them sparingly there. The browser will be able to &quot;see&quot; images and other assets in the HTML, so put them there for best performance. Put most scripts at the bottom of the HTML page.