Rendering Performance
Device Refresh Rates
Device Refresh Rates
1 / 60 = 16ms
The Pixel Pipeline
The Pixel Pipeline
The Pixel Pipeline
The Pixel Pipeline
The Pixel Pipeline
The Pixel Pipeline
The Pixel Pipeline
The Pixel Pipeline
The Pixel Pipeline
csstriggers.com
Javascript Optimization
Javascript Optimization
Use requestAnimationFrame for visual changes
Javascript Optimization
Use requestAnimationFrame for visual changes
const adiv = document.getElementById('mydiv');
let leftpos = 0;
setInterval(() => {
leftpos += 5;
adiv.style.left = leftpos + 'px';
}, 50) Javascript Optimization
const adiv = document.getElementById('mydiv');
let leftpos = 0;
let prevMoveTime = 0;
function move(time) => {
leftpos += 5;
adiv.style.left = leftpos + 'px';
requestAnimationFrame(move);
}
requestAnimationFrame(move); Javascript Optimization
Use Web Workers
Javascript Optimization
Use Web Workers
or not
Javascript Optimization
const taskList = breakBigTaskIntoMicroTasks(largeList);
requestAnimationFrame(processTaskList);
function processTaskList(taskStartTime) {
let taskFinishTime;
do {
// Assume the next task is pushed onto a stack.
const nextTask = taskList.pop();
// Process nextTask.
processTask(nextTask);
// Go again if there’s enough time to do the next task.
taskFinishTime = window.performance.now();
} while (taskFinishTime - taskStartTime < 3);
if (taskList.length > 0) {
requestAnimationFrame(processTaskList);
}
}Javascript Optimization
Javascript Optimization
Style Optimization
Style Optimization
Style Optimization
Style Optimization
<div class="table">
<div class="row header">
<span class="blue">
Title
</span>
</div>
<div class="row body">
<span class="blue">
Body text
</span>
</div>
</div>.table {
font-size: 12px;
border: 1px solid black;
}
.row, .row.header {
color: red;
}
.header {
font-size: 15px;
}
.body {
text-decoration: underline;
}
.blue {
color: blue;
}Style Optimization
Simplify CSS selectors
Style Optimization
Simplify CSS selectors
.box:nth-last-child(-n+1) .title {
/* styles */
}Style Optimization
Simplify CSS selectors
.box:nth-last-child(-n+1) .title {
/* styles */
}.final-box-title {
/* styles */
}Style Optimization
Simplify CSS selectors
.box:nth-last-child(-n+1) .title {
/* styles */
}.final-box-title {
/* styles */
}BEM
Style Optimization
Reduce number of elements to apply styles to
Style Optimization
Layout Optimization
Layout Optimization
Layout Optimization
Avoid layout changes
Layout Optimization
Avoid layout changes
.box {
width: 20px;
height: 20px;
}
/**
* Changing width and height
* triggers layout.
*/
.box--expanded {
width: 200px;
height: 350px;
}Layout Optimization
Avoid layout changes
.box {
width: 20px;
height: 20px;
}
/**
* Changing width and height
* triggers layout.
*/
.box--expanded {
width: 200px;
height: 350px;
}Layout Optimization
Use flexbox
Layout Optimization
Use flexbox
Layout Optimization
Use flexbox
Layout Optimization
Lookout for layout thrashing
Paint Optimization
Paint Optimization
Avoid triggering layout
Paint Optimization
Avoid triggering layout
Paint Optimization
Avoid triggering layout
Paint Optimization
Avoid non-geometric changes
-
Background
-
Text color
-
Shadows
Paint Optimization
Promote elements that move or change
Paint Optimization
Promote elements that move or change
.moving-element {
will-change: transform;
}Paint Optimization
Simplify paint complexity
Compositor
Compositor
TL;DR
TL;DR
-
Timeout on the setTimeout
TL;DR
-
Timeout on the setTimeout
-
Web Workers - friends not food
TL;DR
-
Timeout on the setTimeout
-
Web Workers - friends not food
-
KCSS - keep css simple stupid
TL;DR
Timeout on the setTimeout
Web Workers - friends not food
KCSS - keep css simple stupid
Show some flex with flex box
TL;DR
-
Timeout on the setTimeout
-
Web Workers - friends not food
-
KCSS - keep css simple stupid
-
Show some flex with flex box
-
Transformation and opacity
Rendering Performance
By pat310
