0xDEADBEEF

[RSS]
««« »»»

Minimalistické zvýrazňování syntaxe

10. 4. 2019

Nastal čas, abych tady na DE­AD­BEEF přidal zvý­raz­ňo­vání syn­taxe. To samo o sobě není nic pře­vrat­ného, exis­tuje spousta kniho­ven a ná­strojů, pro ma­jo­ritní blogo-soft­ware často ve formě jed­no­du­chého plu­ginu. Já tu ale po­cho­duji podle vlast­ního rytmu a mám spe­ci­fické pre­fe­rence. Jedním z nich je mi­ni­ma­li­zace všechno ne­dů­le­ži­tého. Proto as­cii­blog ge­ne­ruje sta­tické html sou­bory téměř bez ja­vascriptu a je na­psaný ve Scale tak, aby pra­co­val co nej­rych­leji.

Jak tedy na zvý­raz­ňo­vání syn­taxe s tímto ome­ze­ním? Na výběr je ze dvou pří­stupů: Buď se pro­vede na ser­veru nebo na kli­entu. Zvý­raz­nění na ser­veru ne­po­tře­buje ja­vascript, ale na druhou stranu musí do HTML vložit <span> ele­menty a to na­bobtná ge­ne­ro­vané stránky. Zvý­raz­ňo­vání na kli­entu po­tře­buje ja­vascript a musí stáh­nout knihovny pro par­so­vání kaž­dého po­u­ži­tého jazyka a jeho zvý­raz­ňo­vání. To taky vede ke zby­tečně pře­ne­se­ným datům a ty se snažím za každou cenu mi­ni­ma­li­zo­vat.

Exis­tuje ještě jedna va­ri­anta: Par­so­vání pro­vedu na ser­veru a do stránky vložím jen in­for­mace co se má jak obar­vit pro ma­lič­kou ja­vascrip­to­vou smyčku, která nemusí nic vědět o syn­taxi žád­ného jazyka. Tato in­for­mace je ve své pod­statě polem trojic hodnot (vzdá­le­nost od konce po­sled­ního zvý­raz­nění, délka zvý­raz­nění, barva) a je ho třeba kom­paktně re­pre­zen­to­vat tak, aby se dalo snadno de­kó­do­vat. Kom­pli­ko­va­nější schéma může ušet­řit pár bajtů, ale bude po­tře­bo­vat delší JS logiku, která pře­váží všechny zisky. V ASCII ta­bulce leží ne­pře­ru­šo­vaná sek­vence 87 znaků, které se můžou na­chá­zet v HTML data atri­butu bez es­ca­po­vání a ty se hodí pro jakési base87 kó­do­vání.

Ja­vascrip­tová smyčka je mi­ni­mální (jen 405 bajtů), každý obar­vený seg­ment po­tře­buje pouhé 3 bajty in­for­mace, kdežto <span class=hl1></span> zabere 23 bajtů + (120 bajtů pro CSS styl). Když se ve stránce na­chází víc jak ~15 obar­ve­ných ob­lastí, hyb­ridní pří­stup si vyžádá nejméně místa. (Je jasné, že pří­četní je­dinci by se ničím ta­ko­vým vůbec ne­za­bý­vali a plácli by tam první JS kni­hovnu, kterou na ně vy­klopí google, ale jak jsem řekl, tady po­cho­du­jeme podle spe­ci­fic­kého rytmu & po­čí­táme bajty.)

Na ničem z toho ale ne­zá­leží, pro­tože server ser­ví­ruje do­ku­menty kom­pri­mo­vaně.

Hlavní stránka DE­AD­BEEFu ob­sa­huje 203 zvý­raz­ně­ných ob­lastí. Zvý­raz­ňo­vání přes na ser­veru ge­ne­ro­vané <span> ele­menty navýší její ve­li­kost o 4.8 kB, hyb­ridní JS by při­dalo jen čtvr­tinu tohoto. Ale jak to vypadá pro kom­pri­mo­vané stránky? Takhle:

* bez syn­taxe se syn­taxí rozdíl
pla­in­text 30069 B 34869 B 4800 B
gzip 11604 B 11998 B 394 B
brotli 10261 B 10544 B 283 B

S gzipem je rozdíl mezi strán­kou bez ja­ké­ho­koli zvý­raz­nění syn­taxe a zvý­raz­ně­ním na ser­veru jen 400 bajtů, přesně tolik, kolik by zabral JS zvý­raz­ňo­vač. Ne­u­šet­řil bych tedy nic a vy­ža­do­valo by to ja­vascript. Ta nej­jed­no­dušší cesta je zá­ro­veň tou nej­lepší. Kom­prese dělá přesně to, co bych dělal ručně – najde často opa­ko­vané sek­vence znaků a na­hradí je krat­ším zá­stup­ným sym­bo­lem. Jen to nedělá ad-hoc.

To je taky důvod, proč mi­ni­fi­kace ja­vascrip­to­vých sou­borů, která zkrátí jména pro­měn­ných, je často k ničemu. Kom­prese udělá to samé, jenom lépe a sys­te­ma­tič­těji. Místo toho se vy­platí zre­du­ko­vat počet růz­ných tokenů, jako jsou zby­tečné mezery, zá­vorky, střed­níky a po­dobné.

píše k47 (@kaja47, k47)