Front End developer intervyusida eng ko'p beriladigan 30 ta savol

id — bitta HTML elementning noyob identifikatori. class esa bir nechta elementga qo'llanishi mumkin bo'lgan, qayta ishlatiladigan identifikator.

Bitta elementga CSS yoki JavaScript orqali murojaat qilish kerak bo'lganda id'dan foydalanasiz. DOM elementlari guruhiga murojaat qilish kerak bo'lganda esa class'dan foydalanasiz.

CSS'da:

• #id shu id'ga ega muayyan elementni tanlaydi.
• .class shu class'ga ega barcha elementlarni tanlaydi.

CSS box model DOM'dagi elementlar uchun hosil qilinadigan to'rtburchak box'larni tavsiflaydi. Box model quyidagi qatlamlardan tashkil topgan:

1. Content: matn va rasmlar ko'rinadigan eng ichki qism.
2. Padding: content va border o'rtasidagi bo'shliq.
3. Border: padding'ning tashqi chegarasi bo'lib, elementni o'rab turadi.
4. Margin: border'dan tashqaridagi bo'shliq; u elementni boshqa elementlardan ajratib turadi.

Har bir qatlamni alohida boshqarib, foydalanuvchi interfeysidagi har bir elementning ko'rinishini belgilashingiz mumkin.

CSS'da inline, inline-block va block elementlar o'rtasidagi farq ularning veb-sahifada qanday render qilinishida:

