What I Learned
  • Introduction
  • Introduction
  • Javascript
    • 클로저 (closure)
    • 프로토타입 (Prototype)
    • 정규표현식 (RegExp)
    • 날짜 (Date)
    • jQuery 분석
    • 스코프 (this)
    • 성능 최적화 (Optimization)
  • Style
    • CSS
      • Prevent user select
      • Aspect Ratio
      • Sticky Footer
    • SASS
      • for loop
      • mixin example
      • Media Query
  • Web
    • 웹의 동작 과정
    • Cross Browser
    • Document Reflows
    • Open Graph
    • 이미지 압축 (Image optimization)
    • SPA, SSR 비교
  • Algorithm and Data Structure
    • 자료구조 (Data Structure)
      • 큐 (Queue)
      • 스택 (Stack)
      • 링크드 리스트 (Linked List)
    • 기초 이론
      • 복잡도 분석
    • 수학 (Math)
      • factorial (계승)
      • 피보나치 수 (Fibonacci)
    • 정렬 (Sorting)
      • 버블 정렬 (Bubble Sort)
      • 선택 정렬 (Selection Sort)
      • 삽입 정렬 (Insertion Sort)
      • 합병 정렬 (Merge Sort)
      • 퀵 정렬 (Quick Sort)
    • 탐색 (Search)
      • 순차 탐색 (linear search)
      • 이진 탐색 (Banary search)
    • 문제 풀이
      • 땅따먹기
      • 가장 큰 원소의 합 구하기
      • JS with HTML
  • Software Engineering
    • OOP
    • Development Process
    • TDD / BDD
  • Interview
    • HTML
    • CSS
    • Javascript
    • Other
    • General Questions
  • DevOps
    • gulp
  • PHP
    • Basic
Powered by GitBook
On this page
  • Document Reflows
  • Reflows trigger
  • Prevent Layout thrashing
  1. Web

Document Reflows

Document Reflows는 성능 최적화(Performance Optimization)에 영향을 미치는 요소 중 하나이다.

Document Reflows

문서 내 요소의 위치, 도형을 다시 계산하기 위한 웹브라우저 프로세스의 이름

Reflows trigger

  • 브라우저 창 크기 변경

  • 스타일을 계산하는 자바스크립트 메서드 사용

  • DOM 요소 추가, 삭제

  • 클래스 변경

Prevent Layout thrashing

Read - Write 구조가 반복적으로 사용된다면, 최초에 그려진 레이아웃은 무효화되고 다시 리플로우 하게 된다.

// Read
var h1 = element1.clientHeight;
// Write (invalidates layout)
element1.style.height = (h1 * 2) + 'px';
// Read (triggers layout)
var h2 = element2.clientHeight;
// Write (invalidates layout)
element2.style.height = (h2 * 2) + 'px';

아래와 같이 분리해서 작성하면 된다.

// Read
var h1 = element1.clientHeight;
var h2 = element2.clientHeight;
// Write
element1.style.height = (h1 * 2) + 'px';
element2.style.height = (h2 * 2) + 'px';
// document reflows at end of frame
  • width, height와 같은 레이아웃 속성의 변경은 특정 요소의 위치와 크기 파악에 오랜 시간이 걸린다.

  • CSS flexbox를 사용하면 성능에 도움이 된다.

PreviousCross BrowserNextOpen Graph

Last updated 6 years ago