HTML glaudinimo ir formatavimo įrankis internetu — nemokamas, be įkėlimo

Įklijuokite HTML žemiau, kad jį suglaudintumėte — pašalindami komentarus, perteklinius atributus ir papildomus tarpus — arba sutvarkytumėte į skaitomą, su įtrauka suformatuotą kodą. Abi kryptys veikia visiškai jūsų naršyklėje, naudojant tikrą HTML analizatorių, o ne reguliariųjų išraiškų gudrybes, todėl turinys tarp <pre> ir <textarea> žymų lieka nepaliestas.

Kas yra šis įrankis?

HTML glaudinimo įrankis pašalina viską, ko naršyklei nereikia, kad teisingai atvaizduotų puslapį: komentarus, papildomus tarpus tarp žymų, perteklinius atributus, pvz., type="text/javascript", ir pasirinktinius uždarančius pasvirusius brūkšnius. Rezultatas — funkciškai identiškas HTML, kuris atsisiunčia ir analizuojamas greičiau.

Šis įrankis sukurtas naudojant html-minifier-terser, tą patį glaudintuvą, naudojamą populiariose kūrimo priemonėse, todėl jis supranta HTML struktūrą, o ne aklai pašalina tarpus — jis nelies formatavimui jautrio turinio tarp <pre>, <textarea> ar įterptinių <script>/<style> blokų, ir taip pat suglaudina jūsų žymėjime įterptą CSS bei JS.

Kodėl jį naudoti?

Po gaubtu tikras analizatorius, ne reguliariosios išraiškos — saugus kraštutiniais atvejais, pvz., su <pre> blokais, įterptiniais skriptais ir sąlyginiais komentarais.
Suglaudina ir įterptą <style> bei <script> turinį, ne tik aplinkinį žymėjimą.
Matote tiksliai, kiek baitų sutaupėte prieš paskelbdami failą.
Formatavimo režimas suspaustą, vienos eilutės HTML paverčia atgal į kažką, ką žmogus gali skaityti ir redaguoti.
100 % vietinis apdorojimas — jūsų žymėjimas ir bet kas jame privatu niekada nepalieka jūsų naršyklės.

Kaip naudoti

Įklijuokite savo HTML į įvesties langelį arba spustelėkite „Įkelti pavyzdį“, kad išbandytumėte pavyzdinį kodą.
Spustelėkite „Suglaudinti“, kad jį suspaustumėte, arba „Formatuoti“, kad sutvarkytumėte su 2 tarpų įtrauka.
Peržiūrėkite pranešimą po langeliais — glaudinimo režimas rodo dydžio sumažėjimą; jei HTML negalima analizuoti, vietoj sugadintos išvesties matysite tikslią klaidą.
Spustelėkite „Kopijuoti“, kad gautumėte rezultatą.

Pavyzdys

Įvestis

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <!-- greeting -->
    <p class="greeting">
      Hello, world!
    </p>
  </body>
</html>

Išvestis

<!doctype html><html><head><title>Example</title></head><body><p class="greeting">Hello, world!</p></body></html>

Komentarai, įtraukos ir eilučių lūžiai pašalinami; doctype sutrumpinamas. Matomas puslapis atvaizduojamas identiškai.

Praktiniai patarimai

Glaudinkite tiesiai prieš diegimą, ne kūrimo metu — laikykite skaitomą HTML versijų kontrolėje ir glaudinkite tik gaminio išvestį.
Jei puslapis po glaudinimo veikia keistai, patikrinkite, ar nėra JavaScript, kuris priklauso nuo tikslių tarpų teksto mazguose (retai, bet pasitaiko su kai kuriais senesniais valdikliais).
Gyvos svetainės suglaudinto HTML formatavimas yra greitas būdas apžiūrėti jos struktūrą prieš rašant duomenų rinkėją ar sprendžiant išdėstymo problemas.
Derinkite su žemiau esančiais CSS ir JS glaudinimo įrankiais, jei jūsų kūrimo procesas laiko stilius ir skriptus atskiruose failuose.

Kur tai tinka realiose darbo eigose

Statiniai puslapiai, el. laiškų šablonai ir nukreipimo puslapiai, sukurti rankiniu būdu, dažnai skelbiami su ta pačia įtrauka ir komentarais, naudotais kūrimo metu. Glaudinimas prieš diegimą sutaupo realų, nors ir nedidelį, perdavimo svorio kiekį — o el. laiškų HTML atveju konkrečiai simbolių skaičius kartais veikia „Gmail“ apkarpymo ribą, todėl mažesnis žymėjimas turi funkcinę naudą, ne tik greitį.

Formatavimo kryptis lygiai taip pat naudinga atvirkščiai: suglaudinto puslapio įklijavimas iš view-source ir jo performatavimas dažnai yra greičiausias būdas suprasti konkurento nukreipimo puslapio struktūrą ar išspręsti trečiosios šalies įterptinio elemento problemą.

→ CSS minifikatorius · JS suspaustuvas

Įprasti naudojimo atvejai

Baitų nubraukimas nuo statinio nukreipimo puslapio ar el. laiško šablono prieš jį paskelbiant.
Suglaudinto HTML fragmento, paimto iš view-source, performatavimas, siekiant suprasti jo struktūrą.
HTML, įklijuoto iš WYSIWYG redaktoriaus ar TVS eksporto, sutvarkymas, nes jis dažnai turi perteklinių tarpų.
Greitas patikrinimas, ar rankiniu būdu rašytas HTML fragmentas yra taisyklingas, nes analizavimo klaida atsiranda kaip aiški paklaida.

Dažniausiai užduodami klausimai

Ar mano HTML kur nors įkeliamas?

Ne. Ir glaudinimas, ir formatavimas vyksta vietoje jūsų naršyklėje naudojant JavaScript. Niekas, ką įklijuojate, nesiunčiama į serverį, todėl saugu naudoti su vidinėmis šablonais ar dar nepaskelbtais puslapiais.

Ar glaudinimas sugadins mano puslapį?

Neturėtų — įrankis naudoja tikrą HTML analizatorių (html-minifier-terser), kuris supranta žymų struktūrą, todėl išsaugo tarpams jautrius elementus, pvz., <pre> ir <textarea>, ir teisingai nesujungs atributų. Visada patikrinkite svarbius puslapius po glaudinimo, ypač jei pasikliaujate neįprastais įterptiniais skriptais.

Ar jis taip pat suglaudina CSS ir JavaScript HTML viduje?

Taip. Įterptiniai <style> ir <script> blokai suglaudinami vietoje, naudojant tuos pačius variklius kaip ir specializuoti CSS bei JS glaudinimo įrankiai, todėl jų nereikia ištraukti rankiniu būdu.

Kiek paprastai sumažėja HTML dydis?

Tai priklauso nuo to, kiek tarpų, komentarų ir formatavimo turėjo originalas — rankiniu būdu rašytas HTML su daug įtraukų ir komentarų dažnai sumažėja 20–40 %. Karkasų sugeneruotas HTML, kuris jau yra kompaktiškas, sutaupys mažiau.

Ar galiu suglaudintą HTML paversti atgal į skaitomą formatą?

Taip — įklijuokite suglaudintą HTML ir spustelėkite „Formatuoti“ vietoj „Suglaudinti“, kad gautumėte tinkamai suformatuotą, su įtrauka pateiktą skaitomą kodą.

HTML glaudinimo ir formatavimo įrankis