SlideShare a Scribd company logo
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

How Browsers Work
How Browsers Work How Browsers Work
How Browsers Work
myposter GmbH
 
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
sivasoft12
 
[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 Examples
Rhonda 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 Applications
Paul Stovell
 
01 Introduction To CSS
01 Introduction To CSS01 Introduction To CSS
01 Introduction To CSS
crgwbr
 
php classes in pune
php classes in punephp classes in pune
php classes in pune
cncwebphp
 
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
Cory 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 SVG
stsire
 
Optimize performance and not die trying
Optimize performance and not die tryingOptimize performance and not die trying
Optimize performance and not die trying
Diego 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 Content
Rhonda Bracey
 
Share point 2010-uiimprovements
Share point 2010-uiimprovementsShare point 2010-uiimprovements
Share point 2010-uiimprovements
LiquidHub
 
Modelling Web Performance Optimization - FFSUx
Modelling  Web Performance Optimization - FFSUxModelling  Web Performance Optimization - FFSUx
Modelling Web Performance Optimization - FFSUx
Haribabu Nandyal Padmanaban
 
Fast and Furious: Discovering Windowing Function
Fast and Furious: Discovering Windowing FunctionFast and Furious: Discovering Windowing Function
Fast and Furious: Discovering Windowing Function
JOSE 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

GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
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
 
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
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
marufrahmanstratejm
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
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
 
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
 
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
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 

Recently uploaded (20)

GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
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
 
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
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
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
 
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)
 
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
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 

Deep dive into Front end Performance