SlideShare a Scribd company logo
1 of 65
Download to read offline
Performance Deep Dive
Profiling
Show Paint Rectangles
FPS meter
Performance Audits
Google.com
SmashingMagazine.com
99/100 PageSpeed score
Google I/O 2015
Concepts related to
Rendering Performance
Let’s review a pull request
https://github.com/toamitkumar/jschannel2015/pull/10/files
Critical Rendering Path
Style Calculations
Reference: CSSTriggers.com
Layout
width overflow height
padding font-family margin
display vertical-align border-width
border clear top
position bottom font-size
float left text-align
overflow-y right line-height
font-weight white-space min-height
Painting
color border-style
visibility background
text-decoration background-image
background-position background-repeat
outline-color outline
outline-style border-radius
background-size box-shadow
Composting
What are the different
Performance bottlenecks?
Memory Leaks
Avoid Forced Synchronous
Layouts
Layout Thrashing
Forced synchronous layout in quick succession
Demo: Animations example
How to avoid
Layout Thrashing
Reducing DOM calls
Consecutive DOM read/write operations trigger
layout thrashing
Library: FastDom
Eliminates layout thrashing by batching DOM
read/write operations,
Potential Scroll Bottlenecks
Demo: Repaint on Scroll
Debounce Input Handlers
Reduce Document Reflows
Simplify Paint Complexity
Reduce number of elements
styled
Reduce complexity of CSS
selectors
.box:nth-last-child(-n+1) .title {
/* Slow selector */
}
.final-box-title {
/* Performant implementation */
}
Reduce Paint Areas
Avoid Large
&
Complex Layout
GPU Acceleration
Canvas is
hardware accelerated
Avoid Paint Storms
How to perform Animation
at 60fps ?
JS Animations
CSS Animations
Demo: SnowFlake Animation
Web Animations API
Demo: SnowFlake Animation
GIFs and Performance
Promote
Fast performers
.moving-element {
will-change: transform;
transform: translateZ(0);
}
So, why not Promote
everyone?
* {
will-change: transform;
transform: translateZ(0);
}
Performance Audit
Materialup
Apoorv Saxena
@apoorv_saxena
Thank you.

More Related Content

Similar to Deep dive into Front end Performance

SIVASOFT - BEST ONLINE WEB DEVELOPMENT TRAINING COURSE
SIVASOFT - BEST ONLINE WEB DEVELOPMENT TRAINING COURSESIVASOFT - BEST ONLINE WEB DEVELOPMENT TRAINING COURSE
SIVASOFT - BEST ONLINE WEB DEVELOPMENT TRAINING COURSEsivasoft12
 
[Workshop] Single Sourcing with the Technical Communication Suite: Using Fram...
[Workshop] Single Sourcing with the Technical Communication Suite: Using Fram...[Workshop] Single Sourcing with the Technical Communication Suite: Using Fram...
[Workshop] Single Sourcing with the Technical Communication Suite: Using Fram...Scott Abel
 
Reviewing Screen Based Content: Demo Examples
Reviewing Screen Based Content: Demo ExamplesReviewing Screen Based Content: Demo Examples
Reviewing Screen Based Content: Demo ExamplesRhonda Bracey
 
Front end UI with React online training | Front end UI with React training | ...
Front end UI with React online training | Front end UI with React training | ...Front end UI with React online training | Front end UI with React training | ...
Front end UI with React online training | Front end UI with React training | ...Selfpaced
 
Front End Ui with React online training | Front End Ui with React training | ...
Front End Ui with React online training | Front End Ui with React training | ...Front End Ui with React online training | Front End Ui with React training | ...
Front End Ui with React online training | Front End Ui with React training | ...Selfpaced
 
Architecting WPF Applications
Architecting WPF ApplicationsArchitecting WPF Applications
Architecting WPF ApplicationsPaul Stovell
 
01 Introduction To CSS
01 Introduction To CSS01 Introduction To CSS
01 Introduction To CSScrgwbr
 
php classes in pune
php classes in punephp classes in pune
php classes in punecncwebphp
 
Leveraging the Ribbon API and Dialog Framework
Leveraging the Ribbon API and Dialog FrameworkLeveraging the Ribbon API and Dialog Framework
Leveraging the Ribbon API and Dialog FrameworkCory Peters
 
Managing Trade-offs among Architectural Tactics using Feature models and Feat...
Managing Trade-offs among Architectural Tactics using Feature models and Feat...Managing Trade-offs among Architectural Tactics using Feature models and Feat...
Managing Trade-offs among Architectural Tactics using Feature models and Feat...Jaime Chavarriaga
 
Rich User Interaction with SVG
Rich User Interaction with SVGRich User Interaction with SVG
Rich User Interaction with SVGstsire
 
Optimize performance and not die trying
Optimize performance and not die tryingOptimize performance and not die trying
Optimize performance and not die tryingDiego Cardozo
 
An LSP infrastructure to build EMF language servers for Web-deployable model ...
An LSP infrastructure to build EMF language servers for Web-deployable model ...An LSP infrastructure to build EMF language servers for Web-deployable model ...
An LSP infrastructure to build EMF language servers for Web-deployable model ...Roberto Rodriguez-Echeverria
 
