lala sorie

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.

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://fonts.googleapis.com/css?family=Montserrat:300,600" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.9.0/tachyons.css" rel="stylesheet">
	<title>JS Bin</title>
	<style id="jsbin-css">

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	</head>
	<body>
	<div id="list">

	// This is from my comment here: http://wolfram.kriesing.de/blog/index.php/2008/javascript-remove-element-from-array/comment-page-2#comment-466561

	/*
	* How to delete items from an Array in JavaScript, an exhaustive guide
	*/

	// DON'T use the delete operator, it leaves a hole in the array:
	var arr = [4, 5, 6];
	delete arr[1]; // arr now: [4, undefined, 6]

	(async () => {
	try{
	await (() => {
	console.log( 'try await');
	throw error;
	console.log('after throw error');
	})();
	// throw error;
	// await (() =>{console.info('after throw error')})();
	return '사과';

	async function getApple() {
	await delay(1000);
	return '사과';
	}

	async function getBanana() {
	await delay(1000);
	return '바나나';
	}


	head안에 async를 넣으면 html parcing과 병렬로 실행된다.
	head안에 differ를 넣으면 html parcing을 끝내고 실행된다.

	usestrict 사용
	typescript를 사용할때는 필요없지만
	javascript는 많이 유연한 언어로 ecmascript5를 사용하겠다는 이야기
	예를 들어 선언되지도 않은 변수를 불러와도 문제가 없었지만 usestrict를 사용하면 에러가 발생한다.더욱 엄격해지는것.

	/**
	1. 프로미스를 반환할 수도 있다.
	2. then후에 반아오는 변수가 하나일 경우는 생략할 수 있다.
	**/

	const getHen = () =>
	new Promise((resolve, reject) => {
	setTimeout(() => resolve('닭'), 1000);
	});

	/**
	json 모르던 사실
	1. json안에서 함수사용가능하지만 stringify후 object로 바꾸면 함수는 사라진다.
	2. stringify사용시 특정 값만 나오게 할수 있다.
	3. stringify사용시 콜백함수를 사용할 수 있다.
	**/

	json = JSON.stringify(rabbit);
	json = JSON.stringify(rabbit, ['name','color','size']);
	json = JSON.stringify(rabbit, (key, value) => {