올
올리브영
August 30, 20231회
온라인몰 성능개선을 위한 FE 개발자의 고민 part-1
간단 소개
올리브영 온라인몰 FE 개발자가 Infinite Scroll을 통해 브라우저 렌더링을 최적화하고 성능을 개선한 경험을 공유합니다.
AI Summary
- 브라우저 렌더링 과정 및 최적화
- 브라우저는 HTML 파싱 후 DOM 트리, CSSOM 트리 생성, 렌더 트리 구축, 배치, 그리기를 거쳐 화면에 표시.
- Reflow/Repaint 최소화, 영향 노드 최소화, 프레임 줄이기, CSS will-change 속성 활용 등으로 렌더링 성능 개선 가능.
- Infinite Scroll을 통한 렌더링 최적화
- Infinite Scroll은 뷰포트 영역의 엘리먼트만 렌더링하고, 스크롤 시 필요한 엘리먼트를 추가하는 기법.
- 페이지 로딩 속도 단축 및 스크롤 딜레이 현상 개선 효과가 있어 대량 데이터 처리 웹사이트에 유용.
- 올리브영 온라인몰 신규 아키텍처에 직접 구현하여 FCP/LCP 속도 개선 확인.
Next Feeds
우리 애자일 해볼까? (with 라이브스쿼드)
올리브영 라이브 스쿼드의 애자일 기반 협업 방식과 라이브관 구축 과정, 그리고 향후 발전 방향을 소개합니다.
애자일라이브커머스프론트엔드협업사용자 경험
2023. 8. 30.
올리브영
카카오뱅크 iOS 플랫폼의 모듈화, 왜 필요했을까요?
카카오뱅크 iOS 플랫폼은 코드 증가와 빌드 시간 문제 해결을 위해 모듈화를 도입, 생산성 향상을 꾀했습니다.
모듈화iOS카카오뱅크빌드시간RIBs
2023. 8. 30.
카카오뱅크
다나와의 상품 데이터 여정
다나와의 상품 데이터 흐름(수집, 분류, 관리, 검색)과 각 서비스의 역할, 데이터 활용 방안을 소개합니다.
상품 데이터수집기분류기오피스검색
2023. 8. 30.
다나와
실무에서 적용하는 테스트 코드 작성 방법과 노하우 Part 2: 테스트 코드로부터 피드백 받기
테스트 코드로부터 피드백을 받아 코드 품질을 개선하고, 책임 분리를 통해 유연하고 테스트하기 쉬운 구조를 만드는 방법에 대한 실무 사례 분석.
테스트 코드책임 분리Mock Server외부 의존성리팩토링
2023. 8. 28.
카카오페이
컬리로그팀이 직접 고객을 만나고 리서치를 진행한 이야기: 컬리 푸드 페스타에서
컬리로그팀이 컬리 푸드 페스타에서 고객 리서치를 통해 얻은 인사이트와 고객 중심 프로덕트 개발의 중요성을 강조합니다.
컬리로그고객 리서치컬리 푸드 페스타사용자 경험프로덕트 개발
2023. 8. 27.
컬리
티맵이 화물 운송 단가를 최적화하는 방법 - 20편 - 화물에서의 다이나믹 프라이싱(Dynamic Pricing)
티맵은 데이터 기반의 다이나믹 프라이싱 모델(SMTM)을 통해 화물 운송 단가를 최적화하고, 실시간 수요/공급 변화에 탄력적으로 대응한다.
다이나믹 프라이싱화물 운송티맵SMTM배차
2023. 8. 25.
티맵모빌리티