Avoid Layout Thrashing —
the easy way

Alexander Farkas - boffinHouse

• 
• 

What is Layout Thrashing?

Layout Thrashing means: Forcing the browser to calculate a layout that is never rendered to the screen.

# When does it happen? Layout Thrashing happens, when you request layout information of an element or the document, while layout is in an invalidated state.

# What invalidates your Style/Layout? ```js //any DOM or CSSOM change: // DOM change document.body.classList.add('foo'); document.body.style.marginBottom = '10px'; //CSSOM change document.styleSheets[0].insertRule('body {margin: 10px;}', 0); ```

```js var slider = document.querySelector('.slider'); slider.style.transform = 'translateX(0px)'; /* ... */ slider.style.transform = 'translateX(20px)'; slider.style.transform = 'translateX(21px)'; slider.style.transform = 'translateX(22px)'; //vs. var slider = document.querySelector('.slider'); slider.style.transform = 'translateX(22px)'; ```

```js var slider = document.querySelector('.slider'); console.time('change multi style'); slider.style.transform = 'translateX(0px)'; /* ... */ slider.style.transform = 'translateX(20px)'; slider.style.transform = 'translateX(21px)'; slider.style.transform = 'translateX(22px)'; slider.offsetHeight; console.timeEnd('change multi style'); //vs. var slider = document.querySelector('.slider'); console.time('change once'); slider.style.transform = 'translateX(22px)'; slider.offsetHeight; console.timeEnd('change once'); ```

```js // any DOM or CSSOM change invalidates layout document.body.classList.add('foo'); // reads layout == forces layout calculation on invalid layout const box = element.getBoundingClientRect(); ```

```js // any DOM or CSSOM change flags the layout as invalid document.body.classList.add('foo'); // reads layout == forces layout calculation const box = element.getBoundingClientRect(); // write/mutate document.body.appendChild(someBox); //read/measure const color = getComputedStyle(someOtherBox).color; ```

```js // reads layout const box = element.getBoundingClientRect(); const color = getComputedStyle(someOtherBox).color; // write document.body.classList.add('foo'); document.body.appendChild(someBox); ```

# Basic Example ```js function resizeAllParagraphsToMatchBoxWidth(paragraphs, box) { // Puts the browser into a read-write-read-write cycle. for (let i = 0; i < paragraphs.length; i++) { paragraphs[i].style.width = box.offsetWidth + 'px'; } } ```

# Separate your Reads from your Writes and the problem is solved ```js function resizeAllParagraphsToMatchBoxWidth(paragraphs, box) { const width = box.offsetWidth; for (let i = 0; i < paragraphs.length; i++) { paragraphs[i].style.width = width + 'px'; } } ```

# Not really solved! ```js resizeAllParagraphsToMatchBoxWidth( $('#foo-box .foo-paragraph'), $('#foo-box').get(0) ); resizeAllParagraphsToMatchBoxWidth( $('#bar-box .bar-paragraph'), $('#bar-box').get(0) ); ```

```js import fastdom from 'fastdom'; function resizeAllParagraphsToMatchBoxWidth(paragraphs, box) { fastdom.measure(() => { const width = box.offsetWidth; fastdom.mutate(() => { for (let i = 0; i < paragraphs.length; i++) { paragraphs[i].style.width = width + 'px'; } }); }); } ```

Normal Thrashing Situation

fastdom read and write applied

# Really??? ## Spot the error! ```js // advice: get cached values from the previous frame // Schedule our function to run at the start of the frame. requestAnimationFrame(logBoxHeight); function logBoxHeight() { // Gets the height of the box in pixels and logs it out. console.log(box.offsetHeight); } ```

# Really??? ## Spot the error! ```js //let lastScrollY, scheduledAnimationFrame; //const readAndUpdatePage = () => {scheduledAnimationFrame = false;/* ... */}; function onScroll (evt) { // Store the scroll value for laterz. lastScrollY = window.scrollY; // Prevent multiple rAF callbacks. if (scheduledAnimationFrame) return; scheduledAnimationFrame = true; requestAnimationFrame(readAndUpdatePage); } window.addEventListener('scroll', onScroll); ```

Normal Thrashing Situation

fastdom read and write applied

fastdom write only applied

# Separate your Reads from your Writes and the problem is solved ```js import fastdom from 'fastdom'; function resizeAllParagraphsToMatchBoxWidth(paragraphs, box) { const width = box.offsetWidth; fastdom.mutate(() => { for (let i = 0; i < paragraphs.length; i++) { paragraphs[i].style.width = width + 'px'; } }); } ```

```js function resizeAllParagraphsToMatchBoxWidth(paragraphs, box) { const width = box.offsetWidth; requestAnimationFrame(() => { for (var i = 0; i < paragraphs.length; i++) { paragraphs[i].style.width = width + 'px'; } }); } ```

