Web Performance Optimization (8) 썸네일형 리스트형 [WPO] 브라우저 렌더링 과정 : Critical Rendering Path, Reflow, Repaint 렌더링 최적화를 위해서 알아야할 개념! 💡 Critical Rendering Path ( = Pixel Pipeline ) Critical Rendering Path (= Pixel Pipeline, = 브라우저 렌더링 과정)은 크게 4가지 프로세스로 진행된다. DOM + CSSOM DOM : 요소들 간의 관계 CSSOM : Style 요소들 Render Tree DOM + CSSOM의 조합 Layout 요소의 위치와 크기 정보를 가지고 레이아웃을 잡음 Paint Layout에 색을 칠해 넣음 Composite 각 Layer들을 합성하는 과정 🌱 Reflow - Critical Rendering Path 과정이 다시 모두 재실행되는 것 🌱 Repaint - color, background-color가 변.. [WPO] Code Splitting을 통한 최적화 (feat. cra-bundle-analyzer) Code Splitting - 말 그대로 코드 분할하기! - Code Splitting을 통해, 불필요한 코드 또는 중복되는 코드가 없이 중복되는 사이즈의 코드가 적절한 타이밍에 로드될 수 있도록 한다. Code Splitting을 하기전에 cra-bundle-analyzer을 사용해보자 📌 cra-bundle-analyzer Webpack을 통해 bundle 된 파일들이 어떤 코드로 구성되어 있는지 확인 가능 cra-bundle-analyzer 라이브러리 설치 및 실행 방법 여기서 image-gallery.js는 모달창을 띄우는 모듈인데, 최초 화면이 렌더링될 때, 굳이 모달창은 렌더링을 할 필요가 없으니 이 모듈을 분리해보자 최적화 이전 코드 import React, { useState } from .. [WPO] Lighthouse Lighthouse? - 구글에서 개발한, 웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구. - 웹, 앱의 품질개선을 위해 성능을 검사해주고 성능 향상을 위한 가이드를 제공 → 추천 : 로딩 성능 최적화를 위한 지표로 활용 → 진단 : 렌더링 성능 최적화를 위한 지표로 활용 이전 1 2 다음
