실행하지 않는 JavaScript를 10MiB까지 늘려봤다
호출하지 않는 함수가 10MiB 들어 있으면 얼마나 손해일까. 바이트가 만든 비용과 코드 형태가 만든 비용을 갈라 855회 측정했다. 미호출 선언은 MiB당 약 21ms로 CPU를 4배 늦춰도 늘지 않았고, 파일을 읽자마자 실행되는 초기화 코드는 MiB당 201ms를 메인 스레드에 얹었다. 실제 라이브러리에서는 import만 해도 모듈 평가가 실행됐다.
20 POSTS
Browser 1
여러 웹뷰에서 하나의 웹 운영하기: 환경 분기를 어댑터로 모은 과정
자사 앱과 파트너 앱의 iOS, Android 웹뷰를 지원하며 흩어진 환경 분기를 어댑터로 모았다. 인셋과 브릿지, CSS를 정리한 과정과 SSR 시드, hydration에서 겪은 문제를 기록했다.
◆ 서비스 워커 캐싱 딥다이브 · 3편서비스 워커 경유 비용 실측: GA4가 답하지 못한 대조군을 랩에서 만들기
2편 끝에 남긴 "워커 경유 비용 500ms"를 확정하려 했지만, 대조군이 되는 하드 리로드는 하루 한 건이 안 됐다. 그래서 Playwright와 셰이핑 프록시로 대조군을 직접 만들어 재 보니 내비게이션에서 워커 비용은 2ms였고, 비용은 지연이 아니라 글 하나를 클릭할 때마다 배경에서 더 받는 바이트 쪽에 있었다. 랩과 실사용자 데이터 사이에 남겨 둔 간극은 글을 다 쓰고 나서야 103 Early Hints가 만든 측정 정의 차이였다는 것을 알았다. 서비스 워커 캐싱 딥다이브 시리즈의 세 번째 편이다.
framer-motion 배너에서 프레임드랍 없애기: 두 번의 삽질과 이징 함수
framer-motion으로 만든 배너가 열리는 0.6초 동안 홈 전체가 버벅였다. 원인을 코드로 추정하고, 실측으로 두 번 뒤집히고, 결국 이징 함수 하나로 리플로우를 없애기까지의 기록. 그리고 이 작업이 남긴 것들: 선언과 실행의 간극, 속성이 성능을 결정한다는 원칙, 메커니즘 보존, 계측기를 의심하는 순서, 같음을 곡선으로 증명하는 방법.
◆ 서비스 워커 캐싱 딥다이브 · 1편서비스 워커 캐싱의 동작 원리: 프록시, 라이프사이클, 다섯 가지 전략
서비스 워커는 사이트와 네트워크 사이에 선 프로그래밍 가능한 프록시다. 어디에 서 있는가, 캐시는 왜 썩는가, 배포했는데 왜 옛 버전이 보이는가, 무엇을 어떤 전략으로 담는가, 그래서 이걸 써야 하는가. 실무에서 마주치는 다섯 개의 질문을 붙잡고, opaque 응답이 104KB에서 6.6MB로 집계되는 실측과 상태 전이의 세부까지 내려간다. 『프런트엔드 성능 최적화 Deep Dive』의 캐시 장에서 못 다한 일반론이다. 서비스 워커 캐싱 딥다이브 시리즈의 첫 편이다.
number-flow를 구형 브라우저로 이식하기: 다섯 가지 결정과 두 가지 번복
number-flow가 애니메이션을 켜는 최소 버전은 Chrome 125, Safari 17.2다. 이 하한을 Chrome 66과 WebKit 16.4까지 내리는 포크를 만들면서 내린 결정들과, 뒤집게 된 판단 두 가지, 그리고 자동 강등을 포기한 Safari 버그 조사의 기록.
『프런트엔드 성능 최적화 Deep Dive』가 출간되었습니다.
🙇🏻♂️
React의 <ViewTransition>: 브라우저 네이티브 애니메이션을 React답게
View Transition API를 React가 감싸면 어떻게 되는가
IntersectionObserver 싱글톤 패턴과 WeakMap으로 메모리 누수 방지하기
수백 개의 요소를 효율적으로 관찰하면서 메모리 누수도 방지하는 방법
WebGPU, 드디어 모든 브라우저에서 사용 가능해지다
2025년 7월, 14년 만에 브라우저 GPU API 세대교체가 완료됐다
- ◆ 웹 서비스 성능 분석 · 4편
웹 서비스 성능 분석 (4)
나도 해볼까.. 라는 생각이 든다면 바로 지금 연락주세요!!
브라우저의 프리로드 스캐너(pre-load scanner)와 파싱 동작의 이해
브라우저 최적화랑 싸우지마
Largest Contentful Paint (LCP) 최적화하기
브라우저 동작 방식을 이해하기
크롬 메모리 프로파일러 사용하는 방법
스냅샷 해석과 디버깅의 책임은 본인에게 있습니다
Rust로 web assembly 만들어보기 (1) - Web Assembly란 무엇인가?
인생은 실전이다
웹 애플리케이션에서 자바스크립트 프로파일링 해보기
해봤지만 해보지 않았습니다
HTML 문서에서 DOM으로의 여정
parser의 동작원리도 살펴보기
서버에서 클라이언트로의 여정 - 브라우저와 서버는 어떻게 데이터를 주고 받을까
네트워크도 공부해야하는데
Critical Request - request 순서는 웹사이트 속도에 어떤 영향을 미치는가
서순을 정확히하는게 중요하지
웹 개발자가 본 사파리 15의 변화와 대응
죽인다 사파리