HTML5 게임이 더 빨리로드되는 이유

소개: 속도 = 변환

브라우저의 게임의 경우 "더 빠른로드" 는 바이트 수가 적고 요청이 적으며 첫 번째 프레임을 기다리는 속도가 적다는 것을 의미합니 HTML5 스택 (HTM/CSS/JS/WebGL/WASM) 은 상자에서 최신 배송 및 캐싱을 제공합니다. 이는 짧은 TTFB, 낮은 LCP 및 빠른 TTFI (Time-to-First-Interaction) 를 의미합니다.

1) 네트워크 및 전송: 기본적으로 웹이 더 빠른 이유

모든 편지 선택 (c)

멀티플렉싱: 수십 개의 자산 (스프라이트, 코드 덩어리) 이 하나의 연결로 제공됩니다.

0-RTT 리스트 1. 3: 빠른 악수, 첫 번째 바이트까지의 짧은 길.

스레드 우선 순위: 중요 자산 (엔진 초기화, 마스터 아틀라스) 이 우선 순위가 높아집니다.

CDN과 에지 캐시

플레이어 캐시 불변의 자산 (해시 이름) 에 더 가까운 POP 노드.

'이전 버전을 보여주고 동시에 새 버전을 가져올 수 있습니다.

제목 (레시피):


캐시 제어: 공개, 최대 연령 = 31536000, 불변성
콘텐츠 인코딩: 브로 틀리 (Brotli)
원산지 자원 정책: 원산지
타이밍 허용 원산지:

2) 번들 및 코드 분할: "필요한만큼" 제공

ES 모듈 및 동적 가져 오기

코드를 "로비", "튜토리얼", "레벨 1-3", "상점" 과 같은 레벨 팩으로 나눕니다.

초기 화면은 초기화 청크 만 수신합니다 (50-150 KB gz/br). 나머지는 수요 중입니다.

나무 흔들기 및 광화

사용하지 않는 엔진/라이브러리 API를 제거하십

Terser/LightningCSS + 모듈 sideEffects = 잘못되어 데드 코드를 적극적으로 잘라냅니다

동적 로딩의 예:

js
//전투 콘스트 {BattleRenderer} = 가져 오기 ('./chunks/battRenderer) 가 시작될 때만 전투 렌더러를로드하십시오. js ');
새로운 BattleRenderer (). 마운트 (캔버스);

3) 자산: 주요 바이트 절약

이미지

UI/일러스트레이션을위한 WebP/AVIF: 크기에 비해 마이너스 25-50%

스프라이트 목록과지도 책은 쿼리와 오버 헤드를 줄입니다.

장치/클라이언트 힌트: '수락 -CH: DPR, 너비, 뷰포트 너비' → 서버/에지는 원하는 크기를 제공합니다.

3D/텍스처

Basis/UASTC (KTX2): GPU 텍스처의 범용 압축 (ETC1S/ASTC/BC) -하나의 파일을로드하여 비디오 카드 형식으로 포장을 해제합니다.

미프 레벨은 점진적으로로드됩니다: 첫 번째 저품질 → 그런 다음 샘플.

오디오

MP3/AAC 대신 Opus-낮은 비트 전송률에서 더 좋습니다. 주문형 트랙 스트리밍 (영역에 들어간 후 영역 음악).

비디오/컷신

짧은 비디오에 대한 WebCodeks/MediaSource 및 LL-HLS; 포스터와 첫 번째 세그먼트 (사전로드, 나머지) 가 게으르다.

4) 엔진 초기화: 첫 번째 "골격", "고기"

게으른 장면 그래프

중요한 장면 노드 (UI, 카메라, 배경) 만 적재합니다. 필요에 따라 모델/셰이더.

배경 자산 작업: 부트 로더는 우선 순위 대기열을 보유합니다.

"따뜻한 캐시" 로 서비스 작업자 (SW)

처음 방문 할 때 설치하고 클라이언트 커널, 아틀라스 매니페스트, 셰이더를 캐시합니다.

다시 로그인하면-오프라인 준비 및 TTFI ~ 즉시.

SW 전략의 예 (단순화):

js 자기. AddEventListener ('가져 오기', e => {
. 응답했다 (캐시. 오픈 ('game-v12'). 그런 다음 (async c => {
const cashed = 기다리고 있습니다. 일치 (e. 요청);
const fresh = fetch (e. 요청). 그런 다음 (r => {c. put (e. 요청, r. 클론 ()); return r;});
캐시 된 리턴        신선한;
}));
});

5) WebGL 및 WASM: 브라우저의 "기본" 속도

WebGL/WebGPU: GPU의 셰이더 및 렌더 -; CPU는 논리에 남아 있습니다.

WebAssembly (WASM): 엔진의 무거운 부분 (물리, 경로, 포장 풀기 텍스처) 은 거의 기본 라이브러리처럼 작동합니다.

웹 작업자: 텍스처/오디오 디코딩, 레벨 구문 분석, 메시 준비-주류 잠금 해제 없음.

FTF (First Time to Frame) 최적화:

FTF를 위해, 우리는 "아름다움" 을 희생합니다.

6) 로딩 우선 순위 지정: 중요한 패스를 먼저 통과하십시오

HTML의 힌트:

html
<link rel = "사전 연결" href = "https ://cdn. 예. com ">
<link rel = "preload" = "schrypt" href = "/app. a1b2c3. js "크로스 오리지널>
<link rel = "preload" = "Image" href = "/atlases/ui @ 1x. avif "imagesrcset = "/ui @ 2x. avif 2x ">

