SlideShare a Scribd company logo
● Maintains jQuery code and docs
● Supports web developers and standards
● Participates in standards process
○ W3C web standards
○ ECMA 262 (JavaScript)
jQuery Foundation
builtwith.com
jQuery Team - World Wide
http://contribute.jquery.org
PERFORMANCE
"JavaScript / jQuery /
browsers are a bad
developer environment!"
A poor
workman
blames his
tools
How the Programmer Sees It
JavaScript Browser
Web Developer's Reality
Browser JavaScript
Mouse
CSS
HTML
Content caching
Keyboard
Touch
Screen paints
Layout calculation
Image decoding
Focus management
Network requests
Web Developer's Reality
Browser JavaScript
Mouse
CSS
HTML
Content caching
Keyboard
Touch
Screen paints
Layout calculation
Image decoding
Focus management
Network requests
Optional
How Do I Make My Page Fast?
How Do I Make My Page Fast?
1) Find slow stuff
2) Make it not slow
What you can
measure using
tools today
How Do I Find the Slow Stuff?
What you can
measure using
tools today
What you
should
measure
How Do I Find the Slow Stuff?
JavaScript Loop Optimization
JavaScript Loop Optimization
Slowest looping style still only
takes 140 microseconds to do
10 iterations of a loop
“Programmers waste enormous amounts of
time thinking about, or worrying about, the
speed of noncritical parts of their
programs, and these attempts at efficiency
actually have a strong negative impact
when debugging and maintenance are
considered. We should forget about small
efficiencies, say about 97% of the time;
premature optimization is the root of all
evil. Yet we should not pass up our
opportunities in that critical 3%.”
--Donald Knuth
“Programmers waste enormous amounts of
time thinking about, or worrying about, the
speed of noncritical parts of their
programs, and these attempts at efficiency
actually have a strong negative impact
when debugging and maintenance are
considered. We should forget about small
efficiencies, say about 97% of the time;
premature optimization is the root of all
evil. Yet we should not pass up our
opportunities in that critical 3%.”
--Donald Knuth
Client-side issues often can be solved by
"peephole" optimizations and don't require
massive architecture changes
Many — most! — speedups can be done near
the end of the project (or even after
deployment, cough)
Finding and Fixing the 3 Percent
With all the other things going on in a web
page, it's unlikely the run time of your
JavaScript is in the 3% worst case.
However, your JavaScript may be doing
things that cause bad performance by
making the browser do more work.
It's Not the JavaScript, Probably
Use the tools available (online and inside
the browser) to determine where the
bottlenecks lie, and fix them.
Don't Guess, Measure
How the Browser
Loads Web Pages
Your Browser
<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<p>An awesome web page</p>
<img src="cat.jpg" alt="Kitty!" />
<script>
document.write('<img src="nope.gif" />');
</script>
Browser Fetches the HTML Page
<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<p>An awesome web page</p>
<img src="cat.jpg" alt="Kitty!" />
<script>
document.write('<img src="nope.jpg" />');
</script>
Scan for Fetchable Resources
<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<p>An awesome web page</p>
<img src="cat.jpg" alt="Kitty!" />
<script>
document.write('<img src="nope.gif" />');
</script>
Parse/Run JavaScript (In-Place)
● HTML is fully loaded, may be partially
shown to the user already
● Images may not be loaded yet
● DOMContentLoaded event
● jQuery lets you have functions to run
○ $(document).ready()
● These may modify the document
Document Ready
The User Sees Your Page!
Now It May Seem Obvious, But...
Resources outside the HTML file can't be
prefetched, resulting in further delays
e.g. stuff injected by JavaScript/jQuery
JS frameworks (Angular, Backbone) or
initial content from client-side templates
can make the prefetcher useless
From top to bottom of the page:
● Render-blocking CSS
● Fonts
● Scripts
Avoid CSS @import and font loading when
possible, they block rendering
Resource Order Is Important
Maximize the
Network Connection
● Avoid 3xx redirects
● Start requests early
● Minimize number of requests
● Minimize byte size of requests
● Maximize browser cache usage
● Spread requests across domains
● Load non-critical stuff later
Rules of the Road
Redirecting to another page penalizes load
time by a full network round-trip!
Unfortunately this can't always be avoided,
search engines like "canonical URLs".
Avoid 3xx redirects
Put references to resources (e.g., images)
in the HTML first delivered to the browser,
so the prefetcher can "see" them.
Start Requests Early
Manual Prefetching
Lets the browser get a running start on
template content or later pages.
<link rel="dns-prefetch" href="http://media.mysite.com">
<link rel="prefetch" href="/img/kitten.jpg">
<link rel="prefetch" href="/step2.html">
Combine similar resources (scripts, CSS,
images) and download as a single file (or at
least a small number of files).
Weigh tradeoff of combining vs. CDNs or
reusing subsets on multiple pages to take
advantage of browser caching.
Minimize Number of Requests
Use tools like CSSMin and Uglify.js to
squeeze out useless bytes in source files.
Compress images, avoid HTML cropping.
Enable gzip compression on the server.
Minimize Size of Requests
Make sure your server sets appropriate
headers on content so the client can cache
it. Don't expire content quickly unless it
changes quickly! (Hint: Your company logo
doesn't change quickly.)
Maximize Browser Cache Usage
To maximize bandwidth, request resources
from 2 or 3 domains at once; this is called
domain sharding.
A Content Distribution Network (CDN) can
provide high-speed delivery of commonly
used resources like jQuery.
Spread Requests Across Domains
Wait until after page load to fetch things
that aren't needed until well after the page
has been loaded:
● Content not initially visible
● Social media scripts and styles
● Advertising
● Page analytics
Load Non-Critical Stuff Later
Any code you include via a <script> tag has
complete control over the performance and
functionality of the page. It can do
anything it wants to the user.
Do You Trust Third-Party Code?
Internet Explorer
Compatibility Views
● Revives old crusty cold inside IE
● Restores old incompatible behavior
● Removes new fast JavaScript APIs
● Makes IE much slower and stranger
● Makes me (and users) cry
<meta http-equiv="X-UA-Compatible" content="IE=8">
How Compat View Works
● Don't use outdated jQuery or plugins
● Always specify a VALID doctype
● Don't use browser sniffing
○ Use Modernizr instead
How to Avoid Compat View
modern.IE
Tools for Finding
Page Loading Issues
YSlow
Google PageSpeed
webpagetest.org
Scan Results Summary
Scan with IE9, Virginia, DSL
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>Breaking News and Opinion on The Huffington Post</title>
IE Parser Restart (IE9 or earlier)
Blocking Resources (Horizontal)
Invalid doctype, restarts because
of an X-UA-Compatible tag
Ran out of connections, had to wait
for previous downloads
Some JS files loaded before CSS,
which will delay rendering
TOO MANY REQUESTS FOR
JAVASCRIPT FILES !!!!!1!ONE!
Same Site with IE11
Same Site with Chrome
Same Site with iPhone 5 (3G)
In this case, IE11 CPU usage was very high
starting at 2.5 seconds from initial request
and all during DOMContentLoaded
CPU and Bandwidth Usage
Content Type by Count/Bytes
Filmstrip/Movie Views
But Wait … There's More!
Lots of Settings You Can Tweak
● Simple scripting language
○ Lets you e.g. automate a login
● Share links to test runs
○ "Here's what our site looks like from Toronto
using IE8 on a DSL-speed link."
Even More!
Get to know
webpagetest.org
Are You Convinced Yet?
Maintaining a
Good Frame Rate
You Have 16 Milliseconds … Begin
60 frames/second ~ 16 milliseconds/frame
Long-running operations can make the page
appear "janky" rather than smooth.
Really long-running operations can make
the page appear unresponsive to the user.
It Happens in 16 Milliseconds?
From High Performance Browser Networking by Ilya Grigorik (O'Reilly)
Your JavaScript shares a thread with the
browser's layout calculation and screen
painting; they can't happen in parallel.
Only a few things like downloading, image
decoding, and garbage collection are done
on independent threads.
To Make Things Worse...
Don't ask the browser to do a bunch of work
to answer a question if you could easily
find/remember the answer yourself.
Forced Layouts
Adventures in Dirty Layout
:visible
:hidden
"The Dot That Ate Performance"
console.time("init");
$("body").removeClass("activated");
$("p:visible").css("color", "blue");
console.timeEnd("init");
● Select all <p> in the document
● Ask the browser if any are visible
○ Browser may need to recalculate layout
dimensions if the document has changed
What $("p:visible") Means
"Hey Browser Can I Bug You?"
30 ms
What If We Track Visibility?
console.time("init");
$("body").removeClass("activated");
$("p.visible").css("color", "blue");
console.timeEnd("init");
Note: Normally you'd use a more descriptive class name than "visible"!
"Hey Browser, I Know This"
8 ms
● Avoid document-wide style/class change
○ Use data- attrs or jQuery .data() to store
non-stylistic data unrelated to presentation
● Get JavaScript out of the path
○ CSS transitions
○ CSS animations
Avoiding Forced Layout
The Softer Side
of Performance
A page that loads quickly is great, but
letting the user accomplish their task is
your ultimate goal. Reduce the amount of
waiting, clicking, typing, and searching the
user must do to accomplish their task.
Optimize for User Tasks
Twitter: @davemethvin
GitHub: @dmethvin
IRC-Freenode: DaveMethvin #jquery-dev
Email: dave@jquery.com
$("#talk")
.find(".useful")
.append(contactInfo)
.end();

More Related Content

What's hot

Real World Web components
Real World Web componentsReal World Web components
Real World Web components
Jarrod Overson
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Nicholas Zakas
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
Marc Grabanski
 
New Perspectives on Performance
New Perspectives on PerformanceNew Perspectives on Performance
New Perspectives on Performance
mennovanslooten
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
Nicholas Zakas
 
The Onion
The OnionThe Onion
The Onion
Jörn Zaefferer
 
Learning jQuery @ MIT
Learning jQuery @ MITLearning jQuery @ MIT
Learning jQuery @ MIT
jeresig
 
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Nicholas Zakas
 
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data LinkHarness jQuery Templates and Data Link
Harness jQuery Templates and Data Link
BorisMoore
 
jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013
dmethvin
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
Nicholas Zakas
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
Ashlimarie
 
State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conference
dmethvin
 
Don't Over-React - just use Vue!
Don't Over-React - just use Vue!Don't Over-React - just use Vue!
Don't Over-React - just use Vue!
Raymond Camden
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 
jQuery UI & Mobile - The Great Merger
jQuery UI & Mobile - The Great MergerjQuery UI & Mobile - The Great Merger
jQuery UI & Mobile - The Great Merger
scottgonzalez
 
Christmas Trees Made with HTML CSS and JS
Christmas Trees Made with HTML CSS and JSChristmas Trees Made with HTML CSS and JS
Christmas Trees Made with HTML CSS and JS
Niamh Foley
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
Zoe Gillenwater
 
Get Hip with JHipster - Denver JUG 2015
Get Hip with JHipster - Denver JUG 2015Get Hip with JHipster - Denver JUG 2015
Get Hip with JHipster - Denver JUG 2015
Matt Raible
 
Don't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web Applications
Stoyan Stefanov
 

What's hot (20)

Real World Web components
Real World Web componentsReal World Web components
Real World Web components
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
 
New Perspectives on Performance
New Perspectives on PerformanceNew Perspectives on Performance
New Perspectives on Performance
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
 
The Onion
The OnionThe Onion
The Onion
 
Learning jQuery @ MIT
Learning jQuery @ MITLearning jQuery @ MIT
Learning jQuery @ MIT
 
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
 
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data LinkHarness jQuery Templates and Data Link
Harness jQuery Templates and Data Link
 
jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conference
 
Don't Over-React - just use Vue!
Don't Over-React - just use Vue!Don't Over-React - just use Vue!
Don't Over-React - just use Vue!
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
jQuery UI & Mobile - The Great Merger
jQuery UI & Mobile - The Great MergerjQuery UI & Mobile - The Great Merger
jQuery UI & Mobile - The Great Merger
 
Christmas Trees Made with HTML CSS and JS
Christmas Trees Made with HTML CSS and JSChristmas Trees Made with HTML CSS and JS
Christmas Trees Made with HTML CSS and JS
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
 
Get Hip with JHipster - Denver JUG 2015
Get Hip with JHipster - Denver JUG 2015Get Hip with JHipster - Denver JUG 2015
Get Hip with JHipster - Denver JUG 2015
 
Don't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web Applications
 

Similar to PrairieDevCon 2014 - Web Doesn't Mean Slow

Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
brucelawson
 
Developing high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web workerDeveloping high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web worker
Suresh Patidar
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflow
WordPress
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
MrAbbas
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
MrAbas
 
Brighton SEO July 2021 How JavaScript is preventing you from passing Core W...
Brighton SEO July 2021   How JavaScript is preventing you from passing Core W...Brighton SEO July 2021   How JavaScript is preventing you from passing Core W...
Brighton SEO July 2021 How JavaScript is preventing you from passing Core W...
Izabela Wisniewska
 
20 tips for website performance
20 tips for website performance20 tips for website performance
20 tips for website performance
Andrew Siemer
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web Apps
Timothy Fisher
 
Validating Session Isolation for Web Crawling to Provide Data Integrity
Validating Session Isolation for Web Crawling to Provide Data IntegrityValidating Session Isolation for Web Crawling to Provide Data Integrity
Validating Session Isolation for Web Crawling to Provide Data Integrity
Giacomo Zecchini
 
Business of Front-end Web Development
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web Development
Rachel Andrew
 
What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?
Susan Winters
 
A Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page ApplicationsA Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page Applications
Chris Love
 
orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers
tutorialsruby
 
orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers
tutorialsruby
 
Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21
Chris Danford
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
Nilesh Bafna
 
wt mod3.pdf
wt mod3.pdfwt mod3.pdf
wt mod3.pdf
VinayKumarV24
 
JavaScript - Chapter 3 - Introduction
 JavaScript - Chapter 3 - Introduction JavaScript - Chapter 3 - Introduction
JavaScript - Chapter 3 - Introduction
WebStackAcademy
 
Improving frontend performance
Improving frontend performanceImproving frontend performance
Improving frontend performance
Sagar Desarda
 
Java script Session No 1
Java script Session No 1Java script Session No 1
Java script Session No 1
Saif Ullah Dar
 

Similar to PrairieDevCon 2014 - Web Doesn't Mean Slow (20)

Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
 
Developing high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web workerDeveloping high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web worker
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflow
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
 
Brighton SEO July 2021 How JavaScript is preventing you from passing Core W...
Brighton SEO July 2021   How JavaScript is preventing you from passing Core W...Brighton SEO July 2021   How JavaScript is preventing you from passing Core W...
Brighton SEO July 2021 How JavaScript is preventing you from passing Core W...
 
20 tips for website performance
20 tips for website performance20 tips for website performance
20 tips for website performance
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web Apps
 
Validating Session Isolation for Web Crawling to Provide Data Integrity
Validating Session Isolation for Web Crawling to Provide Data IntegrityValidating Session Isolation for Web Crawling to Provide Data Integrity
Validating Session Isolation for Web Crawling to Provide Data Integrity
 
Business of Front-end Web Development
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web Development
 
What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?
 
A Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page ApplicationsA Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page Applications
 
orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers
 
orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers
 
Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
 
wt mod3.pdf
wt mod3.pdfwt mod3.pdf
wt mod3.pdf
 
JavaScript - Chapter 3 - Introduction
 JavaScript - Chapter 3 - Introduction JavaScript - Chapter 3 - Introduction
JavaScript - Chapter 3 - Introduction
 
Improving frontend performance
Improving frontend performanceImproving frontend performance
Improving frontend performance
 
Java script Session No 1
Java script Session No 1Java script Session No 1
Java script Session No 1
 

Recently uploaded

Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdfBaha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid
 
Software Test Automation - A Comprehensive Guide on Automated Testing.pdf
Software Test Automation - A Comprehensive Guide on Automated Testing.pdfSoftware Test Automation - A Comprehensive Guide on Automated Testing.pdf
Software Test Automation - A Comprehensive Guide on Automated Testing.pdf
kalichargn70th171
 
ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.
Maitrey Patel
 
Photoshop Tutorial for Beginners (2024 Edition)
Photoshop Tutorial for Beginners (2024 Edition)Photoshop Tutorial for Beginners (2024 Edition)
Photoshop Tutorial for Beginners (2024 Edition)
alowpalsadig
 
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptxMigration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
ervikas4
 
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptxOperational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
sandeepmenon62
 
14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision
ShulagnaSarkar2
 
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Paul Brebner
 
Streamlining End-to-End Testing Automation
Streamlining End-to-End Testing AutomationStreamlining End-to-End Testing Automation
Streamlining End-to-End Testing Automation
Anand Bagmar
 
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdfThe Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
kalichargn70th171
 
ppt on the brain chip neuralink.pptx
ppt  on   the brain  chip neuralink.pptxppt  on   the brain  chip neuralink.pptx
ppt on the brain chip neuralink.pptx
Reetu63
 
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
Secure-by-Design Using Hardware and Software Protection for FDA ComplianceSecure-by-Design Using Hardware and Software Protection for FDA Compliance
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
ICS
 
How GenAI Can Improve Supplier Performance Management.pdf
How GenAI Can Improve Supplier Performance Management.pdfHow GenAI Can Improve Supplier Performance Management.pdf
How GenAI Can Improve Supplier Performance Management.pdf
Zycus
 
The Rising Future of CPaaS in the Middle East 2024
The Rising Future of CPaaS in the Middle East 2024The Rising Future of CPaaS in the Middle East 2024
The Rising Future of CPaaS in the Middle East 2024
Yara Milbes
 
Hyperledger Besu 빨리 따라하기 (Private Networks)
Hyperledger Besu 빨리 따라하기 (Private Networks)Hyperledger Besu 빨리 따라하기 (Private Networks)
Hyperledger Besu 빨리 따라하기 (Private Networks)
wonyong hwang
 
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
The Third Creative Media
 
Upturn India Technologies - Web development company in Nashik
Upturn India Technologies - Web development company in NashikUpturn India Technologies - Web development company in Nashik
Upturn India Technologies - Web development company in Nashik
Upturn India Technologies
 
Microsoft-Power-Platform-Adoption-Planning.pptx
Microsoft-Power-Platform-Adoption-Planning.pptxMicrosoft-Power-Platform-Adoption-Planning.pptx
Microsoft-Power-Platform-Adoption-Planning.pptx
jrodriguezq3110
 
Building API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructureBuilding API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructure
confluent
 

Recently uploaded (20)

Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdfBaha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
 
Software Test Automation - A Comprehensive Guide on Automated Testing.pdf
Software Test Automation - A Comprehensive Guide on Automated Testing.pdfSoftware Test Automation - A Comprehensive Guide on Automated Testing.pdf
Software Test Automation - A Comprehensive Guide on Automated Testing.pdf
 
ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.
 
Photoshop Tutorial for Beginners (2024 Edition)
Photoshop Tutorial for Beginners (2024 Edition)Photoshop Tutorial for Beginners (2024 Edition)
Photoshop Tutorial for Beginners (2024 Edition)
 
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptxMigration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
 
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptxOperational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
 
14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision
 
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
Why Apache Kafka Clusters Are Like Galaxies (And Other Cosmic Kafka Quandarie...
 
Streamlining End-to-End Testing Automation
Streamlining End-to-End Testing AutomationStreamlining End-to-End Testing Automation
Streamlining End-to-End Testing Automation
 
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdfThe Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
 
ppt on the brain chip neuralink.pptx
ppt  on   the brain  chip neuralink.pptxppt  on   the brain  chip neuralink.pptx
ppt on the brain chip neuralink.pptx
 
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
Secure-by-Design Using Hardware and Software Protection for FDA ComplianceSecure-by-Design Using Hardware and Software Protection for FDA Compliance
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
 
bgiolcb
bgiolcbbgiolcb
bgiolcb
 
How GenAI Can Improve Supplier Performance Management.pdf
How GenAI Can Improve Supplier Performance Management.pdfHow GenAI Can Improve Supplier Performance Management.pdf
How GenAI Can Improve Supplier Performance Management.pdf
 
The Rising Future of CPaaS in the Middle East 2024
The Rising Future of CPaaS in the Middle East 2024The Rising Future of CPaaS in the Middle East 2024
The Rising Future of CPaaS in the Middle East 2024
 
Hyperledger Besu 빨리 따라하기 (Private Networks)
Hyperledger Besu 빨리 따라하기 (Private Networks)Hyperledger Besu 빨리 따라하기 (Private Networks)
Hyperledger Besu 빨리 따라하기 (Private Networks)
 
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
Unlock the Secrets to Effortless Video Creation with Invideo: Your Ultimate G...
 
Upturn India Technologies - Web development company in Nashik
Upturn India Technologies - Web development company in NashikUpturn India Technologies - Web development company in Nashik
Upturn India Technologies - Web development company in Nashik
 
Microsoft-Power-Platform-Adoption-Planning.pptx
Microsoft-Power-Platform-Adoption-Planning.pptxMicrosoft-Power-Platform-Adoption-Planning.pptx
Microsoft-Power-Platform-Adoption-Planning.pptx
 
Building API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructureBuilding API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructure
 

PrairieDevCon 2014 - Web Doesn't Mean Slow

  • 1.
  • 2. ● Maintains jQuery code and docs ● Supports web developers and standards ● Participates in standards process ○ W3C web standards ○ ECMA 262 (JavaScript) jQuery Foundation
  • 4. jQuery Team - World Wide
  • 7. "JavaScript / jQuery / browsers are a bad developer environment!"
  • 9. How the Programmer Sees It JavaScript Browser
  • 10. Web Developer's Reality Browser JavaScript Mouse CSS HTML Content caching Keyboard Touch Screen paints Layout calculation Image decoding Focus management Network requests
  • 11. Web Developer's Reality Browser JavaScript Mouse CSS HTML Content caching Keyboard Touch Screen paints Layout calculation Image decoding Focus management Network requests Optional
  • 12. How Do I Make My Page Fast?
  • 13. How Do I Make My Page Fast? 1) Find slow stuff 2) Make it not slow
  • 14. What you can measure using tools today How Do I Find the Slow Stuff?
  • 15. What you can measure using tools today What you should measure How Do I Find the Slow Stuff?
  • 17. JavaScript Loop Optimization Slowest looping style still only takes 140 microseconds to do 10 iterations of a loop
  • 18. “Programmers waste enormous amounts of time thinking about, or worrying about, the speed of noncritical parts of their programs, and these attempts at efficiency actually have a strong negative impact when debugging and maintenance are considered. We should forget about small efficiencies, say about 97% of the time; premature optimization is the root of all evil. Yet we should not pass up our opportunities in that critical 3%.” --Donald Knuth
  • 19. “Programmers waste enormous amounts of time thinking about, or worrying about, the speed of noncritical parts of their programs, and these attempts at efficiency actually have a strong negative impact when debugging and maintenance are considered. We should forget about small efficiencies, say about 97% of the time; premature optimization is the root of all evil. Yet we should not pass up our opportunities in that critical 3%.” --Donald Knuth
  • 20.
  • 21. Client-side issues often can be solved by "peephole" optimizations and don't require massive architecture changes Many — most! — speedups can be done near the end of the project (or even after deployment, cough) Finding and Fixing the 3 Percent
  • 22. With all the other things going on in a web page, it's unlikely the run time of your JavaScript is in the 3% worst case. However, your JavaScript may be doing things that cause bad performance by making the browser do more work. It's Not the JavaScript, Probably
  • 23. Use the tools available (online and inside the browser) to determine where the bottlenecks lie, and fix them. Don't Guess, Measure
  • 26. <!doctype html> <html> <head> <script src="jquery.js"></script> <link rel="stylesheet" href="main.css" /> </head> <body> <p>An awesome web page</p> <img src="cat.jpg" alt="Kitty!" /> <script> document.write('<img src="nope.gif" />'); </script> Browser Fetches the HTML Page
  • 27. <!doctype html> <html> <head> <script src="jquery.js"></script> <link rel="stylesheet" href="main.css" /> </head> <body> <p>An awesome web page</p> <img src="cat.jpg" alt="Kitty!" /> <script> document.write('<img src="nope.jpg" />'); </script> Scan for Fetchable Resources
  • 28. <!doctype html> <html> <head> <script src="jquery.js"></script> <link rel="stylesheet" href="main.css" /> </head> <body> <p>An awesome web page</p> <img src="cat.jpg" alt="Kitty!" /> <script> document.write('<img src="nope.gif" />'); </script> Parse/Run JavaScript (In-Place)
  • 29. ● HTML is fully loaded, may be partially shown to the user already ● Images may not be loaded yet ● DOMContentLoaded event ● jQuery lets you have functions to run ○ $(document).ready() ● These may modify the document Document Ready
  • 30. The User Sees Your Page!
  • 31. Now It May Seem Obvious, But... Resources outside the HTML file can't be prefetched, resulting in further delays e.g. stuff injected by JavaScript/jQuery JS frameworks (Angular, Backbone) or initial content from client-side templates can make the prefetcher useless
  • 32. From top to bottom of the page: ● Render-blocking CSS ● Fonts ● Scripts Avoid CSS @import and font loading when possible, they block rendering Resource Order Is Important
  • 34.
  • 35. ● Avoid 3xx redirects ● Start requests early ● Minimize number of requests ● Minimize byte size of requests ● Maximize browser cache usage ● Spread requests across domains ● Load non-critical stuff later Rules of the Road
  • 36. Redirecting to another page penalizes load time by a full network round-trip! Unfortunately this can't always be avoided, search engines like "canonical URLs". Avoid 3xx redirects
  • 37. Put references to resources (e.g., images) in the HTML first delivered to the browser, so the prefetcher can "see" them. Start Requests Early
  • 38. Manual Prefetching Lets the browser get a running start on template content or later pages. <link rel="dns-prefetch" href="http://media.mysite.com"> <link rel="prefetch" href="/img/kitten.jpg"> <link rel="prefetch" href="/step2.html">
  • 39. Combine similar resources (scripts, CSS, images) and download as a single file (or at least a small number of files). Weigh tradeoff of combining vs. CDNs or reusing subsets on multiple pages to take advantage of browser caching. Minimize Number of Requests
  • 40. Use tools like CSSMin and Uglify.js to squeeze out useless bytes in source files. Compress images, avoid HTML cropping. Enable gzip compression on the server. Minimize Size of Requests
  • 41. Make sure your server sets appropriate headers on content so the client can cache it. Don't expire content quickly unless it changes quickly! (Hint: Your company logo doesn't change quickly.) Maximize Browser Cache Usage
  • 42. To maximize bandwidth, request resources from 2 or 3 domains at once; this is called domain sharding. A Content Distribution Network (CDN) can provide high-speed delivery of commonly used resources like jQuery. Spread Requests Across Domains
  • 43. Wait until after page load to fetch things that aren't needed until well after the page has been loaded: ● Content not initially visible ● Social media scripts and styles ● Advertising ● Page analytics Load Non-Critical Stuff Later
  • 44. Any code you include via a <script> tag has complete control over the performance and functionality of the page. It can do anything it wants to the user. Do You Trust Third-Party Code?
  • 46.
  • 47. ● Revives old crusty cold inside IE ● Restores old incompatible behavior ● Removes new fast JavaScript APIs ● Makes IE much slower and stranger ● Makes me (and users) cry <meta http-equiv="X-UA-Compatible" content="IE=8"> How Compat View Works
  • 48. ● Don't use outdated jQuery or plugins ● Always specify a VALID doctype ● Don't use browser sniffing ○ Use Modernizr instead How to Avoid Compat View
  • 50. Tools for Finding Page Loading Issues
  • 51. YSlow
  • 55. Scan with IE9, Virginia, DSL
  • 56. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> <title>Breaking News and Opinion on The Huffington Post</title> IE Parser Restart (IE9 or earlier)
  • 57. Blocking Resources (Horizontal) Invalid doctype, restarts because of an X-UA-Compatible tag Ran out of connections, had to wait for previous downloads Some JS files loaded before CSS, which will delay rendering TOO MANY REQUESTS FOR JAVASCRIPT FILES !!!!!1!ONE!
  • 59. Same Site with Chrome
  • 60. Same Site with iPhone 5 (3G)
  • 61. In this case, IE11 CPU usage was very high starting at 2.5 seconds from initial request and all during DOMContentLoaded CPU and Bandwidth Usage
  • 62.
  • 63.
  • 64.
  • 65. Content Type by Count/Bytes
  • 67. But Wait … There's More!
  • 68. Lots of Settings You Can Tweak
  • 69. ● Simple scripting language ○ Lets you e.g. automate a login ● Share links to test runs ○ "Here's what our site looks like from Toronto using IE8 on a DSL-speed link." Even More!
  • 70. Get to know webpagetest.org Are You Convinced Yet?
  • 72. You Have 16 Milliseconds … Begin 60 frames/second ~ 16 milliseconds/frame Long-running operations can make the page appear "janky" rather than smooth. Really long-running operations can make the page appear unresponsive to the user.
  • 73. It Happens in 16 Milliseconds? From High Performance Browser Networking by Ilya Grigorik (O'Reilly)
  • 74. Your JavaScript shares a thread with the browser's layout calculation and screen painting; they can't happen in parallel. Only a few things like downloading, image decoding, and garbage collection are done on independent threads. To Make Things Worse...
  • 75. Don't ask the browser to do a bunch of work to answer a question if you could easily find/remember the answer yourself. Forced Layouts
  • 76. Adventures in Dirty Layout :visible :hidden
  • 77. "The Dot That Ate Performance" console.time("init"); $("body").removeClass("activated"); $("p:visible").css("color", "blue"); console.timeEnd("init");
  • 78. ● Select all <p> in the document ● Ask the browser if any are visible ○ Browser may need to recalculate layout dimensions if the document has changed What $("p:visible") Means
  • 79. "Hey Browser Can I Bug You?" 30 ms
  • 80. What If We Track Visibility? console.time("init"); $("body").removeClass("activated"); $("p.visible").css("color", "blue"); console.timeEnd("init"); Note: Normally you'd use a more descriptive class name than "visible"!
  • 81. "Hey Browser, I Know This" 8 ms
  • 82. ● Avoid document-wide style/class change ○ Use data- attrs or jQuery .data() to store non-stylistic data unrelated to presentation ● Get JavaScript out of the path ○ CSS transitions ○ CSS animations Avoiding Forced Layout
  • 83. The Softer Side of Performance
  • 84. A page that loads quickly is great, but letting the user accomplish their task is your ultimate goal. Reduce the amount of waiting, clicking, typing, and searching the user must do to accomplish their task. Optimize for User Tasks
  • 85. Twitter: @davemethvin GitHub: @dmethvin IRC-Freenode: DaveMethvin #jquery-dev Email: dave@jquery.com $("#talk") .find(".useful") .append(contactInfo) .end();