WebKit의 레이어 트리 동결 재현
WebKit 레이어 트리 동결 문제를 직접 테스트합니다.
관련 글:
iOS WebView 첫 화면 지연 현상
1
미사용 @font-face
폰트를 선언만 하고 사용하지 않음 ·
2초 이미지
동결
2
사용 폰트 (성공)
폰트를 선언하고 실제로 텍스트에 적용 ·
2초 이미지
정상
3
사용 폰트 (404)
폰트 적용했지만 파일이 없음 ·
2초 이미지
정상
4
font-display 속성
swap, block 등 font-display 지정 ·
2초 이미지
동결
5
이미지 로딩 지연
이미지 로딩 지연시간 조절 ·
조절 가능
동결
6
200자 임계값
?t=글자수 (기본: t=100) ·
3초 이미지
가변
10자 🔴
100자 🔴
200자 🟢
판정 기준
동결
: |raf - load| < 100ms → 레이어 트리가 동결됨
정상
: raf << load → 정상적으로 점진적 렌더링
가변
: 조건에 따라 결과가 달라짐
⚠️ 테스트 주의사항
폰트 캐시를 비우거나 시크릿 모드에서 테스트하세요.
첫 방문 시 Service Worker가 등록되며, 새로고침 후 정상 작동합니다.