# `requestAnimationFrame` <br> was made for Layout changes use it!

# Two simple rules to avoid layout thrashing * Put every DOM/CSSOM changing code into a `requestAnimationFrame`. * Never put style/layout reading code into a `requestAnimationFrame`.

# But <br> `requestAnimationFrame` <br> was made for animations! * Calling rAF inside of a rAF moves to the next frame. * Not executed in a hidden document (Actually a feature). * (Edge/Safari move almost always to the next frame. WTF Bug!!!)

```js import { mutationPhase } from 'rawblock/utils/rafqueue'; function resizeAllParagraphsToMatchBoxWidth(paragraphs, box) { const width = box.offsetWidth; mutationPhase(() => { for (let i = 0; i < paragraphs.length; i++) { paragraphs[i].style.width = width + 'px'; } }); } ```

# Ok, but using <br> `requestAnimationFrame` / `mutationPhase` <br> callbacks is no fun

# Bind your function to the mutationPhase

```js import rafs from 'rawblock/utils/rafs'; class Paragraphs { constructor(){ //works like Function.bind //this.setWidth = rafs(this.setWidth); //works like _.bindAll rafs(this, 'setWidth'/*, 'setHeight' */): } resizeAllParagraphsToMatchBoxWidth(paragraphs, box){ this.setWidth(paragraphs, box.offsetWidth); } setWidth(elements, width){ for (let i = 0; i < elements.length; i++) { elements[i].style.width = width + 'px'; } } } ```

```js import {rafDecorator} from 'rawblock/utils/rafs'; class Paragraphs { resizeAllParagraphsToMatchBoxWidth(paragraphs, box){ this.setWidth(paragraphs, box.offsetWidth); } @rafDecorator setWidth(elements, width){ for (let i = 0; i < elements.length; i++) { elements[i].style.width = width + 'px'; } } } ```

# Bind your function to the mutationPhase with some options ```js import rafs from 'rawblock/utils/rafs'; class Paragraphs { constructor(){ //this.setWidth = rafs(this.setWidth, {throttle: true, that: this}); rafs(this, {throttle: true, that: this}, 'setWidth'/*, 'setHeight' */): } } ```

```js import {rafDecorator} from '../utils/rafs'; class Paragraphs { @rafDecorator({throttle: true, that: this}) setWidth(elements, width){ for (let i = 0; i < elements.length; i++) { elements[i].style.width = width + 'px'; } } } ```

```js import {mutationPhase} from 'rawblock/utils/rafqueue'; import $ from 'jquery'; ['addClass', 'appendTo', 'css'/*, ... */].forEach(fn => { $.fn[`${fn}Raf`] = function(){ if(this.length){ mutationPhase(() => { $.fn[fn].apply(this, arguments); }); } return this; }; }); ```

```js class Paragraphs { resizeAllParagraphsToMatchBoxWidth(paragraphs, box){ $(paragraphs).cssRaf({width: box.offsetWidth}); } } ```

```js import { mutationPhase } from 'rawblock/utils/rafqueue'; class Paragraphs { async resizeAllParagraphsToMatchBoxWidth(paragraphs, box){ const width = box.offsetWidth; await mutationPhase(); for (let i = 0; i < paragraphs.length; i++) { paragraphs[i].style.width = width + 'px'; } } } ```

# Patterns / Helper / Problems

# Fixing jQuery ```js import addDimensions from 'rawblock/rb_$/$_dimensions'; import $ from 'jquery'; addDimensions($); ```

# Fixing jQuery * `jQuery.support.boxSizingReliable()`; // automatic fix * adds non layout thrashing *`Width` and *`Height` setter methods ```js // still old layout thrashing jQuery method $('.box').outerWidth( 400 ); // fixed non thrashing version $('.box').outerWidth( 'async', 400 ); ```

```js import { mutationPhase } from 'rawblock/utils/rafqueue'; export default function safeLateRead(fn){ return async function(){ await mutationPhase(); setTimeout(fn, 0); }; } ```

```js import throttle from '/utils/throttle'; import safeLateRead from '/utils/safe-late-read'; window.addEventListener('scroll', throttle(safeLateRead(() => { // read in hostile environment without layout thrashing }))); ```

```js import throttle from 'rawblock/utils/throttle'; const readOptimized = throttle(() => { // read in hostile environment without layout thrashing }, {read: true}); ```

# Problem ```js class Foo { constructor(){ this.setSize(); } getWidth(){ //this.$element.css({width: ''}); return this.$element.width() + 99;//some computation } setSize(){ this.$element.cssRaf({ width: this.getWidth(), }); } } ```

