HTML goʻzallashtirish qanday ishlaydi
Goʻzallashtiruvchi markupingizni teg-teg oʻqiydi, har bir element qanchalik chuqur joylashganini kuzatadi va izchil chekinish bilan qayta chiqaradi. U sahifaning renderlaydigan narsasini hech qachon oʻzgartirmaydi — faqat manba kodning qanday joylashganini.
- Teglarni tahlil qilish. Kutubxona kirishingizni tokenlar oqimiga skanerlaydi: ochiluvchi teglar, yopiluvchi teglar, matn tarkibi, izohlar va script hamda style bloklari tarkibi. Qoʻshtirnoqdagi atribut qiymatlari va pre hamda textarea elementlari tanalari bitta birlik sifatida qaraladi, shuning uchun ulardagi boʻsh joy buzilmaydi.
- Joylashishni kuzatish. Tokenlar oqimini aylanib oʻtayotganda goʻzallashtiruvchi joriy chegara darajasini saqlaydi. Oʻzini-oʻzi yopmagan har bir ochiluvchi teg darajani bir qadam chuqurlashtiradi; har bir mos yopiluvchi teg uni qaytaradi. Bu chuqurlik har bir qaytarilgan qator oldida nechta chegara birligi boʻlishini belgilaydi.
- Parametrlarni qoʻllash. Chegara tanlovi (2 boʻsh joy, 4 boʻsh joy yoki tab) bir darajaning kengligini belgilaydi. Ustunda oʻrash qiymati atributlar yoki matnning uzun qatorlarini tanlangan ustundan oshganda kesib tashlaydi. Boʻsh qator cheklovi uzun boʻsh qator qatorlarini tanlagan chegarangizga kamaytiradi.
- Markupni qayta chiqarish. Nihoyat formatlash vositasi teglarni u hisoblagan chegara va qator uzilishlari bilan qayta chop etadi. Inline formatlash yoqilgan boʻlsa, har bir style bloki tarkibi CSS formatlagichdan, har bir script bloki esa JS formatlagichdan oʻtadi, shuning uchun oʻrnatilgan kod atrofidagi markup bilan hizalanadi.
Nima uchun HTMLni goʻzallashtirish kerak
- Kichraytirilgan sahifalarni oʻqish. Ishlab chiqarish HTML bayt tejash uchun qator uzilishlari olib tashlanib yuboriladi. Goʻzallashtirish tuzilmani tiklaydi, shuning uchun qidirayotgan boʻlimingizni topa olasiz, yetishmayotgan yopiluvchi tegni aniqlaysiz va hujjatning haqiqatan qanday joylashganini kuzatasiz.
- Izchil boʻlmagan shablonlarni tartibga solish. Bir necha kishi tahrir qilgan markup aralash chekinish va teg joylashuviga oʻtib ketadi. Goʻzallashtiruvchi orqali bitta oʻtish butun faylni normallashtiradi, shuning uchun keyingi commit qayta formatlangan boʻsh joy oʻrniga siz qilgan oʻzgarishni koʻrsatadi.
- Bu vosita sahifangizni sekinlashtirmaydi. Koʻpgina onlayn formatlash vositalari sahifa ochilganida butun kutubxonani yuklaydi. Bu vosita js-beautify-ni faqat Goʻzallashtirish tugmasini bosganda yoki Jonli rejimni yoqqanda lazy-load qiladi, shuning uchun sahifani ochish bir necha yuz oʻrniga bir necha kilobaytga tushadi va sahifa tez qoladi.
- Hech narsa brauzeringizni tark etmaydi. Hamma narsa qurilmangizda ishlaydi. Markupingiz hech qachon serverga yuklanmaydi; bu sahifa mijozga tegishli boʻlsa, ichki URL-larni oʻz ichiga olsa yoki siz imzolagan maxfiylik shartnomasi ostida boʻlsa ahamiyatlidir.
Keng tarqalgan qoʻllanishlar
HTML goʻzallashtirish kimdir oʻqish uchun yozilmagan markupni oʻqishi kerak boʻlganda doimo paydo boʻladi.
- Jonli sahifani tekshirish: mahalliy ravishda takrorlab boʻlmaydigan tartib xatosi ortidagi markupni topish uchun View Source-dan olingan kichraytirilgan manbani joylashtiring.
- CMS natijasini tozalash: sahifa yaratuvchisi tomonidan bitta qatorda eksport qilingan shablonni repoga qayta kiritishdan oldin qayta formatlang.
- Kirish imkoniyati va SEO koʻrib chiqishlari: sarlavha tartibi, landmark tuzilmasi va alt atributlarini haqiqiy DOM ga nisbatan tekshirish uchun hujjatni kengaytiring.
Ishlangan misol
Kichraytirilgan snippetni oling: <div><p>hi</p><span>x</span></div>. Chegara 2 boʻsh joy qilib oʻrnatilgan holda yuqoriga joylashtiring, soʻng Goʻzallashtirish tugmasini bosing. Oʻqilishi mumkin boʻlgan blokni qaytarib olasiz: <div> oʻz qatorida, <p>hi</p> va <span>x</span> har biri bir daraja chegaralangan va mos </div> ostida hizalangan. Chegarani Tablarga almashtiring va har bir daraja ikki boʻsh joydan tab belgisiga oʻtadi. <style>a{color:red}</style> bloki qoʻshing, "Inline CSS va JS-ni ham formatlash"ni yoqing va qoida bitta qatorda qolish oʻrniga oʻz chegaralangan qatorlariga kengayadi.
FAQ
Bu brauzerimda ishlaydimi?
Ha. js-beautify kutubxonasi Goʻzallashtirish tugmasini birinchi marta bosganda yoki Jonli rejimni yoqqanda lazy-load qilinadi, soʻng keshlanadi. Markupingiz sahifadan hech qachon chiqmaydi — server bilan aloqa yoki yuklanish yoʻq.
Goʻzallashtirish sahifamning qanday renderlanishini oʻzgartiradimiB?
Yoʻq. Goʻzallashtiruvchi faqat teglar orasidagi boʻsh joylar va qator uzilishlarini qoʻshadi va olib tashlaydi. Brauzer sahifani qurganda bu boʻsh joylarni eʼtiborsiz qoldiradi, shuning uchun renderlangan natija bir xil. Diqqat qaratish kerak boʻlgan yagona narsa — formatlash vositasi ataylab tegmay qoldiradigan pre, textarea yoki inline elementlar ichidagi boʻsh joyga sezgir mazmundir.
Inline CSS va JS tugmasi nima qiladi?
Oʻchirilgan holda style va script bloklari tarkibi aynan joylashtirilgandek qoladi. Yoqilganida har bir style bloki ichidagi CSS CSS formatlagichdan oʻtadi, har bir script bloki ichidagi JavaScript esa JS formatlagichdan oʻtadi, shuning uchun oʻrnatilgan kod atrofidagi markup bilan hizalanib chegaralanadi.
"Ustunda oʻrash" nima qiladi?
Koʻp atributli teg yoki uzun matn qatori bir necha qatorga boʻlinish kerak boʻlgan qator uzunligini belgilaydi. Uzunligidan qatʼi nazar har bir elementni bitta qatorda ushlab turish uchun 0 qoldiring. 80 yoki 120 qilib qoʻying va formatlash vositasi oʻsha ustundan oshgan hamma narsani oʻraydi, bu keng elementlarni tor muharrirda oʻqilishi mumkin qilib saqlaydi.
Brauzer tomonida HTML goʻzallashtirish sizga qurish bosqichi yoki yuklanishsiz oʻqilishi mumkin boʻlgan markupni beradi. Kichraytirilgan yoki tartibsiz sahifani joylashtiring, chegara va oʻrash kengligini tanlang, inline CSS va JS-ni qayta formatlash yoki formatlamaslikni hal qiling, soʻng natijani nusxalang yoki yuklab oling. Hech narsa qurilmangizni tark etmaydi, hisob yoʻq, kutubxona esa faqat soʻragan paytingizda yuklanadi — shuning uchun bu sahifani ochish bir megabayt emas, bir necha kilobaytga tushadi.