Performance Deep Dive

Profiling

Show Paint Rectangles

FPS meter

Performance Audits

Google.com

SmashingMagazine.com99/100 PageSpeed score

Google I/O 2015

Concepts related to Rendering Performance

Let’s review a pull requesthttps://github.com/toamitkumar/jschannel2015/pull/10/files

Critical Rendering Path

Style CalculationsReference: 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 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,

Potential Scroll BottlenecksDemo: Repaint on Scroll

Debounce Input Handlers

Reduce Document Reflows

Simplify Paint Complexity

https://docs.google.com/document/d/1vEW86DaeVs4uQzNFI5R-_xS9TcS1Cs_EUsHRSgCHGu8/edit

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 AnimationsDemo: SnowFlake Animation

Web Animations APIDemo: SnowFlake Animation

GIFs and Performance

PromoteFast 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.