HTML Tömörítése _

Hogyan működik a HTML tömörítés

A tömörítő egy kis állapotgéppel járja be a bemenetet, ami megkülönbözteti a megőrzendő régiókat a szerkeszthető régióktól.

1. Megőrzendő blokkok tokenizálása. A beolvasó karakterről karakterre halad, és megőrzendő állapotba vált a <pre>, <textarea>, <script> vagy <style> tag-eknél.
2. Szerkeszthető szóközök összevonása. A szerkeszthető régiókban minden szóköz-, tab- és újsor sorozat egyetlen szóközzé tömörül.
3. Megjegyzések eltávolítása. A <!-- ... --> blokkok eltávolításra kerülnek, ha a kapcsoló be van kapcsolva. Az IE feltételes megjegyzések megmaradnak.
4. Logikai attribútumok összevonása. A részletes formák, mint a checked="checked", leegyszerűsödnek az attribútum nevére.
5. Bájt eltérések jelentése. Mind az eredeti, mind a tömörített szöveg mérése a new TextEncoder().encode(...).byteLength segítségével történik.

Miért érdemes HTML-t tömöríteni

• Gyorsabb oldalbetöltés. A kisebb HTML gyorsabban ér a böngészőbe, és az elemző hamarabb végez.
• Alacsonyabb CDN kimenő forgalom számlák. 20%-os HTML csökkentés milliónyi havi megtekintésnél valós megtakarítás.
• Tisztább pull request diff-ek. Az előre buildelt statikus HTML tömörítve szűkebb PR diff-eket eredményez.
• Kisebb beágyazások és kódrészletek. Az e-mail sablonok, widget részletek és JSON-ba ágyazott HTML is profitál a tömörítésből.

Gyakori alkalmazások

A HTML tömörítés szinte minden statikus weboldal build pipeline végén megjelenik.

• Statikus weboldal build lépések: Eleventy, Hugo, Astro és Next.js éles build-ek.
• Tranzakciós e-mailek: ESP-k (SendGrid, Postmark, Mailgun) korlátozzák a HTML méretet.
• Beágyazott widget-ek: harmadik fél widget-ek és chat részletek.

Egy kidolgozott példa

Illessz be egy 500 bájtos űrlap részletet kétszóközös behúzással, három sortöréssel a sorok között, egy HTML megjegyzés blokkal. A kimenet kb. 300 bájtra csökken.

A tömörítés eltöri a HTML-em?

Nem, az alapértelmezett kapcsolókkal. A tömörítő megőrzi a <pre>, <textarea>, <script> és <style> tag-ek tartalmát.

Tömöríti az inline CSS-t és JS-t?

Ebben az eszközben nem. Az inline stílusok és scriptek érintetlenül maradnak.

Mennyit spórolhatok?

A tipikus megtakarítás kézzel írt HTML esetén 10-30% között van.

A pre tartalom megőrződik?

Igen. A tömörítő kifejezetten tokenizálja a <pre>, <textarea>, <script> és <style> blokkokat.

Böngészőoldali HTML tömörítés egyszerűvé teszi a build pipeline-t és kicsinyíti a jelölőnyelvet.