Rage HTML _

Yadda rage HTML ke aiki

Mai ragi yana tafiya shigarwarku tare da ƙaramin injin yanayi wanda ke bambanta yankuna da ake kiyayewa (<pre>, <textarea>, <script>, <style>) daga yankuna masu yiwuwar gyara inda sarari da bayanai ya yi aminci su haɗa.

1. Tokenize blocks na kiyayewa. Mai binciken yana karanta shigarwa harafi biye da harafi kuma yana juya zuwa yanayin kiyayewa lokacin da ya buga buɗaɗɗen <pre>, <textarea>, <script>, ko <style> tag. Ana ajiye duk abin da ke cikin waɗancan tags byte biye da byte har sai mai rufe da ya dace.
2. Haɗa sarari mai yiwuwar gyara. A cikin yankuna masu yiwuwar gyara, mai binciken yana haɗa kowane gudu na sarari, tabs, da layukan saita zuwa sarari guda ɗaya, sannan yana yanyanke sarari na gaba da na ƙarshe a kusa da iyakar tag. Rubutun mai ganuwa yana sake gudu iri ɗaya da yadda mai binciken ke nuna shi.
3. Cire bayanai. Ana cire blocks na <!-- ... --> lokacin da maɓallin ya kunna. Bayanai masu yanayi na IE (<!--[if IE]> ... <![endif]-->) sun tsira lokacin da maɓallin kiyaye-yanayi ya kunna, saboda tsofaffin abokin imel na IE har yanzu suna dogara da su.
4. Haɗa attributes na boolean. Nau'ukan masu tsawo kamar checked="checked", disabled="disabled", da required="required" sun ƙanƙanta zuwa sunan attribute mai tsaf. Ƙa'idar HTML5 tana ɗaukar tsarin mai tsaf a matsayin iri ɗaya a zahiri, don haka DOM da aka nuna bai canza ba.
5. Ba da rahoto na sauye-sauyen bytes. Ana auna rubutun asali da na da aka rage tare da new TextEncoder().encode(...).byteLength, adadin bytes na UTF-8 iri ɗaya da CDN ko uwar garken HTTP ke gani a layi. Tukunyar ma'auni tana nuna girman asali, girman da aka rage, bytes da aka adana, da kashi da aka adana.

Me ya sa rage HTML

• Loda shafi mai sauri. HTML ƙanana yana isa mai binciken da wuri kuma mai binciken ya gama da wuri. A cikin cibiyoyin sadarwa na wayar hannu, adanar bytes yana juyar kai tsaye zuwa First Contentful Paint mai sauri da maki na aiki na Lighthouse mafi kyau.
• Lissafin egress na CDN ƙasa. CloudFront, Cloudflare, da Fastly suna cajin kowane gigabyte na egress. Raguwa ta kashi 20 cikin ɗari na HTML a cikin miliyoyin ziyarar watanni suna tara cikin adana na ainihi a lissafin, kafin ko daya daga cikin hotunan ko gyara script ya sauka.
• Diffs na pull-request mafi tsabta. HTML na tsaye da aka gina da an ɗaure a repo yana zama mai hayaniya lokacin da kowane gyara samfuri ya sake gudu indentation. HTML da aka rage a cikin babban folder yana samar da diffs na PR mafi tsauri waɗanda suka mai da hankali kan ainihin canje-canjen abun ciki maimakon canjin sarari.
• Saka da snippets mafi ƙarami. Samfuran imel, snippets na widget na ɓangare na uku, da HTML da aka ajiye a cikin configs na JSON ko YAML duka suna amfana daga bytes ɗaya yanki. Saka da aka rage suna ajiye imel na kasuwanci ƙarƙashin iyakar girman ESP da ƙanƙanta bundles na widget.

Amfani na yau da kullun

Rage HTML yana bayyana a ƙarshen kusan kowane layin gina na gidan yanar gizo mai tsaye ko JAMstack, da kuma wasu yanayi na aiki inda bytes ke da mahimmanci fiye da iya karanta tushe.

