HTML kodo minimizavimas

digital • 0 • 3677 • prieš. 8 m.

Keletas HTML5 stadarto naujovių [1]:

Atributo reikšmė gali būti neatskirta kabutėmis, jei joje nėra šių simbolių:
1. U+0020, U+0009, U+000A, U+000C, U+000D (tarpo simbolių),
2. U+0022 (kabučių („"“)),
3. U+0022 (apostrofo („'“)),
4. U+003D (lygybės („=“)),
5. U+003C (daugiau ženklo („<“)),
6. U+003E (mažiau ženklo (>)),
7. U+0060 (gravio („`“)).
Pavyzdžiui: <input value=yes>
Kai kurios žymos) gali būti praleistos (pradžios žymė negali būti praleista, jei ji turi atributų):
1. html pradžios žymė gali būti praleista jei pirmas elementas viduje nėra komentaras,
2. html pabaigos žymė gali būti praleista jei pirmas elementas po jos nėra komentaras,
3. head pradžios žymė gali būti praleista jei ji yra tuščia arba pirmiausia viduje yra elementas,
4. head pabaigos žymė gali būti praleista jei po jos seka ne tarpas ir ne komentaras,
5. body pradžios žymė gali būti praleista jei ji yra tuščia, po to seka ne tarpas ir ne komentaras bei pirmasis elementas nėra meta, link, script, style ar template,
6. body pabaigos žymė gali būti praleista jei pirmas elementas po jos nėra komentaras,
7. li pabaigos žymė gali būti praleista jei po jos seka kitas li elementas arba tėviniame elemente daugiau nebėra turinio,
8. dt pabaigos žymė gali būti praleista jei po jos seka dt arba dd elementas,
9. dd pabaigos žymė gali būti praleista jei po jos seka dd arba dt elementas arba tėviniame elemente daugiau nebėra turinio,
10. p pabaigos žymė gali būti praleista jei po jos seka address, article, aside, blockqoute, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, nav, ol, p, pre, section, table arba ul elementas arba tėviniame elemente daugiau nebėra turinio ir tėvinis elementas nėra a,
11. rb pabaigos žymė gali būti praleista jei po jos seka rb, rt, rtc arba rp elementas arba tėviniame elemente daugiau nebėra turinio,
12. rt pabaigos žymė gali būti praleista jei po jos seka rb, rt, rtc arba rp elementas arba tėviniame elemente daugiau nebėra turinio,
13. rtc pabaigos žymė gali būti praleista jei po jos seka rb, rtc arba rp elementas arba tėviniame elemente daugiau nebėra turinio,
14. rp pabaigos žymė gali būti praleista jei po jos seka rb, rt, rtc arba rp elementas arba tėviniame elemente daugiau nebėra turinio,
15. optgroup pabaigos žymė gali būti praleista jei po jos seka kitas optgroup elementas arba tėviniame elemente daugiau nebėra turinio,
16. option pabaigos žymė gali būti praleista jei po jos seka option arba optgroup elementas arba tėviniame elemente daugiau nebėra turinio,
17. colgroup pradžios žymė gali būti praleista jei pirmas elementas viduje yra col ir jei prieš jį nėra kito colgroup elemento, kurio pabaigos žymė buvo praleista,
18. colgroup pabaigos žymė gali būti praleista jei po jos seka ne tarpas ir ne komentaras,
19. thead pabaigos žymė gali būti praleista jei po jos seka tbody arba tfoot elementas,
20. tbody pradžios žymė gali būti praleista jei pirmas elementas viduje yra tr ir jei prieš jį nėra tbody, thead arba tfoot elemento, kurio pabaigos žymė buvo praleista,
21. tbody pabaigos žymė gali būti praleista jei po jos seka tbody arba tfoot elementas arba tėviniame elemente daugiau nebėra turinio,
22. tfoot pabaigos žymė gali būti praleista jei po jos seka tbody elementas arba tėviniame elemente daugiau nebėra turinio,
23. tr pabaigos žymė gali būti praleista jei po jos seka kitas tr elementas arba tėviniame elemente daugiau nebėra turinio,
24. td pabaigos žymė gali būti praleista jei po jos seka kitas td arba th elementas arba tėviniame elemente daugiau nebėra turinio,
25. th pabaigos žymė gali būti praleista jei po jos seka kitas td arba th elementas arba tėviniame elemente daugiau nebėra turinio.

Pavyzdžiui toks HTML kodo fragmentas:

<!DOCTYPE html>
 <html>
   <head>
     <title>HTML kodo minimizavimas</title>
   <head>
   <body>
     <header><h1>HTML kodo minimizavimas</h1></header>
     <p>Pavyzdys</p>
     <nav>
       <ul>
     <li><a href="#vienas">Vienas</a></li>
     <li><a href="#du">Du</a></li>
     <li><a href="#trys">Trys</a></li>
       </ul>
     </nav>
   </body>
 </html>

gali būti minimizuotas iki:

<!DOCTYPE html>
  <title>HTML kodo minimizavimas</title>
  <header><h1>HTML kodo minimizavimas</h1></header>
  <p>Pavyzdys
  <nav>
    <ul>
      <li><a href=#vienas>Vienas</a>
      <li><a href=#du>Du</a>
      <li><a href=#trys>Trys</a>
    </ul>
  </nav>

o vėliau dar daugiau, išmetant nereikalingus tarpus, Tab ir naujos eilutės (Enter) simbolius:

<!DOCTYPE html><title>HTML kodo minimizavimas</title><header><h1>HTML kodo minimizavimas</h1></header><p>Pavyzdys<nav><ul><li><a href=#vienas>Vienas</a><li><a href=#du>Du</a><li><a href=#trys>Trys</a></ul></nav>

tokio optimizavimo metu sutaupoma: 142 simboliai (40.23%). Vienas iš įrankių galinčių tai atlikti: https://kangax.github.io/html-minifier/ [2], beje, minimizuotas kodas išlieka pilnai validus (https://validator.w3.org/) [3]

Išvada

Jei norite sutaupyti resursų ir pasiekti optimizavimo aukštumas, galima galvoti apie HTML kodo minimizavimą, ypač kai HTML5 standartas tai leidžia, tačiau, jei norite likti 100% palaikomi, lengviau skaitomi ir nepriklausomi nuo versij7, verta rašyti pilną kodą.