Single Sourcing with the Technical Communication Suite: Using FrameMaker to M...
Single Sourcing with the Technical Communication Suite: Using FrameMaker to M...Single Sourcing with the Technical Communication Suite: Using FrameMaker to M...
Single Sourcing with the Technical Communication Suite: Using FrameMaker to M...Scott Abel
 
Reviewing Screen-Based Content
Reviewing Screen-Based ContentReviewing Screen-Based Content
Reviewing Screen-Based ContentRhonda Bracey
 
Share point 2010-uiimprovements
Share point 2010-uiimprovementsShare point 2010-uiimprovements
Share point 2010-uiimprovementsLiquidHub
 
Fast and Furious: Discovering Windowing Function
Fast and Furious: Discovering Windowing FunctionFast and Furious: Discovering Windowing Function
Fast and Furious: Discovering Windowing FunctionJOSE AHIAS LOPEZ PORTILLO
 
阅读类Web应用前端技术探索
阅读类Web应用前端技术探索阅读类Web应用前端技术探索
阅读类Web应用前端技术探索taobao.com
 

Similar to Deep dive into Front end Performance (20)

How Browsers Work
How Browsers Work How Browsers Work
How Browsers Work
 
SIVASOFT - BEST ONLINE WEB DEVELOPMENT TRAINING COURSE
SIVASOFT - BEST ONLINE WEB DEVELOPMENT TRAINING COURSESIVASOFT - BEST ONLINE WEB DEVELOPMENT TRAINING COURSE
SIVASOFT - BEST ONLINE WEB DEVELOPMENT TRAINING COURSE
 
[Workshop] Single Sourcing with the Technical Communication Suite: Using Fram...
[Workshop] Single Sourcing with the Technical Communication Suite: Using Fram...[Workshop] Single Sourcing with the Technical Communication Suite: Using Fram...
[Workshop] Single Sourcing with the Technical Communication Suite: Using Fram...
 
Reviewing Screen Based Content: Demo Examples
Reviewing Screen Based Content: Demo ExamplesReviewing Screen Based Content: Demo Examples
Reviewing Screen Based Content: Demo Examples
 
Front end UI with React online training | Front end UI with React training | ...
Front end UI with React online training | Front end UI with React training | ...Front end UI with React online training | Front end UI with React training | ...
Front end UI with React online training | Front end UI with React training | ...
 
Front End Ui with React online training | Front End Ui with React training | ...
Front End Ui with React online training | Front End Ui with React training | ...Front End Ui with React online training | Front End Ui with React training | ...
Front End Ui with React online training | Front End Ui with React training | ...
 
Architecting WPF Applications
Architecting WPF ApplicationsArchitecting WPF Applications
Architecting WPF Applications
 
01 Introduction To CSS
01 Introduction To CSS01 Introduction To CSS
01 Introduction To CSS
 
php classes in pune
php classes in punephp classes in pune
php classes in pune
 
Leveraging the Ribbon API and Dialog Framework
Leveraging the Ribbon API and Dialog FrameworkLeveraging the Ribbon API and Dialog Framework
Leveraging the Ribbon API and Dialog Framework
 
Managing Trade-offs among Architectural Tactics using Feature models and Feat...
Managing Trade-offs among Architectural Tactics using Feature models and Feat...Managing Trade-offs among Architectural Tactics using Feature models and Feat...
Managing Trade-offs among Architectural Tactics using Feature models and Feat...
 
Rich User Interaction with SVG
Rich User Interaction with SVGRich User Interaction with SVG
Rich User Interaction with SVG
 
Optimize performance and not die trying
Optimize performance and not die tryingOptimize performance and not die trying
Optimize performance and not die trying
 
An LSP infrastructure to build EMF language servers for Web-deployable model ...
An LSP infrastructure to build EMF language servers for Web-deployable model ...An LSP infrastructure to build EMF language servers for Web-deployable model ...
An LSP infrastructure to build EMF language servers for Web-deployable model ...
 
Single Sourcing with the Technical Communication Suite: Using FrameMaker to M...
Single Sourcing with the Technical Communication Suite: Using FrameMaker to M...Single Sourcing with the Technical Communication Suite: Using FrameMaker to M...
Single Sourcing with the Technical Communication Suite: Using FrameMaker to M...
 
Reviewing Screen-Based Content
Reviewing Screen-Based ContentReviewing Screen-Based Content
Reviewing Screen-Based Content
 
Share point 2010-uiimprovements
Share point 2010-uiimprovementsShare point 2010-uiimprovements
Share point 2010-uiimprovements
 
Modelling Web Performance Optimization - FFSUx
Modelling  Web Performance Optimization - FFSUxModelling  Web Performance Optimization - FFSUx
Modelling Web Performance Optimization - FFSUx
 
Fast and Furious: Discovering Windowing Function
Fast and Furious: Discovering Windowing FunctionFast and Furious: Discovering Windowing Function
Fast and Furious: Discovering Windowing Function
 
阅读类Web应用前端技术探索
阅读类Web应用前端技术探索阅读类Web应用前端技术探索
阅读类Web应用前端技术探索
 

Recently uploaded

DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
Manual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditManual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditSkynet Technologies
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...AliaaTarek5
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 

Recently uploaded (20)

DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
Manual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditManual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance Audit
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 

Deep dive into Front end Performance