deep dive into front end performance
TRANSCRIPT
Performance Deep Dive
Profiling
Show Paint Rectangles
FPS meter
Performance Audits
SmashingMagazine.com99/100 PageSpeed score
Concepts related to Rendering Performance
Let’s review a pull requesthttps://github.com/toamitkumar/jschannel2015/pull/10/files
Critical Rendering Path
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 ThrashingForced synchronous layout in quick succession
Demo: Animations example
How to avoid Layout Thrashing
Reducing DOM callsConsecutive DOM read/write operations trigger
layout thrashing
Library: FastDomEliminates layout thrashing by batching DOM
read/write operations,
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
GIFs and Performance
PromoteFast performers
.moving-element {
will-change: transform;
transform: translateZ(0);
}
So, why not Promote everyone?
* {
will-change: transform;
transform: translateZ(0);
}
Apoorv Saxena@apoorv_saxena
Thank you.