HTMLni kichraytirish _

HTML kichraytirish qanday ishlaydi

Kichraytiruvchi kiritilgan maʻlumotni kichik holat mashinasi orqali aylanib oʻtadi va saqlash kerak boʻlgan hududlarni (<pre>, <textarea>, <script>, <style>) boʻsh joylar va izohlarni qisqartirish mumkin boʻlgan hududlardan ajratadi.

1. Saqlash bloklarini tokenlashtirish. Skaner kiritmani belma-bel oʻqiydi va ochiluvchi <pre>, <textarea>, <script> yoki <style> tegiga urilganda saqlash holatiga oʻtadi. Ushbu teglar ichidagi hamma narsa mos yopuvchi tegga yetgunga qadar bayt-bayt saqlanadi.
2. Tahrirlanadigan boʻsh joyni qisqartirish. Tahrirlanadigan hududlarda skaner boʻshliq, tabulyatsiya va satr boshlarining har bir ketma-ketligini bitta boʻshliqqa qisqartiradi, soʻngra teg chegaralari atrofidagi boshlanish va oxirgi boʻsh joylarni qisqartiradi. Koʻrinadigan matn brauzer renderlaganidek qayta oqadi.
3. Izohlarni olib tashlash. <!-- ... --> bloklari tugma yoqilganda olib tashlanadi. IE shartli izohlar (<!--[if IE]> ... <![endif]-->) saqlash-shartli tugma yoqilganda saqlanadi, chunki eskirgan email mijozlari ularga hali ham tayanadi.
4. Boolean atributlarni qisqartirish. checked="checked", disabled="disabled" va required="required" kabi soʻzma-soʻz shakllar oddiy atribut nomiga qisqaradi. HTML5 spetsifikatsiyasi oddiy shaklni semantik jihatdan bir xil deb hisoblaydi, shuning uchun renderlangan DOM oʻzgarmaydi.
5. Bayt oʻzgarishlarini hisobot qilish. Ham asl, ham kichraytirilgan matn new TextEncoder().encode(...).byteLength bilan oʻlchanadi — bu CDN yoki HTTP server kabeldagi koʻrinadigan oʻsha UTF-8 bayt sonidir. Metrik tasma asl oʻlchamni, kichraytirilgan oʻlchamni, tejilgan baytlarni va tejilgan foizni koʻrsatadi.

Nima uchun HTMLni kichraytirish kerak

• Tezroq sahifa yuklash. Kichikroq HTML brauzerga tezroq yetib boradi va tahlilchi erta tugatadi. Mobil tarmoqlarda bayt tejovi toʻgʻridan-toʻgʻri tezroq First Contentful Paint va yaxshiroq Lighthouse unumdorlik baliga aylanadi.
• Pastroq CDN egress hisob-kitoblari. CloudFront, Cloudflare va Fastly chiqish uchun gigabayt boʻyicha hisob qiladi. Oylik millionlab koʻrishda 20 foizlik HTML kamayishi hisob-fakturada real tejaviga aylanadi, har qanday rasm yoki skript optimizatsiyasiga qadar.
• Aniqroq pull-request farqlari. Repoga kiritilgan statik HTML har bir shablon oʻzgarishi chekinishni qayta oqizganda shovqinli boʻlib qoladi. Dist papkasidagi kichraytirilgan HTML boʻsh joy shovqini oʻrniga haqiqiy kontent oʻzgarishlariga eʻtibor qaratadigan yanada ixcham PR farqlarini yaratadi.
• Kichikroq oʻrnatmalar va boʻlakmalar. Email shablonlari, uchinchi tomon vidjet boʻlakchalari va JSON yoki YAML konfiguratsiyalarida saqlangan HTML bir xil bayt kesishidan foyda koʻradi. Kichraytirilgan oʻrnatmalar tranzaksion emaillarni ESP oʻlcham chegaralari ostida saqlaydi va vidjet toʻplamlarini kichraytiradi.

Keng tarqalgan qoʻllanishlar

HTML kichraytirish deyarli har bir statik sayt yoki JAMstack qurish quvurining oxirida va baytlar manba oʻqilishidan muhimroq boʻlgan bir qancha ish vaqti kontekstlarida paydo boʻladi.