우선 순위 및 'fetchpriority' 가져 오기

'fetchopriate = "high"' -초기화 JS 및 UI 아틀라스.

나머지 자산은 중요한 경로를 방해하지 않도록 '낮음' 입니다.

7) "빠른" HTML5 게임의 측정 및 SLO

목표:

TTFB <200-300 ms (CDN과 함께).
LCP (로비) <1. 8–2. 모바일 5 초
TTFI (Time-to-First-Interaction) <2-3 km.
장면이 시작된 후 첫 번째 프레임 인 게임 <1-2 초.
총 다운로드 (첫 실행): 로비 당 1-3 MB, 첫 전투/레벨까지 5-10 MB.
SW 캐시 덕분에 ~ 0-200KB를 다시 시작하십시오.

관찰 가능성: 네트워크/지리/장치, 웹 바이탈, 부트 로더 진행 상황, 타임 아웃 실패에 대한 RUM 이벤트.

8) 파이프 라인 어셈블리: "얇은 첫 바이트" 를 얻는 방법

1. 번들 분석 (소스 맵 탐색기, 웹팩 번들 분석기).

2. 장면/기능별로 코드 분할, "두꺼운" 폴리 필의 제거 (최신 브라우저를 대상으로 함).

3. 최소화: Terser/ESBuild + CSS Minify, 개발 논리 제거.

4. 이미지: 'sharp/squoosh' → AVIF/WebP, 'srcset' 생성.

5. 텍스처: KTX2 (Basis/UASTC) 의 봉투, 마이프 생성.

6. 오디오: Opus VBR 48-96kbps, 클립-미리보기 단축.

7. 매니페스트 자산 (아티팩트) + 해시 이름 + '불변의'.

8. PWA/SW: 커널 프리 캐시, '부실한 상태' 가있는 아틀라스의 런타임 캐시.

9. CNC: 태그별로 프리로드 힌트, '대리 제어', 소프트 퍼지.

9) 런타임 성능: 로딩 후 게임을 "비행" 하기 위해

메인 스레드 예산: JS- 타스키 <50ms 보유; 노동자들에게 무겁습니다.

배치 렌더링: 그룹 드로우 콜, 사용 인스턴스.

GC 압력: 배열/버퍼를 대여하고 게임 틱에서 "쓰레기" 를 피하십시오.

적응 형 FPS: 게임 플레이를 건드리지 않고 FPS가 떨어지면 포스트 효과를 줄입니다.

10) 패턴 방지 (게임을 느리게 만듭니다)

하나의 모 놀리 식 번들 5-15 MB "시작".

GPU 압축이없고 KTX2/Basis가없는 PNG 텍스처.

'rng% N' in 자산 로더 (결정이 더 중요하지만 PF에 관한 것).

캐시 헤더가 없거나 해시 이름이없는 요청 → 각각 "콜드" 를 방문하십시오.

전 세계를위한 폴리 필 (IE, 구 사파리) -메가 바이트를 헛되이 당깁니다.

SW/사전로드 부족-반복 방문은 처음만큼 어렵습니다.

"무거운" 글꼴 ('유니 코드 범위' 및 '글꼴 표시: 교환' 이없는 여러 스타일).

11) 빠른 HTML5 게임 체크리스트

네트워크 및 CDNName

TP/3 활성화; '사전 연결' 을 CDNA/공급자에게 제공합니다.
'캐시 컨트롤: 불변의' + 해시 -и

코드 및 번들

현장별로 코드 분할; ES 모듈; 나무 흔들림.
초기화 JS 코드 카드가 별도로 있습니다.

자산

UI를위한 [] WebP/AVIF; 질감을위한 KTX2 Basis/UASTC.

Atlases 및 mips; Opus 오디오; 게으른 비디오/컷신.

PWA/캐시

서비스 작업자: 커널 프리 캐시, 런타임 아틀라스 캐시.
두 번째 방문은 "따뜻한" 캐시에서로드됩니다.

우선 순위

중요한 덩어리/아틀라스의 '프리로드'; 중요한 '우선 순위'.
보조 장면에 우선 순위가 낮습니다.

메트릭

대시 보드의 TTFB/LCP/TTFI/FTF/다운로드 예산.
체중 증가에 대한 경고, 적중 비율 CDN이 떨어집니다.

12) 미니 타이틀 레시피

정적 (JS/CSS/Atlases):


캐시 제어: 공개, 최대 연령 = 31536000, 불변성
콘텐츠 인코딩: br

JSON 장면 선언 (종종 변경됨):


캐시 제어: 공개, 최대 연령 = 60, 부실한 기간 = 120
대리 제어: max-age = 60, 부실 경우 오류 = 600

글꼴:


캐시 제어: 공개, 최대 연령 = 31536000, 불변성
원산지 자원 정책: 원산지

HTML5 게임은 웹 플랫폼이 효율적인 전송을 결합하기 때문에 더 빠르게로드됩니다 (TH/2-3 TLS 1). 3), 스마트 전달 (CNC, 캐시, 프리로드), 라이트 자산 (WebP/AVIF, KTX2, Opus) 및 증분 초기화 (코드 분할, 게으른 장면, SW 캐시). WebGL/WASM과 엄격한 메트릭 분야를 추가하면 첫 번째 프레임이 몇 초 안에 나타나고 재진입이 거의 즉각적으로됩니다.