Rendering Performance

Device Refresh Rates

1 / 60 = 16ms

1 / 60 = 16ms

The Pixel Pipeline

csstriggers.com

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

<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

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

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

Use requestAnimationFrame for visual changes

Use requestAnimationFrame for visual changes

Use Web Workers

Use Web Workers

or not

Simplify CSS selectors

Simplify CSS selectors

Simplify CSS selectors

Simplify CSS selectors

BEM

Reduce number of elements to apply styles to

Avoid layout changes

Avoid layout changes

Avoid layout changes

Use flexbox

Use flexbox

Use flexbox

Lookout for layout thrashing

Avoid triggering layout

Avoid triggering layout

Avoid triggering layout

Avoid non-geometric changes

Background

Text color

Shadows

Promote elements that move or change

Promote elements that move or change

Simplify paint complexity

Timeout on the setTimeout

Timeout on the setTimeout

Web Workers - friends not food

Timeout on the setTimeout

Web Workers - friends not food

KCSS - keep css simple stupid

Timeout on the setTimeout

Web Workers - friends not food

KCSS - keep css simple stupid

Show some flex with flex box

Timeout on the setTimeout

Web Workers - friends not food

KCSS - keep css simple stupid

Show some flex with flex box

Transformation and opacity