• Statik sayt qurish bosqichlari: Eleventy, Hugo, Astro va Next.js ishlab chiqarish qurishlari HTML-ni kichraytirgichdan oʻtkazib, dist papkasiga yozadi, shunda joylashtirilgan toʻplam manbadan kichikroq boʻladi.
• Tranzaksion emaillar: ESP-lar (SendGrid, Postmark, Mailgun) HTML tanasi oʻlchamini cheklaydi va inline-CSS kengayishi tez hisoblanadi. Yuborishdan oldin tanani kichraytirish xabarni chegaradan pastda ushlab turadi.
• Oʻrnatilgan vidjetlar: inline HTML sifatida yuboriladigan uchinchi tomon vidjetlari va chat boʻlakchalari har bir bayt kesishidan foyda koʻradi, chunki mezbonlar sahifa har tashrif buyurilganda ularni yuklab oladi.

Ishlangan misol

Ikki-boʻshliqli chekinish, teglar orasida uchta satr boshi, tepada HTML izoh bloki va <input type="checkbox" checked="checked" /> boʻlgan soʻzma-soʻz 500 baytlik shakl boʻlagini joylashtiring. Har bir tugma yoqilganda natija taxminan 300 baytga — taxminan 40 foizli tejov — qisqaradi, renderlangan DOM daraxti esa manba bilan bayt-bayt teng boʻlib qoladi.

Kichraytirish mening HTMLimni buzadimi?

Yoʻq, standart tugmalar bilan foydalanilganda. Kichraytiruvchi <pre>, <textarea>, <script> va <style> teglarining tarkibini soʻzma-soʻz saqlaydi, oʻsha tugma yoqilganda IE shartli izohlarni saqlab qoladi va HTML5 tahlilchisi ahamiyatsiz deb tasniflagan boʻsh joylarni qisqartiradi. Renderlangan DOM daraxti manba bilan bayt-teng. Tajovuzkor tugmalar (boʻsh-atributlarni-olib-tashlash) intentli ravishda value="" yoki alt="" ishlatadigan boʻlakmalar uchun xatti-harakatni oʻzgartirishi mumkin, shuning uchun ularni yoqsangiz natijani koʻrib chiqing.

Bu inline CSS va JS-ni kichraytiradi mi?

Bu vositada emas. Inline <style> va <script> tanalar soʻzma-soʻz saqlanadi, shuning uchun kichraytiruvchi satr literali yoki regeks ichidagi boʻsh joyni qisqartirish orqali hech qachon CSS qoidasini yoki JS iborasini buzmaydi. CSS-ga xos kichraytirish uchun CSS Minifier, JS uchun JS Minifier ishlating. HTML Minifier oʻzi belgilashga eʻtibor qaratadi.

Qancha tejash mumkin?

Qoʻlda yozilgan HTMLda odatdagi tejov manbaning qancha chekinish, boʻsh satr va soʻzma-soʻz atribut shakllaridan foydalanishiga qarab 10—30 foizni tashkil qiladi. Next.js kabi freymvorklardan oldindan qurilgan statik HTML koʻpincha 15—25 foiz tejaydi, chunki freymvork allaqachon baʻzi optimizatsiyalar qiladi, lekin odamlar oʻqiy oladigan boʻsh joy qoldiradi. Chuqur joylashtirilgan elektron pochta uslubidagi HTML va keng izohli shablonlar 40 foiz yoki undan koʻproq tejavga erishishi mumkin.

Pre tarkibi saqlanadimi?

Ha. Kichraytiruvchi <pre>, <textarea>, <script> va <style> bloklarini saqlash-bu-holda hududlar sifatida tokenlashtiradi va ularning tarkibini natijaga bayt-bayt koʻchiradi. Bu teglar ichidagi boʻsh joy, satr boshlari va chekinishlar kichraytirishdan keyin ham oʻzgarmasdan saqlanadi, shuning uchun kod namunalari va ASCII rasmlari aynan bir xil renderlaydi.

Brauzer tomoni HTML kichraytirish qurish quvuringizni sodda va belgilashingizni kichik saqlaydi. Yuqoriga istalgan HTML joylashtiring, parametr tugmalarini sozlang va kichraytirilgan natijani nusxalang yoki yuklab oling — yuklash yoʻq, hisob yoʻq, vendor kutubxonasi yoʻq.