Чаро бозиҳои HTML5 тезтар бор мекунанд

Муқаддима: Суръат = Табдил

Барои бозиҳо дар браузер, "бори тезтар" маънои онро дорад: камтар байт, дархостҳои камтар, камтар интизори чаҳорчӯбаи аввал. Стек HTML5 (HTML/CSS/JS/Web

1) Шабака ва нақлиёт: чаро веб бо нобаёнӣ тезтар аст

HTTP/2 и HTTP/3 (QUIC)

Мултиплексинг: даҳҳо дороиҳо (спритҳо, қисмҳои код) дар як робита меоянд - "тӯфонҳо" -и TCP вуҷуд надоранд.

0-RTT I TLS 1. 3: дасти тез, роҳи кӯтоҳтар ба байти аввал.

Афзалияти ришта: дороиҳои муҳим (оғозёбии муҳаррик, атласи асосӣ) афзалияти баландтар мегиранд.

CDN ва ҳофизаи канорӣ

Гиреҳҳои POP ба дороиҳои ивазнашавандаи кэш плеер наздиктаранд (номҳои ҳаш).

'кӯҳна-ҳангоми таҷдиди назар' ба шумо имкон медиҳад, ки версияи кӯҳнаро нишон диҳед ва ҳамзамон нусхаи навро кашед.

Унвонҳо (дорухат):


Кэш-Назорат: оммавӣ, максималӣ = 31536000, тағйирнопазир
Рамзгузории мундариҷа: br//dlya JS/CSS (Brotli)
Сиёсати Cross-Origin-Resource-Policy: пайдоиши салиб
Вақт-иҷозат-пайдоиш:

2) Бастабандӣ ва тақсимоти код: расонидани "ҳамон қадаре ки ба шумо лозим аст"

Модулҳои ES ва воридоти динамикӣ

Рамзро ба бастаҳои сатҳӣ тақсим кунед: "фойе", "дарсӣ", "сатҳҳои 1-3", "мағоза".

Экрани ибтидоӣ танҳо қисмати аввалияро мегирад (50-150 КБ гз/бр). Боқимонда талабот аст.

Буридани дарахт ва минифизатсия

Хориҷ кардани муҳаррик/китобхонаи истифоданашудаи API.

Модули Terser/Lightning

Намунаи боркунии динамикӣ:

js
//Рендерери ҷангро танҳо дар оғози муҳорибаи Батл Renderer} = интизории воридот ('./chunks/battle' Renderer) бор кунед. js ');
нави Батл Рендерер (). васл (рони);

3) Дороиҳо: Пасандозҳои асосии байт

Тасвирҳо

Вебп/AVIF барои UI/тасвирҳо: минус 25-50% ба андоза ва против PNG/JPEG.

Рӯйхати Sprite ва атласҳо дархостҳо ва сарбориро кам мекунанд.

Маслиҳатҳои дастгоҳ/мизоҷ: 'Қабул-CH: DPR, Width, Viewport-Width' → сервер/канор андозаи дилхоҳро медиҳад.

3D/Textures

Асос/UASTC (KTX2): фишурдани универсалии матнҳои GPU (ETC1S/ASTC/BC) - як файлро бор кунед, онро дар формати корти видеоӣ кушоед.

Сатҳи Meep тадриҷан бор карда мешавад: аввал сифати паст → баъд намуна.

Аудио

Опус ба ҷои MP3/AAC - беҳтар дар битратҳои паст; ҷараёнро аз рӯи талабот (мусиқии минтақа - пас аз ворид шудан ба минтақа).

Видео/cutscenes

Вебкодекҳо/Media-Source ва LL-HLS барои видеоҳои кӯтоҳ; овезаҳо ва сегменти аввал - пешакӣ, боқимонда - танбалӣ.

4) Оғози муҳаррик: аввал "скелет", баъд "гӯшт"

Графикаи саҳнаи танбалӣ

Мо танҳо гиреҳҳои саҳнаи интиқодӣ (UI, камера, замина) бор мекунем. Моделҳо/shaders - дар ҳолати зарурӣ.

Корҳои пасзаминаи дороиҳо: Боркунак навбати афзалиятнок дорад.

Корманди хидматрасонӣ (SW) ҳамчун "кэши гарм"