```js class Foo { constructor(){ this.setSize(); this.$clonedElement = this.$element .clone() //not part of the document so save .css({visibility: 'hidden'}) .insertAfterRaf(this.$element) ; } getWidth(){ return (this.$clonedElement || this.$element).width() + 99; // some computation } setSize(){ this.$element.cssRaf({ width: this.getWidth(), }); } } ```

# Problem ```js import rafs from 'rawblock/utils/rafs'; class Foo { constructor(){ rafs(this, {that: this, throttle: true}, 'onmove'); this.element.addEventListener('mousemove', this.onmove); } onmove({clientX}){ // clientX is a layout read! this.element.style.transform = `translateX(${clientX + this.xCorrect}px)`; } } ```

```js import rafs from 'rawblock/utils/rafs'; class Foo { constructor(){ this.element.addEventListener('mousemove', this.onmove); } onmove({clientX}){ // does not throttle anymore. But that's ok, otherwise see next patterns. this.$element.cssRaf({ transform: `translateX(${clientX + this.xCorrect}px)`, }); } } ```

```js import rafs from 'rawblock/utils/rafs'; class Foo { constructor(){ rafs(this, {that: this, throttle: true}, 'onmove'); this.transformX = 0; this.$element.draggy({ move:this.onmove, }); } // relX gives you the change in pixel relative to the previous event. onmove({relX}){ // the throttle option will remove some relX events in Edge/Safari this.transformX += relX; this.element.style.transform = `translateX(${ this.transformX }px)`; } } ```

```js import rafs from 'rawblock/utils/rafs'; class Foo { constructor(){ this.calcTransform = this.calcTransform.bind(this); rafs(this, {throttle: true}, 'setMove'); this.transformX = 0; this.$element.draggy({ move: this.calcTransform, }); } calcTransform({relX, originalEvent}){ //const {offsetX, layerX, clientX} = originalEvent; //compute with offsetX/layerX/clientX this.transformX += relX; } setMove(){ this.element.style.transform = `translateX(${ this.transformX }px)`; } } ```

# Throttle read tasks to the frame: ```js const realRAf = window.requestAnimationFrame; const emptyFn = () => {}; let isReadStarted = false; let readTasks = []; function executeReads(){ const reads = readTasks; readTasks = []; isReadStarted = false; while(reads.length){ reads.shift()(); } } export default function requestReadFrame(fn){ readTasks.push(fn); if(!isReadStarted){ isReadStarted = true; realRAf(executeReads); } } const writeRaf = function requestAnimationFrame(){ if(!isReadStarted){ requestReadFrame(emptyFn); } return realRAf.apply(this, arguments); }; window.requestAnimationFrame = writeRaf; ```

# Throttle read tasks to the frame: ```js // has to be imported (as first module in app so it overrides rAF for all third party scripts) import requestReadFrame from 'utils/request-read-frame'; window.requestAnimationFrame(() => { // executed always after requestReadFrame callbacks but in the same rAF }); requestReadFrame(() => { // executed before every requestAnimationFrame callbacks but in the same rAF // caution: a rAF started inside here is scheduled to the next frame not the same one... }); ```

# Problem: Multi-Line Ellipsis ```css .truncated-text { width: 100%; height: 5em; overflow: hidden; contain: strict; } ```

```js import {thrashingMeasurePhase, improperMutationPhase} from 'rawblock/utils/evil_read_write_queue'; class Foo(){ truncateUntil(){ await thrashingMeasurePhase(); const height = this.element.offsetHeight; const scrollHeight = this.element.scrollHeight; if(height + 1 >= scrollHeight){ return; } await improperMutationPhase(); const text = this.element.innerHTML; this.element.innerHTML = this.truncate(text, Math.min((height / scrollHeight) + 0.1, 0.95)); this.truncateUntil(); } truncate(text, truncateQuotient){ //return computation... } } ```

```js import {thrashingMeasurePhase, improperMutationPhase} from 'rawblock/utils/evil_read_write_queue'; class Foo(){ truncateUntil(){ await thrashingMeasurePhase(); const height = this.element.offsetHeight; const scrollHeight = this.element.scrollHeight; if(height + 1 >= scrollHeight){ return; } //fun fact: did you know that getting this.innerText is a layout read operation? const text = this.element.innerText; await improperMutationPhase(); this.element.innerText = this.truncate(text, Math.min((height / scrollHeight) + 0.1, 0.95)); this.truncateUntil(); } truncate(text, truncateQuotient){ //return computation... } } ```

# Questions and Thoughts? * Put every DOM/CSSOM changing code into a `requestAnimationFrame`. * Never put style/layout reading code into a `requestAnimationFrame`. * Use helpers/ best practice patterns to write maintainable async code. * Try to follow these rules but use your brain in the first place.

# Thank you!!!