• Inline: inline elementlarning o'z kengligi yoki balandligi bo'lmaydi: ular yangi qatordan boshlanmaydi va faqat kerakli kenglikni (content'iga qarab) egallaydi. Misollar: <span>, <a>.
• Inline-block: inline elementlar kabi bu DOM elementlari ham yangi qatordan boshlanmaydi, biroq ularga balandlik va kenglik berish mumkin. Misol: <img>.
• Block: elementlar yangi qatordan boshlanadi va standart holatda mavjud butun kenglikni egallaydi. Ularning kengligi va balandligini o'zingiz belgilashingiz mumkin. Misollar: <div>, <p>.

Faqat HTML tomonidan:

• Semantic HTML'dan foydalaning: sahifaga mazmunli tuzilma berish uchun <header>, <nav>, <main>, <article>, <section> va <footer> kabi tag'lardan foydalaning.
• Sarlavhalarning to'g'ri ierarxiyasi: sarlavhalardan (<h1>'dan <h6>'gacha) to'g'ri foydalaning: <h1> har bir sahifada asosiy sarlavha uchun faqat bir marta ishlatilsin, undan keyin <h2>, <h3> va hokazo kelsin.
• Meta tag'lar: veb-sayt haqida metadata berish uchun description, keywords va viewport kabi tegishli <meta> tag'larini qo'shing.
• Rasmlarda alt attribute'lari: rasmlar mazmunini tavsiflash uchun alt attribute'laridan foydalaning; bu accessibility'ni va qidiruv tizimlarining sahifani tushunishini yaxshilaydi.

Bundan tashqari:

• Internal linking: veb-saytingizdagi kontentni o'zaro bog'lash uchun ichki havolalardan foydalaning; bu qidiruv tizimlariga saytni crawl qilish va uning tuzilmasini tushunishga yordam beradi.
• Mobil qurilmalarga mos dizayn: saytingiz va CSS kodingizni mobile-first yondashuvi bilan yozing. User experience'ni va qidiruv tizimlaridagi reytingni yaxshilash uchun sayt responsive va mobil qurilmalarga mos bo'lishini ta'minlang.
• Tez yuklanish: sahifaning yuklanish tezligini oshirish uchun rasmlarni optimallashtirishga, samarali kod yozishga va keshlashdan foydalanishga harakat qiling. Sahifa qancha tez yuklansa, SERP'dagi boshqa o'xshash natijalarga nisbatan ustunligi shuncha katta bo'ladi.

Document Object Model (DOM) — veb-hujjatlar uchun API. U HTML veb-sahifaning tuzilmasini node'lar daraxti ko'rinishida ifodalaydi, bunda har bir node hujjatning biror qismiga (ya'ni element, attribute yoki matnga) mos keladi.

Elementga event listener qo'shish uchun avval document obyektining ko'plab metodlaridan biri (masalan, getElementById va h.k.) orqali o'sha elementni “olish”, so'ng olingan obyektning addEventListener metodidan foydalanish kerak.

Bu metod event nomini (masalan, ‘click’, ‘keyup’, ‘mouseup’ va h.k.), event handler funksiyasini va ixtiyoriy ravishda event capturing bosqichida ushlanishi kerakligini bildiruvchi boolean qiymatni qabul qiladi.

JavaScript'da “undefined” — yangi o'zgaruvchilar oladigan standart qiymat; u o'zgaruvchi e'lon qilinganini, lekin unga hali hech qanday qiymat berilmaganini bildiradi.

“null” esa aslida “qiymat yo'q” yoki “obyekt yo'q” degan ma'noni bildiruvchi qiymat bo'lib, uni o'zgaruvchiga dasturchi ataylab beradi.

Cookie'lar — veb-brauzerlarda saqlanadigan kichik ma'lumot bo'laklari. Ular asosan HTTP so'rovlari orasida ma'lumotni saqlab qolish uchun ishlatiladi, masalan, foydalanuvchi authentication'i, session management va foydalanuvchi xatti-harakatlarini kuzatish uchun

sessionStorage esa vaqtinchalik saqlash uchun mo'ljallangan va undan faqat bitta session doirasida (ya'ni brauzer oynasi yoki tab'i ochiq turgan vaqtda) foydalanish mumkin. sessionStorage'da saqlangan ma'lumotlar brauzer oynasi yopilganda yo'qoladi.

Va nihoyat, localStorage sessionStorage'ga o'xshaydi, lekin brauzer oynasi yoki tab'i yopilib, qayta ochilganda ham saqlanib qoladi. U veb-ilovalar uchun uzoq muddatli saqlashni ta'minlaydi. Ular cookie'larga juda o'xshaydi, biroq localStorage'ning hajm chegarasi cookie'larnikiga qaraganda ancha katta, shu sababli katta dataset'larni saqlashda u ancha yaxshi muqobil hisoblanadi.

Brauzerda veb-sahifani render qilish jarayoni bir necha bosqichdan iborat:

1. HTML'ni parse qilish.
2. CSS'ni parse qilish va uslublarni qo'llash.
3. Har bir elementning sahifa layout'idagi o'rnini hisoblash.
4. Haqiqiy piksellarni ekranga chizish va shu bilan birga ularni qatlamlarga ajratish.
5. Veb-saytni ekranda render qilish uchun barcha qatlamlarni bir-biriga birlashtirish. Bu bosqichda z-index qiymatlari, opacity qiymatlari va boshqalar hisobga olinadi.
6. JavaScript kodini bajarish.
7. Asinxron resurslarni yuklash.

Media query'lar — CSS'dagi imkoniyat bo'lib, Front End developer'larga qurilma yoki viewport'ning turli xususiyatlariga qarab hujjatga turli uslublarni qo'llash imkonini beradi. Masalan, qurilmaning kengligi, balandligi, orientatsiyasi yoki turiga qarab turli uslublar belgilashingiz mumkin.

Media query'lar orqali biz responsive design'ga erishamiz: uslublar turli ekran o'lchamlari va qurilma imkoniyatlariga moslashadi.

Ikkalasi ham nisbiy o'lchov birliklari, biroq ular turli narsalarga nisbatan olinadi:

1. “em” birliklari parent elementning shrift o'lchamiga nisbatan olinadi. Ya'ni parent elementning shrift o'lchami 20px bo'lsa, shrift o'lchamini “2em” qilib belgilash 40px'ga teng bo'ladi.
2. “rem” birliklari — “root em”, ya'ni ular veb-sahifaning root elementiga (“<html>” elementiga) nisbatan olinadi.

Flexbox layout yaratish uchun 2 ta asosiy qadamni bajarishingiz kerak:

1. Container elementga “display:flexbox” CSS property'sini qo'llab, uni sozlang.
2. Container ichidagi har bir element uchun flexbox property'larini sozlang (“flex:1” kabi biror narsa kifoya qiladi).

CSS specificity bir-birini qoplaydigan uslublar mavjud bo'lganda (masalan, bir nechta qoida bitta elementning font-size'ini belgilaganda) muayyan elementga qaysi uslublar to'plami qo'llanishini aniqlash uchun ishlatiladi.

U quyidagi ustuvorlik tartibini qo'llash orqali ishlaydi:

1. Birinchidan, har qanday inline style boshqa barcha uslublarni override qiladi.
2. Ikkinchidan, ID'ga asoslangan har qanday uslub inline style'lardan tashqari hamma narsani override qiladi.
3. Uchinchidan, class'ga asoslangan selector'lar inline va ID'ga asoslangan uslublardan tashqari hamma narsani override qiladi.
4. Nihoyat, type selector'larni boshqa har qanday turdagi selector'lar override qila oladi.

Grid layout yaratish uchun avval o'rab turuvchi elementga “display:grid” property'sini belgilashingiz, so'ng “grid-template-rows” va “grid-template-columns” property'lari yordamida grid tuzilmasini aniqlashingiz kerak.

Endi elementlarni grid container ichiga joylashtiring va ularga “grid-column” yoki “grid-row” property'larini belgilang.

Funksiya boshqa funksiya ichida aniqlanganda, u tashqi funksiya bajarilib bo'lganidan keyin ham tashqi funksiyaning o'zgaruvchilari va parametrlariga kirish imkoniyatini saqlab qoladi. Ichki funksiya bilan uning tashqi funksiya ichidagi scope'i o'rtasidagi ana shu bog'lanish “closure” deb ataladi

Ulardan faqat ichki funksiya kira oladigan private o'zgaruvchilar yaratish uchun foydalanishingiz mumkin; hatto ular yordamida faqat o'zlari uchun global ravishda mavjud bo'lgan boy kontekstga kira oladigan murakkab obyektlar ham yaratishingiz mumkin.

Event delegation — event'ni haqiqatda ishga tushiradigan elementlarni o'z ichiga olgan parent element doirasida muayyan event uchun event handler belgilash usuli.

Event ishga tushganda, u parent'ning event handler'iga yetib borguncha DOM ierarxiyasi bo'ylab yuqoriga bubble qiladi.

Promise'lar — asinxron chaqiruvning yakuniy bajarilishini ifodalaydigan JavaScript obyektlari. Promise'lar orqali asinxron chaqiruvning muvaffaqiyatli yoki muvaffaqiyatsiz bajarilishini boshqarishingiz mumkin.

Asset turiga qarab yuklanish vaqtini yaxshilashning turli usullari bor, masalan:

• CSS va JavaScript fayllari minify qilinishi va siqilishi kerak.
• Rasmlarni saqlash paytida yoki JPEGOptim yoxud ImageOptim kabi maxsus dasturlar yordamida siqish mumkin. Faqat bu jarayonda sifat yo'qolmasligiga ishonch hosil qiling.

Service worker'lar — veb-ilovaning fonida, veb-sahifaning main thread'idan alohida ishlaydigan skriptlar bo'lib, ular oflayn keshlash, push notification'lar va background synchronization kabi imkoniyatlarni taqdim etadi.

Same-origin policy — brauzerlardagi xavfsizlik mexanizmi bo'lib, u veb-saytning boshqa saytdagi ma'lumotlarga kirishining (masalan, skriptni import qilish yoki API'ga so'rov yuborish) oldini olish uchun mo'ljallangan.

Bu policy foydalanuvchilarni boshqa veb-saytlardan cookie'lar, local storage yoki kontent kabi maxfiy ma'lumotlarni o'g'irlashga urinadigan zararli skriptlardan himoya qilishga yordam beradi

Bu cheklovni chetlab o'tish usullaridan biri — CORS (Cross-Origin Resource Sharing). Server qaysi domendan so'rovlar qabul qila olishini ko'rsatsa va client ilova to'g'ri header'larni yuborsa, ular bir domenda bo'lmasa ham bir-biri bilan o'zaro ishlay oladi.

Frontend dasturlash tillaridagi o'zgaruvchilar kabi CSS o'zgaruvchilarini ham dasturchilar belgilashi va butun CSS stylesheet'lari bo'ylab qayta ishlatishi mumkin. Ular veb-sayt kodining hamma joyida ishlatiladigan global qiymatlarni bir joyga jamlash uchun juda qulay.

Ulardan CSS freymvorklari ham ranglar qiymati kabi konstantalarni belgilash uchun keng foydalanadi (masalan, “black” “000” o'rniga “#222” bo'lishi.)

CSS qoidalarini CSS fayllardan olib tashlang va ularni veb-saytingizning asosiy “<head>” elementiga inline qilib joylashtiring.

Shunday qilsangiz, o'sha kodni yuklash uchun ketadigan vaqtni yo'q qilasiz, chunki u asosiy fayl yuklanishi bilanoq darhol yuklanadi. Qolgan qismi, ya'ni critical bo'lmagan qoidalar asosiy resurs (asosiy CSS fayl) yuklangandan keyin yuklanishi mumkin.

Event loop — JavaScript'ning asosiy tushunchalaridan biri bo'lib, u asinxron kodni bajarish imkonini beradi.

U quyidagicha ishlaydi:

1. Call Stack: JavaScript kodingizni call stack yordamida bitta thread'da bajaradi: funksiya chaqiruvlari stack'ka qo'shiladi va birma-bir bajariladi. Funksiya tugagach, u stack'dan olib tashlanadi.
2. Async chaqiruvlar: asinxron amallar uchun JavaScript brauzer taqdim etadigan Web API'lardan foydalanadi. Bu amallar call stack'dan chiqarib yuboriladi va alohida qayta ishlanadi.
3. Tasks Queue: asinxron chaqiruv tugagach, uning callback'i task queue'ga joylashtiriladi.
4. Event Loop: event loop call stack va task queue'ni doimiy tekshirib turadi. Agar call stack bo'sh bo'lsa, u queue'dagi birinchi task'ni olib, bajarish uchun call stack'ka joylaydi. Bu sikl cheksiz takrorlanadi.

JavaScript dasturchilarga asinxron chaqiruvlarni boshqarishning 4 ta asosiy usulini taqdim etadi. Oxir-oqibat natija har doim bir xil bo'ladi, lekin kodning yakuniy tuzilmasi va u haqda fikr yuritish usuli sezilarli darajada farq qiladi.

• Callback'lar. Ular asinxron amal tugashi bilanoq to'g'ridan-to'g'ri chaqiriladigan funksiyani belgilash imkonini beradi.
• Promise'lar. Promise'lar asinxron amalning yakuniy bajarilishini ifodalaydi va amal muvaffaqiyatli yoki muvaffaqiyatsiz tugaganda chaqiriladigan callback'larni belgilash uchun soddaroq va intuitivroq sintaksisni taqdim etadi.
• Async/Await. Promise sintaksisining so'nggi evolyutsiyasi. Bu asosan syntactic sugar, lekin u asinxron kodni sinxron koddek ko'rsatadi, bu esa o'z navbatida uni o'qish va tushunishni ancha osonlashtiradi.
• Event listener'lar. Event listener'lar — muayyan event'lar yuz berganda (odatda foydalanuvchi harakatlari tufayli) ishga tushadigan callback'lar.

React yoki Vue.js kabi to'liq freymvork yoki kutubxonasiz state management'ni to'g'ri yo'lga qo'yish oson ish emas.

Tilning o'zi taqdim etadigan ba'zi variantlar:

• Global o'zgaruvchilar: state'ni markazlashtirish uchun global o'zgaruvchilardan yoki global obyektdan foydalanishingiz mumkin. Bu yondashuvning muammosi shundaki, katta ilovalarda uni boshqarish ancha qiyinlashib ketishi mumkin. Shuningdek, alohida component'lar ichida local state'ni qo'llab-quvvatlash ham ancha qiyin bo'ladi.
• Module Pattern: bu pattern'dan state'ni encapsulate qilish va uni boshqarish uchun aniq API taqdim etishda foydalanishingiz mumkin. Alohida component'lar uchun bu modullarning local instance'larini yaratishingiz kerak bo'ladi.
• Pub/Sub Pattern: bu variant murakkabroq bo'lib, event-driven architecture yordamida state o'zgarishlarini decouple qiladi. Bu murakkabroq yechim, lekin u kattaroq moslashuvchanlik beradi.
• State management kutubxonalari: har doim Redux yoki shunga o'xshash kutubxonalardan freymvorksiz foydalanishingiz mumkin.

Virtual DOM quyidagicha ishlaydi:

1. Butun foydalanuvchi interfeysi “virtual DOM” deb ataladigan in-memory tuzilmaga nusxalanadi; u haqiqiy DOM'ning yengil versiyasidir.
2. State o'zgarib, UI'ni yangilash kerak bo'lganda, yangilangan state bilan yangi virtual DOM yaratiladi.
3. So'ng yangi virtual DOM va oldingi versiya o'rtasida diff hisoblanadi.
4. Keyin tizim yangi state'ga erishish uchun zarur bo'lgan eng kam o'zgarishlarni hisoblaydi va o'sha o'zgarishlarni qo'llaydi. Faqat yangilanishi kerak bo'lgan node'larga tegiladi, bu esa haqiqiy DOM'ni bevosita o'zgartirishni minimal darajaga tushiradi.

Afzalliklariga kelsak:

• Unumdorlikni optimallashtirish: haqiqiy DOM'dagi faqat muayyan node'larni yangilash orqali bu usul UI'dagi yangilanishlar, reflow va repaint'lar sonini kamaytiradi. Bu ilova unumdorligiga bevosita ta'sir qiladi.
• Cross-platform. Virtual DOM ilova bilan UI'ni render qiladigan haqiqiy API o'rtasida abstraction qatlamini yaratadi. Bu shuni anglatadiki, biror platforma uchun virtual DOM implementatsiyasi mavjud bo'lsa, ilovani o'sha platformaga ko'chirish mumkin.
• Izchillik. Bu usul UI'ni ichki state bilan sinxron saqlab, bug'lar va nomuvofiqliklarni kamaytiradi.

Server-side rendering (SSR) — veb-server veb-sahifaning HTML kontentini yaratib, uni client'ga (odatda veb-brauzerga) to'liq render qilingan hujjat sifatida yuboradigan usul. Bu client-side rendering'da (CSR) tabiiy ravishda sodir bo'ladigan jarayonning aksi: CSR'da brauzer minimal HTML sahifani yuklab oladi, so'ng kontentni dinamik render qilish uchun JavaScript'dan foydalanadi.

SSR uchun bir nechta ideal qo'llanish holatlari bor:

• Kontentga boy veb-saytlar. Masalan, yangiliklar saytlari, bloglar va h.k.
• SEO'ga kuchli tayanadigan ilovalar. Veb-ilovaning muvaffaqiyati SEO'ga bog'liq bo'lsa, bu yondashuv saytning unumdorligini (va shu tufayli SEO ko'rsatkichlarini ham) sezilarli darajada yaxshilashi mumkin.
• Progressive web application'lar. Tez va unumdor user experience taqdim etish uchun ilova tez render bo'lishi kerak bo'lganda, ilovani dastlab serverda render qilib, keyingi integratsiyalar uchun client'da hydrate qilish mumkin.

Veb-ilovalar uchun kuzatib borilishi kerak bo'lgan asosiy metrikalar to'plami:

1. First Contentful Paint (FCP): kontentning birinchi bo'lagi render qilinguncha o'tadigan vaqt.
2. Largest Contentful Paint (LCP): eng katta kontent elementi render qilinguncha o'tadigan vaqt.
3. Time to Interactive (TTI): sahifa to'liq interaktiv bo'lguncha o'tadigan vaqt.
4. Total Blocking Time (TBT): main thread bloklangan holda turgan umumiy vaqt.
5. Cumulative Layout Shift (CLS): vizual barqarorlikni o'lchaydi.

Content Security Policy (CSP) — skriptlar, stylesheet'lar, rasmlar va boshqa resurslar kabi tasdiqlangan manbalarning whitelist'ini belgilash va uni majburiy qo'llash orqali cross-site scripting (XSS) hujumlari va boshqa code injection hujumlarining oldini olishga yordam beradigan xavfsizlik standarti.

Asosiy afzalliklari:

• Yuqoriroq xavfsizlik: CSP veb-saytlar va veb-ilovalarni turli hujumlardan, jumladan, XSS va data injection'dan himoya qilishga yordam beradi.
• Ko'proq nazorat: dasturchilar kontent qaysi manbalardan yuklanishi mumkinligini nazorat qilish uchun batafsil policy'lar belgilashi mumkin.
• Compliance'ning yaxshilanishi: OWASP Top 10'da ko'rsatilganlar kabi xavfsizlik compliance talablariga javob berishga yordam beradi.

Tree shaking — Webpack yoki Vite kabi JavaScript module bundler'larida yakuniy bundle natijasidan ishlatilmagan kodni olib tashlash uchun qo'llaniladigan usul.

Asosiy afzalliklari:

1. Bundle hajmining kichrayishi: ishlatilmagan kodni olib tashlash client'ga yuboriladigan JavaScript bundle hajmini kamaytiradi, bu esa yuklanish vaqtini yaxshilaydi va bandwidth sarfini kamaytiradi.
2. Unumdorlikning oshishi: kichikroq bundle'lar parse qilish va bajarish vaqtini qisqartirishi mumkin, natijada veb-ilovaning unumdorligi va responsiveness'i yaxshilanadi.
3. Resurslardan yaxshiroq foydalanish: dasturchilar ishlatilmagan dependency'lar yakuniy bundle hajmini shishirib yuborishidan xavotirlanmasdan modulli kod yozishi mumkin.