본문 바로가기
반응형

Front-end (프론트엔드)/Browser (브라우저)2

[프론트엔드] 리플로우 / 리페인트 소개 오늘은 렌더링 성능 최적화를 위한 리플로우, 리페인트에 대해 알아보도록 하겠습니다. 목차 - 리플로우 - 리페인트 - 리플로우와 리페인트가 일어나는 상황 - 리플로우,리페인트 최적화 방법 1) 리플로우의 정의 : 레이아웃 변경 시 모든 노드를 다시 계산하여 레이아웃 트리(랜더 트리)를 재구성하는 작업입니다. 2) 리페인트의 정의 : Reflow 과정이 끝나고 재생성된 레이아웃 트리(랜더 트리)를 다시 레이어에 그리는 작업입니다. 3) 리플로우와 리페인트가 일어나는 상황 리플로우가 일어나는 상황 - 페이지 초기 렌더링 시 - 윈도우 리사이징 시 (Viewport 크기 변경 시) - DOM 요소 추가 및 삭제 시 - DOM 요소의 위치, 크기 변경 시 - 폰트 변경과 이미지 크기 변경 시 리페인트 - .. 2024. 2. 12.
[프론트엔드] 브라우저 구조/ 브라우저 원리/ 브라우저 렌더링 과정 소개 오늘은 프론트엔드 개발자라면 꼭 알아야 할 브라우저의 구조, 브라우저의 원리, 브라우저의 렌더링 과정에 대해 알아보도록 하겠습니다. 목차 - 브라우저의 정의 - 프론트엔드 개발자가 브라우저를 알아야 하는 이유 - 브라우저의 구조 - 브라우저의 동작원리 - 브라우저 렌더링 정의 및 과정 1) 브라우저의 정의 Web에서 페이지를 찾아서 보여주고, 하이퍼링크를 통해 사용자가 다른 페이지로 이동할 수 있도록 도와주는 프로그램입니다. 크롬, 파이어폭스, 사파리, 인터넷 익스플로러(IE) 등이 있습니다. 2) 프론트엔드 개발자가 브라우저를 알아야 하는 이유 프론트엔드 개발자는 브라우저에서 동작하는 어플리케이션을 만들기 때문입니다. 웹 어플리케이션 개발, 브라우저 호환성, 성능 최적화, 디버깅, 보안, 취약점 .. 2023. 11. 25.
반응형