반응형 전체 글49 [프론트엔드] 리플로우 / 리페인트 소개 오늘은 렌더링 성능 최적화를 위한 리플로우, 리페인트에 대해 알아보도록 하겠습니다. 목차 - 리플로우 - 리페인트 - 리플로우와 리페인트가 일어나는 상황 - 리플로우,리페인트 최적화 방법 1) 리플로우의 정의 : 레이아웃 변경 시 모든 노드를 다시 계산하여 레이아웃 트리(랜더 트리)를 재구성하는 작업입니다. 2) 리페인트의 정의 : Reflow 과정이 끝나고 재생성된 레이아웃 트리(랜더 트리)를 다시 레이어에 그리는 작업입니다. 3) 리플로우와 리페인트가 일어나는 상황 리플로우가 일어나는 상황 - 페이지 초기 렌더링 시 - 윈도우 리사이징 시 (Viewport 크기 변경 시) - DOM 요소 추가 및 삭제 시 - DOM 요소의 위치, 크기 변경 시 - 폰트 변경과 이미지 크기 변경 시 리페인트 - .. 2024. 2. 12. [알고리즘] 2. 공통원소구하기 2. 공통원소구하기 => 투포인터 알고리즘 2024. 1. 29. [프론트엔드] 자바스크립트와 비동기처리 소개 오늘은 자바스크립트의 비동기처리에 대해 알아보도록 하겠습니다. 목차 - 자바스크립트가 비동기 처리가 가능한 이유 - 비동기처리 예시 1) 자바스크립트는 싱글스레드임에도 비동기 처리가 가능한 이유 싱글스레드 외에 Web API, Task Queue, Event Loop 와 같은 요소들이 존재하기 때문입니다. 즉, 자바스크립트 자체는 싱글스레드이지만 자바스크립트가 브라우저 위에서 동작하기 때문입니다. Web API: 브라우저에서 제공하는 API 입니다. DOM, Ajax,Timeout 등이 있으며 CallStack에서 실행된 비동기 함수는 Web API 를 호출하고, Web API는 콜백 함수를 Task Queue 에 넣습니다. Event Loop: CallStack 과 Task Queue의 상태를 체.. 2024. 1. 28. [알고리즘] 1. 자릿수의합 / 2. 뒤집은소수 / 3. 멘토링 / 4. 졸업선물 / 5. k번째수 1. 자릿수의합 2. 뒤집은소수 3. 멘토링 4. 졸업선물 5. k번째수 2024. 1. 28. 이전 1 2 3 4 5 6 7 8 ··· 13 다음 반응형
