Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 번들러
- 마이크로태스크
- Lexical environment
- AbortController
- 클론코딩
- Call stack
- webpack
- 자바스크립트
- 함수형
- 이터러블
- debounce
- 호이스팅
- 호출 스택
- 로드마크
- 실행 컨택스트
- fetch 취소
- pushstate
- hoisting
- localtunnel
- relatedTarget
- 넘블
- 화살표 함수
- 렉시컬 환경
- 매클로태스크
- 웹팩
- JavaScript
- 이벤트 루프
- 로컬터널
- 유사배열
- 비동기 작업
Archives
- Today
- Total
목록2022/04 (1)
내가 보려고 만든 개발 공부 일지
브라우저 렌더링 - 리플로우(reflow) 와 리페인트(repaint)
어느 기술 인터뷰에서 리플로우와 리페인트에 대해 설명해 달라는 질문을 받은적이 있었다. 아는대로 설명을 하긴 했지만 언제 어떻게 발생되고 성능적으로 어떻게 개선할 수 있을지에 대해서는 자세하게 대답하지 못했었다. 그래서 이번 포스팅에서는 리플로우와 리페인트가 무엇이고 개발할때 어떤 부분을 신경써야 하는지 정리해보려 한다. 브라우저 렌더링 과정 브라우저의 역할은 사용자가 보고자 하는 웹페이지를 서버에 요청하고 서버에서 보내준 응답을 받아 브라우저 화면에 그려주는 것이다. 보통 서버는 응답으로 html 파일을 보내준다. 브라우저의 렌더링 엔진은 이 html 파일을 해석하여 DOM 트리와 CSSOM 트리를 만들고, 이 둘을 결합하여 렌더 트리를 만든다. 이렇게 만들어진 렌더 트리를 기반으로 UI가 그려지게 된..
그 외 잡다구리
2022. 4. 5. 15:00