SlideShare a Scribd company logo
jQuery and Web Performance
Dave Methvin
President, jQuery Foundation
Lead Developer, jQuery Core
jQuery Foundation
● Maintains jQuery code and docs
● Supports web developers and standards
● Participates in standards process
○

W3C web standards

○

ECMA 262 (JavaScript)

● Hosts conferences (like this one!)
jQuery Core 1.11 and 2.1

•
•
•

Shipped last month
We didn't break a lot of things!
"jQuery Served Your Way" ™
o

Support for IE 6/7/8 (1.11) or not (2.1)

o

Custom builds for smaller size

o

Use with node, browserify, or inside apps
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
Content caching

HTML

CSS
Screen paints

Network requests

Browser
Layout calculation

Image decoding
Keyboard

Touch
Focus management

Mouse

JavaScript
Web Developer's Reality
Content caching

HTML

CSS
Screen paints

Network requests

Browser

JavaScript

Layout calculation

Image decoding
Keyboard

Touch
Focus management

Mouse

Optional
How Do I Make My Page Fast?

1)Find slow stuff
2)Make it not slow
How Do I Find the Slow Stuff?

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
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
This Should Be You, 97% of the
Time
Finding and Fixing the 3 Percent

•
•
•

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)
Page Load Performance
How the Browser Loads Pages
1) Browser fetches index.html
2) Pre-fetcher scans HTML for resources (images, CSS,
scripts) and requests them immediately

3) Browser loads / runs JavaScript when encountered
during parsing (since scripts can write out new HTML!)
4) When HTML is fully loaded and parsed, browser calls
DOMContentLoaded handlers (jQuery .ready())
5) Browser does initial rendering of the page (finally the
user sees something!)
Now It May Seem Obvious, But...

•

Resources not already in the HTML file can't
be prefetched, resulting in further delays
o

•

e.g. stuff injected by your JavaScript/jQuery

JS frameworks or initial content rendered
from some client-side templates can make
the prefetcher useless
Manual Prefetching
Lets you tell the browser get a running start on
template content or deeper pages in the site.
<link rel="dns-prefetch" href="media.mysite.com">
<link rel="prefetch" href="/img/kitten.jpg">
YSlow
Google PageSpeed
modern.IE
webpagetest.org
Here Are Your Blocking Resources
Here Are Your Blocking Resources

Advertising!
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)
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");
"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");
"Never Mind Browser, I Know This"

8 ms
Chrome's Yellow Triangle
IE11: Layout after offsetWidth/Height
Avoiding Forced Layout
●

● Look out for :visible or :hidden
● Minimize document-wide style/class
changes
○

Use data- attrs or jQuery `.data()` if non-stylistic

● Get JavaScript out of the path
○
○

CSS transitions
CSS animations
Using Dev Tools Profilers

When JavaScript really is the
problem (or seems to be), a
profiler can find the hot spots.
A Real Site: gimmickbook.com
What's Wrong?

•
•
•

Stutters during infinite scroll
Seems to get worse as the page grows
Using the jQuery Masonry plugin
What's Wrong?

Faster!
Forced Layout/Reflow
Chrome's Event tab shows JavaScript has forced layouts
Chrome Profile ("Tree")
IE 11 Profile ("Call Tree")
What Does This Code Look Like?
Moral of the Story

Infinite scroll should not be used with
full-page layout algorithms!
In this case, the plugin could be
changed to only lay out the new
items, since nothing above them
changed.
You Have the Tools, Use Them!
$("#talk")
.find(".useful")
.append(contactInfo)
.end();
Twitter: @davemethvin
GitHub: @dmethvin
IRC (Freenode): DaveMethvin #jquery-dev
Email: dave@jquery.com

More Related Content

What's hot

jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013
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
 
jQuery Conference Toronto
jQuery Conference TorontojQuery Conference Toronto
jQuery Conference Toronto
dmethvin
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design
Christopher Schmitt
 
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data LinkHarness jQuery Templates and Data Link
Harness jQuery Templates and Data Link
BorisMoore
 
Thinking in Components
Thinking in ComponentsThinking in Components
Thinking in Components
FITC
 
jQuery Conference Boston 2011 CouchApps
jQuery Conference Boston 2011 CouchAppsjQuery Conference Boston 2011 CouchApps
jQuery Conference Boston 2011 CouchApps
Bradley Holt
 
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and BackboneJavascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Deepu S Nath
 
On Selecting JavaScript Frameworks (Women Who Code 10/15)
On Selecting JavaScript Frameworks (Women Who Code 10/15)On Selecting JavaScript Frameworks (Women Who Code 10/15)
On Selecting JavaScript Frameworks (Women Who Code 10/15)
Zoe Landon
 
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
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
St. Petersburg College
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
Ashlimarie
 
Webpack
Webpack Webpack
Getting Started with Angular - Stormpath Webinar, January 2017
Getting Started with Angular - Stormpath Webinar, January 2017Getting Started with Angular - Stormpath Webinar, January 2017
Getting Started with Angular - Stormpath Webinar, January 2017
Matt Raible
 
JsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery TemplatesJsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery Templates
BorisMoore
 
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
 
jQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and FuturejQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and Future
Richard Worth
 
The Art of AngularJS in 2015
The Art of AngularJS in 2015The Art of AngularJS in 2015
The Art of AngularJS in 2015
Matt Raible
 
Testing Mobile JavaScript
Testing Mobile JavaScriptTesting Mobile JavaScript
Testing Mobile JavaScript
jeresig
 
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
 

What's hot (20)

jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013
 
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
 
jQuery Conference Toronto
jQuery Conference TorontojQuery Conference Toronto
jQuery Conference Toronto
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design
 
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data LinkHarness jQuery Templates and Data Link
Harness jQuery Templates and Data Link
 
Thinking in Components
Thinking in ComponentsThinking in Components
Thinking in Components
 
jQuery Conference Boston 2011 CouchApps
jQuery Conference Boston 2011 CouchAppsjQuery Conference Boston 2011 CouchApps
jQuery Conference Boston 2011 CouchApps
 
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and BackboneJavascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
 
On Selecting JavaScript Frameworks (Women Who Code 10/15)
On Selecting JavaScript Frameworks (Women Who Code 10/15)On Selecting JavaScript Frameworks (Women Who Code 10/15)
On Selecting JavaScript Frameworks (Women Who Code 10/15)
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Webpack
Webpack Webpack
Webpack
 
Getting Started with Angular - Stormpath Webinar, January 2017
Getting Started with Angular - Stormpath Webinar, January 2017Getting Started with Angular - Stormpath Webinar, January 2017
Getting Started with Angular - Stormpath Webinar, January 2017
 
JsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery TemplatesJsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery Templates
 
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
 
jQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and FuturejQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and Future
 
The Art of AngularJS in 2015
The Art of AngularJS in 2015The Art of AngularJS in 2015
The Art of AngularJS in 2015
 
Testing Mobile JavaScript
Testing Mobile JavaScriptTesting Mobile JavaScript
Testing Mobile JavaScript
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 

Similar to jQuery Conference San Diego 2014 - Web Performance

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
 
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentationsUX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
UX Alive Conference
 
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
 
Cvcc performance tuning
Cvcc performance tuningCvcc performance tuning
Cvcc performance tuning
John McCaffrey
 
Building performance into the new yahoo homepage presentation
Building performance into the new yahoo  homepage presentationBuilding performance into the new yahoo  homepage presentation
Building performance into the new yahoo homepage presentation
masudakram
 
Performance on the Yahoo! Homepage
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
Nicholas Zakas
 
State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conference
dmethvin
 
An Introduction to Pagespeed Optimisation
An Introduction to Pagespeed OptimisationAn Introduction to Pagespeed Optimisation
An Introduction to Pagespeed Optimisation
Pratyush Majumdar
 
Lesson learned from 3 years with hybrid apps
Lesson learned from 3 years with hybrid appsLesson learned from 3 years with hybrid apps
Lesson learned from 3 years with hybrid apps
Patrik Malmquist
 
5 Common Mistakes You are Making on your Website
 5 Common Mistakes You are Making on your Website 5 Common Mistakes You are Making on your Website
5 Common Mistakes You are Making on your Website
Acquia
 
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
 
Improving frontend performance
Improving frontend performanceImproving frontend performance
Improving frontend performance
Sagar Desarda
 
Building Web Interfaces
Building Web InterfacesBuilding Web Interfaces
Building Web Interfaces
Christian Heilmann
 
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
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Cantina
 
Web Performance - Learnings from Velocity Conference
Web Performance - Learnings from Velocity ConferenceWeb Performance - Learnings from Velocity Conference
Web Performance - Learnings from Velocity Conference
Hardik Shah
 
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 - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
Timothy Fisher
 
Mobile web performance dwx13
Mobile web performance dwx13Mobile web performance dwx13
Mobile web performance dwx13
Avenga Germany GmbH
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web Apps
Timothy Fisher
 

Similar to jQuery Conference San Diego 2014 - Web Performance (20)

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
 
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentationsUX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
 
Business of Front-end Web Development
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web Development
 
Cvcc performance tuning
Cvcc performance tuningCvcc performance tuning
Cvcc performance tuning
 
Building performance into the new yahoo homepage presentation
Building performance into the new yahoo  homepage presentationBuilding performance into the new yahoo  homepage presentation
Building performance into the new yahoo homepage presentation
 
Performance on the Yahoo! Homepage
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
 
State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conference
 
An Introduction to Pagespeed Optimisation
An Introduction to Pagespeed OptimisationAn Introduction to Pagespeed Optimisation
An Introduction to Pagespeed Optimisation
 
Lesson learned from 3 years with hybrid apps
Lesson learned from 3 years with hybrid appsLesson learned from 3 years with hybrid apps
Lesson learned from 3 years with hybrid apps
 
5 Common Mistakes You are Making on your Website
 5 Common Mistakes You are Making on your Website 5 Common Mistakes You are Making on your Website
5 Common Mistakes You are Making on your Website
 
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
 
Improving frontend performance
Improving frontend performanceImproving frontend performance
Improving frontend performance
 
