레이아웃 계산과 픽셀 갱신은 언제 생기는가?

요소의 크기나 위치가 바뀌면 레이아웃 계산이 생긴다. 색상처럼 기하에 영향 없는 속성이 바뀌면 픽셀만 다시 그린다.

DOM 쓰기 뒤 곧바로 크기를 읽으면 브라우저가 미뤄 둔 계산을 즉시 끝내야 한다. 읽기와 쓰기를 섞어 반복하면 레이아웃 스래싱이 된다.

애니메이션은 가능하면 transform과 opacity를 쓴다. 별도 레이어에서 합성할 수 있어 레이아웃과 페인트를 피하지만 레이어 메모리는 늘 수 있다.