Дар сафари аввал насб карда шуда, ядрои муштарӣ, атласро нишон медиҳад, shaders.

Ҳангоми дубора ворид шудан - омодагии офлайнӣ ва TTFI фавран ~.

Намунаи стратегияи SW (соддакардашуда):

js худ. Илова бар ин шунаванда ('fetch', e => {
д. ҷавоб додан бо (кэш. кушода ('бозӣ-v12'). пас (async c => {)
const cached = интизор c. бозии (д. дархост);
const тару тоза = овардан (д. дархост). пас (r => {c. гузоред (д. дархост, р. клон (); бозгашт r;});
бозгашт cached        тару тоза;
}));
});

5) Вебгл ва WASM: суръати "ватанӣ" дар браузер

ВебГЛ/Веб-ГПУ: shaders ва render - дар GPU; CPU дар мантиқ боқӣ мемонад.

Web-Assembly (WASM): қисмҳои вазнини муҳаррик (физика, роҳ, матнҳои кушод) тақрибан ба монанди китобхонаҳои маҳаллӣ кор мекунанд.

Кормандони веб: рамзкушоии матн/аудио, таҳлили сатҳ, тайёр кардани meshes - қуфлҳои асосӣ нестанд.

Бори аввал ба оптимизатсия (FTF):

Ба хотири FTF, мо "зебоӣ" -ро қурбонӣ мекунем: бори паст-поли/пасти-ресро бор кунед, баъдтар ресҳои баландро равон кунед.

6) Афзалияти боркунӣ: бигзор аввал муҳим гузарад

Маслиҳатҳои HTML:

html
<link rel = "preconnect" href = "https ://cdn. намуна. com">
<link rel = "preload" ҳамчун = "скрипт" href = "/app. a1b2c3 нест. js" кроссоригин>
<link rel = "preload" ҳамчун = "image" href = "/atlases/ui @ 1x. avif" imagesrcset = "/ui @ 2x. avif 2x">

Афзалиятҳо ва 'fetchpriority' -ро қабул кунед

' fetchpriority =" баланд"' - initialization JS ва UI атлас.

Қисми боқимондаи дороиҳо "паст" мебошанд, то ба роҳи интиқодӣ халал нарасонанд.

7) Метрика ва SLO бозиҳои "зуд" HTML5

Ҳадафҳо:

TTFB <200-300 мс (бо CDN).
LCP (lobby) <1. 8–2. 5 с дар мобилӣ.
Вақт-ба-Аввал-Ҳамкорӣ (TTFI) <2-3 с.
First Frame In-Game <1-2 s пас аз оғози саҳна.
Ҷамъи боргирӣ (даври аввал): ≤ 1-3 МБ дар як фойе, ≤ 5-10 МБ то ҷанги аввал/сатҳи аввал.
Бозоғозӣ: ~ 0-200 КБ ба туфайли кеши SW.

Мушоҳида: Чорабиниҳои RUM дар шабакаҳо/гео/дастгоҳҳо, Web Vitals, пешрафти боркунӣ, нокомии вақт.

8) Маҷмаи қубур: чӣ гуна "байти лоғар" -ро гирифтан мумкин аст

1. Таҳлили бастаҳо (source-map-explorer, webpack-bundle-analyzer).

2. Рамзи тақсимкунӣ аз рӯи манзараҳо/хусусиятҳо, бартараф кардани полифиллҳои "ғафс" (мо браузерҳои муосирро ҳадаф қарор медиҳем).

3. Минификатсия: Terser/ESB build + CSS Minify, бартараф кардани мантиқи dev.

4. Тасвирҳо: 'тез/squoosh' → AVIF/Web-P, насли 'srcset'.

5. Матнҳо: лифофа дар KTX2 (Base/UASTC), эҷоди mips.

6. Аудио: Opus VBR 48-96 кбит/сония, клипҳо - пешнамоишҳои кӯтоҳшуда.

7. Дороиҳои намоён (артефакт) + номҳои ҳаш + 'тағйирнопазир'.

8. PWA/SW: ядро пеш аз кэш, кэши даврии атлас бо 'кӯҳна-ҳангоми-эҳё'.