Building Web Interfaces
Building Web InterfacesBuilding Web Interfaces
Building Web Interfaces
 
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
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
 
Web Performance - Learnings from Velocity Conference
Web Performance - Learnings from Velocity ConferenceWeb Performance - Learnings from Velocity Conference
Web Performance - Learnings from Velocity Conference
 
20 tips for website performance
20 tips for website performance20 tips for website performance
20 tips for website performance
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
 
Mobile web performance dwx13
Mobile web performance dwx13Mobile web performance dwx13
Mobile web performance dwx13
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web Apps
 

Recently uploaded

OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
David Brossard
 
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
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Jeffrey Haguewood
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Webinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data WarehouseWebinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data Warehouse
Federico Razzoli
 
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
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 

Recently uploaded (20)

OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
 
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)
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Webinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data WarehouseWebinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data Warehouse
 
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
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 

jQuery Conference San Diego 2014 - Web Performance

  • 1. jQuery and Web Performance Dave Methvin President, jQuery Foundation Lead Developer, jQuery Core
  • 2. jQuery Foundation ● Maintains jQuery code and docs ● Supports web developers and standards ● Participates in standards process ○ W3C web standards ○ ECMA 262 (JavaScript) ● Hosts conferences (like this one!)
  • 3. jQuery Core 1.11 and 2.1 • • • Shipped last month We didn't break a lot of things! "jQuery Served Your Way" ™ o Support for IE 6/7/8 (1.11) or not (2.1) o Custom builds for smaller size o Use with node, browserify, or inside apps
  • 5. jQuery Team - World Wide
  • 8. "JavaScript / jQuery / browsers are a bad developer environment!"
  • 10. How the Programmer Sees It JavaScript Browser
  • 11. Web Developer's Reality Content caching HTML CSS Screen paints Network requests Browser Layout calculation Image decoding Keyboard Touch Focus management Mouse JavaScript
  • 12. Web Developer's Reality Content caching HTML CSS Screen paints Network requests Browser JavaScript Layout calculation Image decoding Keyboard Touch Focus management Mouse Optional
  • 13. How Do I Make My Page Fast? 1)Find slow stuff 2)Make it not slow
  • 14. How Do I Find the Slow Stuff? What you can measure using tools today
  • 15. How Do I Find the Slow Stuff? What you can measure using tools today What you should measure
  • 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. This Should Be You, 97% of the Time
  • 21. Finding and Fixing the 3 Percent • • • 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)
  • 23. How the Browser Loads Pages 1) Browser fetches index.html 2) Pre-fetcher scans HTML for resources (images, CSS, scripts) and requests them immediately 3) Browser loads / runs JavaScript when encountered during parsing (since scripts can write out new HTML!) 4) When HTML is fully loaded and parsed, browser calls DOMContentLoaded handlers (jQuery .ready()) 5) Browser does initial rendering of the page (finally the user sees something!)
  • 24. Now It May Seem Obvious, But... • Resources not already in the HTML file can't be prefetched, resulting in further delays o • e.g. stuff injected by your JavaScript/jQuery JS frameworks or initial content rendered from some client-side templates can make the prefetcher useless
  • 25. Manual Prefetching Lets you tell the browser get a running start on template content or deeper pages in the site. <link rel="dns-prefetch" href="media.mysite.com"> <link rel="prefetch" href="/img/kitten.jpg">
  • 26. YSlow
  • 30. Here Are Your Blocking Resources
  • 31. Here Are Your Blocking Resources Advertising!
  • 32. 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
  • 33. It Happens in 16 Milliseconds? From High Performance Browser Networking by Ilya Grigorik (O'Reilly)
  • 34. Adventures in Dirty Layout :visible :hidden
  • 35. "The Dot That Ate Performance" console.time("init"); $("body").removeClass("activated"); $("p:visible").css("color", "blue"); console.timeEnd("init");
  • 36. "Hey Browser Can I Bug You?" 30 ms
  • 37. What If We Track Visibility? console.time("init"); $("body").removeClass("activated"); $("p.visible").css("color", "blue"); console.timeEnd("init");
  • 38. "Never Mind Browser, I Know This" 8 ms
  • 40. IE11: Layout after offsetWidth/Height
  • 41. Avoiding Forced Layout ● ● Look out for :visible or :hidden ● Minimize document-wide style/class changes ○ Use data- attrs or jQuery `.data()` if non-stylistic ● Get JavaScript out of the path ○ ○ CSS transitions CSS animations
  • 42. Using Dev Tools Profilers When JavaScript really is the problem (or seems to be), a profiler can find the hot spots.
  • 43. A Real Site: gimmickbook.com
  • 44. What's Wrong? • • • Stutters during infinite scroll Seems to get worse as the page grows Using the jQuery Masonry plugin
  • 46. Forced Layout/Reflow Chrome's Event tab shows JavaScript has forced layouts
  • 48. IE 11 Profile ("Call Tree")
  • 49. What Does This Code Look Like?
  • 50. Moral of the Story Infinite scroll should not be used with full-page layout algorithms! In this case, the plugin could be changed to only lay out the new items, since nothing above them changed.
  • 51. You Have the Tools, Use Them!