최적화 2

[JS] 최적화 (Optimization)

Javascript를 최적화를 위한 다양한 방법들을 알아보자! [ 속도가 중요한 이유 ] https://web.dev/why-speed-matters/ 속도가 왜 중요합니까? 사용자 경험에서 속도는 중요한 역할을 합니다. 모바일 속도로 인한 지연은 실망스러울 뿐만 아니라 비즈니스 결과에도 부정적인 영향을 미칠 수 있습니다. web.dev 성능 측정의 척도 - 올바르게 동작하게 만든다 👉 메모리, 네트워크 트래픽과 같은 자원과 연관 - 빠르게 동작하게 만든다. 👉 시간과 관계 시간 시간은 크게 3가지로 분류한다. 1. 초기 구동시간 2. 계산시간 3. 반응 시간 이 시간들을 어떻게 최적화 할지 알아보자. 초기 구동시간 - 초기에 애플리케이션이 로드 되는 시간 [ 초기 구동시간을 줄이는 법 ] - 다운로드 ..

FE 2022.05.19

[FE] 브라우저 렌더링과 page reflow & repaint

웹 페이지 렌더링 - 브라우저가 HTML파일을 화면에 그려내는 과정 1. 파싱 : HTML파일을 DOM으로 변환 (파싱) 2. 스타일 계산 : CSS를 CSSOM으로 파싱 3. 레이아웃 : CSSOM 정보를 토대로 레이아웃 트리(렌더 트리)생성 4. 페인트 : 렌더트리가 생성되면 , 이 트리를 따라 페인트 기록 생성 (페인트 기록 ? 요소를 렌더링하는 순서 저장, 레이어를 나눠 시각적인 부분 그리는 작업 진행) 5. 컴포지팅 : 각 레이어를 스크린에 픽셀로 표현, 레이어들을 합성해 페이지를 그림 page reflow & repaint - HTML 구조상의 변화, CSS의 변화가 있으면 reflow와 repaint 과정을 거치게 된다. 1. reflow - 레이아웃 (너비 ,높이)등 변경 시 영향받는 모든..

FE 2022.05.19