9. CDN: Маслиҳатҳои пешакӣ, 'Суррогат-Назорат', Нарм-Тозакунӣ бо барчасп.

9) Иҷрои вақти корӣ: пас аз боркунӣ бозии "парвоз" кардан

Буҷаи асосии ришта: JS-taski <50 ms нигоҳ доред; вазнин - дар коргарон.

Иҷрои бастаҳо: зангҳои гурӯҳӣ, фаврӣ истифода баред.

Фишори GC: массиви иҷора/буферҳо, аз "ахлот" дар тикаҳои бозӣ худдорӣ кунед.

FPS мутобиқшавӣ: Коҳиш додани эффектҳо ҳангоми FPS бидуни ламс кардани бозӣ.

10) Анти-намунаҳо (ки бозиро суст мекунад)

Як бастаи монолитӣ 5-15 МБ "оғоз".

Матнҳои PNG бе фишурдани GPU, ҳеҷ KTX2/Basis.

'rng% N' in боркунаки дороиҳо (муайянкунӣ муҳимтар аст - аммо ин ҳам дар бораи PF аст).

Дархостҳо бе сарлавҳаҳои кэш ё бе номҳои ҳаш → ҳар як боздид "хунук".

Полифиллҳо барои тамоми дунё (Яъне, Сафари кӯҳна) - беҳуда мегабайт кашидан.

Набудани SW/preloads - ташрифи такрорӣ мисли аввал душвор аст.

Ҳуруфҳои "вазнин" (якчанд услубҳо бидуни 'unicode-range' ва 'ҳуруф-дисплей: своп').

11) Рӯйхати бозикунии Fast HTML5

Шабака ва CDN

HTTP/3 фаъол аст; 'Пайвастшавӣ' ба CDN/провайдерҳо.
'Назорати кэш: тағйирнопазир' + hash-imena; 'кӯҳна-дар ҳоле-revalidate'.

Рамз ва бастаҳо

Тақсим кардани код аз рӯи саҳна; Модулҳои ES; дарахт-ларзон.
Initialization JS ≤ 150KB br; кортҳои рамзӣ алоҳида.

Дороиҳо

Вебп/AVIF барои UI; KTX2 Асоси/UASTC барои матнҳо.
Атласҳо ва mips; Opus аудио; видеоҳои танбал/cutscenes.

PWA/кэш

Корманди хидмат: ядро пеш аз кэш, кэши вақти атлас.
Сафари дуюм "аз кэши гарм" бор карда мешавад.

Афзалиятҳо

'боркунии' қисмҳои интиқодӣ/атласҳо; 'fetchpriority' барои муҳим.
Афзалияти паст ба саҳнаҳои дуюмдараҷа.

Метрика

TTFB/LCP/TTFI/FTF/зеркашӣ-буҷа дар панели панел.
Огоҳӣ дар бораи зиёд кардани вазн, паст шудани таносуби CDN.

12) Дорухатҳои унвони мини

Статикӣ (JS/CSS/Атласҳо):


Кэш-Назорат: оммавӣ, максималӣ = 31536000, тағйирнопазир
Рамзгузории мундариҷа: br

Манифести саҳнаи JSON (аксар вақт тағир меёбад):


Кэш-Назорат: оммавӣ, максималӣ = 60, кӯҳна-дар ҳоле-revalidate = 120
Назорати суррогат: макс-синну сол = 60, кӯҳна-агар-хато = 600

Шрифтҳо:


Кэш-Назорат: оммавӣ, максималӣ = 31536000, тағйирнопазир
Сиёсати Cross-Origin-Resource-Policy: пайдоиши салиб

Бозиҳои HTML5 тезтар бор мекунанд, зеро платформаи веб нақлиёти самаранокро муттаҳид мекунад (HTTP/2-3 TLS 1). 3), таҳвили интеллектуалӣ (CDN, кэш, пешпардохт), дороиҳои сабук (Webp/AVIF, KTX2, Opus) ва оғозёбии афзоянда (тақсимоти код, саҳнаҳои танбал, кэши SW). WebGL/WASM ва интизоми қатъии метрикиро илова кунед - ва чаҳорчӯбаи аввал дар сонияҳо пайдо мешавад ва воридшавӣ қариб якбора мегардад.