• Matakai na gina gidan yanar gizo mai tsaye: Eleventy, Hugo, Astro, da ginawan samarwa na Next.js suna gudanar da HTML ta cikin mai ragi kafin rubutawa zuwa babban folder don bundle ɗin da aka yi aiki ya zama ƙanƙani fiye da tushe.
• Imel na kasuwanci: ESPs (SendGrid, Postmark, Mailgun) suna iyakance girman jikin HTML kuma faɗaɗawar CSS da aka saka yana ƙara girman jimillar cikin sauri. Rage jikin kafin aika yana ajiye saƙon ƙarƙashin iyaka.
• Widgets da aka saka: widgets na ɓangare na uku da snippets na zungur da aka aika a matsayin HTML da aka saka suna amfana daga kowane bytes yanki saboda shafin mai masaukin dole ya sauke su a kowane ziyara.

Misali da aka yi aiki

Lallaba snippet na fom masu tsawo na bytes 500 mai indent na sarari biyu, karyar layi uku tsakanin jere, block na bayanai na HTML a saman, da <input type="checkbox" checked="checked" />. Da duk zaɓuɓɓukan an kunna, fitowar ta haɗa zuwa kusan bytes 300 — kusan adana kashi 40 cikin ɗari — yayin da DOM tree da aka nuna ya kasance bytes ɗaya da tushe.

Shin rage zai karya HTML na?

A'a, idan an yi amfani da maɓallan tsoho. Mai ragi yana ajiye abun ciki na <pre>, <textarea>, <script>, da <style> tags kamar yadda suke, yana barin bayanai masu yanayi na IE cikakku lokacin da maɓallin ya kunna, kuma yana haɗa sarari kawai da mai bincike na HTML5 ya riga ya rarraba a matsayin marasa muhimmanci. DOM tree da aka nuna yana da bytes ɗaya da tushe. Maɓallan masu gaci (cire-attributes-marara komai) na iya canza hali don snippets da da gangan suna amfani da value="" ko alt="", don haka duba fitowar idan kun kunna su.

Shin wannan yana rage CSS da JS da aka saka?

A'a a cikin wannan kayan aiki. Ana ajiye jikin <style> da <script> da aka saka kamar yadda suke don mai ragi ba ya taɓa karya ƙa'idar CSS ko sanarwar JS ta hanyar haɗa sarari a cikin string literal ko regex. Don rage na musamman ga CSS yi amfani da CSS Minifier; don JS yi amfani da JS Minifier. HTML Minifier yana mai da hankali kan markup ɗin kansa.

Nawa zan iya adanawa?

Adanar yau da kullun akan HTML da aka rubuta da hannu tana tsakanin kashi 10 zuwa 30 cikin ɗari, ya danganta da nawa tushe ke amfani da indentation, layukan komai, da nau'ukan attribute masu tsawo. HTML na tsaye da aka gina daga frameworks kamar Next.js galibi yana adana kashi 15 zuwa 25 cikin ɗari saboda framework ya riga ya yi wasu inganta amma ya bar sarari mai iya karantawa. Samfuran masu yawan bayanai da HTML mai salon imel mai saka cikin zurfi na iya isa kashi 40 cikin ɗari ko fiye.

Shin abun ciki na pre ana kiyaye shi?

Eh. Mai ragi yana tokenize blocks na <pre>, <textarea>, <script>, da <style> a sarari a matsayin yankuna da ake kiyayewa kuma yana kwafa abun cikin su byte biye da byte zuwa fitowar. Sarari, karyar layi, da indentation a cikin waɗancan tags sun tsira ba tare da taɓa ba, don haka samfuran code da fasahar ASCII suna nuna daidai iri ɗaya bayan rage.

Rage HTML da ke gefen mai binciken yana ajiye layin gina ka mai sauƙi da markup ɗinka ƙanana. Lallaba kowane HTML a sama, gyara maɓallan zaɓi, da kwafi ko sauke fitowar da aka rage — babu loda, babu asusun, babu ɗakin laburare na diloli.