Max Rodionov maximnofate

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

DOM Performance

How the browser renders the document
- Receives the data (bytes) from the server.
- Parses and converts into tokens (<, TagName, Attribute, AttributeValue, >).
- Turns tokens into nodes.
- Turns nodes into the DOM tree.
Builds CSSOM tree from the css rules.

lodash/fp - set / flow

In this gist we are going to learn about basic goodies that we get from the library lodash/fp (fp stands for functional programming, great for ensuring immutability).We'll learn just by doing (step by step guided sample + codepens).

We'll cover lodash set and flow functions

Steps

We'll use codepen as our playground, navigate to this page:

	xcode-select --install
	/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
	brew update
	brew cask install iterm2
	# update iterm2 settings -> colors, keep directory open new shell, keyboard shortcuts
	brew install bash # latest version of bash
	# set brew bash as default shell
	brew install fortune
	brew install cowsay
	brew install git

	const waitFor = (ms) => new Promise(r => setTimeout(r, ms))
	const asyncForEach = async (array, callback) => {
	for (let index = 0; index < array.length; index++) {
	await callback(array[index], index, array)
	}
	}

	const start = async () => {
	await asyncForEach([1, 2, 3], async (num) => {
	await waitFor(50)

	function compose(...functions) {
	return (a) => {
	if (!functions.length) return a;
	let fns = functions.reverse();
	let result = fns[0](a);
	for (let i = 1; i < fns.length; i++) {
	result = functions[i](result);
	}
	return result;
	}

	import React, { Component } from "react";
	import PropTypes from "prop-types";

	export default class PageProgress extends Component {
	constructor(props) {
	super(props);

	this.state = { width: null };
	this.watchScrolling = this.watchScrolling.bind(this);
	}