JS JulkaIII

CSS units

Recommendations of unit types per media type:

Media	Recommended	Occasional use	Infrequent use	Not recommended
Screen	em, rem, %	px	ch, ex, vw, vh, vmin, vmax	cm, mm, in, pt, pc
Print	em, rem, %	cm, mm, in, pt, pc	ch, ex	px, vw, vh, vmin, vmax

Relative units

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

Recently I came to know about Reflow and Repaint. How it's affecting web performance. I am writing this post to give insights about reflow and repaint. Before Jumping into the topic, let's understand how the browser renders the website.

When the user enters the URL, It will fetch the HTML source code from the server
Browser Parse the HTML source code and convert into the Tokens (<, TagName, Attribute, AttributeValue, >)
The Tokens will convert into the nodes and will construct the DOM Tree
The CSSOM Tree will generate from the CSS rules
The DOM and CSSOM tree will combine into the RenderTree

	//Prototype chain: apple -> Fruit.prototype -> Object.prototype -> null
	// Конструктор для створення об'єкту "Фрукт"
	function Fruit(name) {
	this.name = name;
	}
	// Додати метод до прототипу "Фрукта"
	Fruit.prototype.sayName = function() {
	console.log("Мене звуть " + this.name);
	};
	// Створити новий об'єкт "Яблуко" за допомогою конструктора "Фрукт"

	// Клас "Фрукт"
	class Fruit {
	constructor(name) {
	this.name = name;
	}

	// Метод для виведення назви фрукта
	sayName() {
	console.log(`Мене звуть ${this.name}`);
	}

	// index.js Імпортуємо необхідні залежності
	import { createStore, applyMiddleware } from 'redux';
	import { Provider } from 'react-redux';
	import thunk from 'redux-thunk';

	// rootReducers.js Створюємо кореневий reducer
	const rootReducer = combineReducers({
	// Додаткові reducers додатку
	});

	// componentDidMount (without componentDidUpdate)
	useEffect(() => {
	console.log("componentWillMount");
	}, []);

	// componentDidMount and componentDidUpdate
	useEffect(() => {
	console.log("componentWillUpdate- runs on every update");
	});
	useEffect(() => {

	// Функція композиції двох інших функцій
	function compose(f, g) {
	return function(x) {
	return f(g(x));
	}
	}

	function add1(x) { return x + 1; }
	function multiplyBy2(x) { return x * 2; }

	// Abstract factory
	class ThemeFactory {
	createBackgroundColor() {}
	createTextColor() {}
	createButton() {}
	}

	// Concrete factory for light theme
	class LightThemeFactory extends ThemeFactory {
	createBackgroundColor() {

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>WebSockets</title>

	<link rel="stylesheet" href="style.css" />
	</head>
	<body>
	<div id="page-wrapper">