फ्रंटएंड डेवलपर साक्षात्कार प्रश्न 2026: HTML, CSS, प्रदर्शन

⏱️4 min read · 694 words

2026 में फ्रंटएंड डेवलपर साक्षात्कार प्रश्न HTML शब्दार्थ, सीएसएस लेआउट, जावास्क्रिप्ट प्रदर्शन, रिएक्ट पैटर्न, पहुंच और वेब प्रदर्शन अनुकूलन को कवर करते हैं। यह मार्गदर्शिका फ्रंटएंड और यूआई डेवलपर भूमिकाओं के लिए सबसे अधिक पूछे जाने वाले प्रश्नों को शामिल करती है।

एचटीएमएल/सीएसएस प्रश्न

1. इनलाइन, ब्लॉक और इनलाइन-ब्लॉक तत्वों के बीच क्या अंतर है?

<!-- Block elements: take full width, start on new line -->
<!-- Examples: div, p, h1-h6, ul, ol, li, section, article -->
<p>This paragraph takes full width</p>

<!-- Inline elements: only take needed width, don't break flow -->
<!-- Examples: span, a, strong, em, img, button -->
<p>Click <a href="#">this link</a> here</p>

<!-- Inline-block: inline positioning but block-like box model -->
<span style="display:inline-block; width:100px; height:40px">
  Has dimensions like a block but flows inline
</span>

2. सीएसएस विशिष्टता और कैस्केड की व्याख्या करें

/* Specificity (higher wins): */
/* [inline styles], [IDs], [classes/attrs/pseudo-classes], [elements/pseudo-elements] */

/* 0,0,0,1 — element selector */
p { color: black; }

/* 0,0,1,0 — class selector */
.paragraph { color: blue; }

/* 0,0,1,1 — class + element */
p.paragraph { color: green; }

/* 0,1,0,0 — ID selector */
#main { color: red; }

/* 1,0,0,0 — inline style */
/* <p style="color: purple"> */

/* !important overrides everything (avoid!) */
p { color: orange !important; }

/* Same specificity: LAST declaration wins (cascade) */
.btn { color: blue; }
.btn { color: red; }  /* red wins — defined later */

3. बॉक्स का आकार लेआउट को कैसे प्रभावित करता है?

/* content-box (default): width = content only */
/* Total width = width + padding + border */
.element {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 2px solid;
  /* Actual width: 244px (200 + 40 + 4) */
}

/* border-box: width INCLUDES padding and border */
.element {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 2px solid;
  /* Actual width: 200px (as specified) */
}

/* Best practice: apply globally */
*, *::before, *::after {
  box-sizing: border-box;  /* almost every project should do this */
}

जावास्क्रिप्ट प्रदर्शन प्रश्न

4. लेआउट थ्रैशिंग का क्या कारण है और आप इससे कैसे बचते हैं?

// Layout thrashing: alternating reads and writes to the DOM
// Each read after a write forces browser to recalculate layout

// BAD: reads and writes interleaved
for (const element of elements) {
  const height = element.offsetHeight;  // READ — forces layout
  element.style.height = height * 2 + 'px';  // WRITE
  // Next iteration reads cause recalculation! 60x per 60fps frame = jank
}

// GOOD: batch reads, then batch writes
const heights = elements.map(el => el.offsetHeight);  // all reads
elements.forEach((el, i) => {
  el.style.height = heights[i] * 2 + 'px';  // all writes
});

// Even better: avoid layout properties in animation
// Use transform instead of top/left/width/height
element.style.transform = 'translateX(100px)';  // compositor only, no layout

// requestAnimationFrame for animations
function animate() {
  // All reads and writes here are batched by browser
  requestAnimationFrame(animate);
}

5. क्रिटिकल रेंडरिंग पथ अनुकूलन की व्याख्या करें

<!-- Block rendering: CSS in <head> (sync), render-blocking JS -->
<head>
  <!-- CSS blocks rendering — must be in head, must be small/inlined for critical CSS -->
  <link rel="stylesheet" href="critical.css" />
  <!-- Non-critical CSS: load async -->
  <link rel="preload" href="non-critical.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
</head>

<!-- Defer/async JS to not block HTML parsing -->
<script defer src="app.js"></script>    <!-- executes after HTML parsed -->
<script async src="analytics.js"></script>  <!-- executes ASAP, non-blocking -->

<!-- Preload important resources -->
<link rel="preload" href="hero.webp" as="image" fetchpriority="high">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preconnect" href="https://api.example.com">

<!-- Priority hints for images -->
<img src="hero.jpg" fetchpriority="high" loading="eager" />  <!-- LCP image -->
<img src="below-fold.jpg" loading="lazy" />                   <!-- others -->

6. लोकलस्टोरेज, सेशनस्टोरेज और कुकीज़ के बीच क्या अंतर है?

विशेषता	स्थानीय भंडारण	सेशनस्टोरेज	कुकीज़
अटलता	जब तक मैन्युअल रूप से साफ़ नहीं किया जाता	जब तक टैब बंद न हो जाए	समाप्त/समाप्त होने तक
भंडारण का आकार	5-10 एमबी	5 एमबी	4 केबी
सर्वर पर भेजा गया	No	No	हाँ, हर अनुरोध के साथ
पहुँच	केवल क्लाइंट-साइड जेएस	केवल क्लाइंट-साइड जेएस	क्लाइंट + सर्वर
के लिए उपयोग करें	थीम, प्राथमिकताएँ	अस्थायी सत्र डेटा	प्रामाणिक टोकन (केवल Http!)

7. कोर वेब वाइटल्स क्या हैं और आप उन्हें कैसे अनुकूलित करते हैं?

एलसीपी (सबसे बड़ा कंटेंटफुल पेंट)<2.5 सेकंड: नायक छवि को अनुकूलित करें (प्रीलोड, वेबपी, उचित आकार)
आईएनपी (अगले पेंट से इंटरेक्शन)<200ms: मुख्य थ्रेड पर JS को छोटा करें, शेड्यूलर API का उपयोग करें
सीएलएस (संचयी लेआउट शिफ्ट)<0.1: छवियों पर स्पष्ट चौड़ाई/ऊंचाई सेट करें, गुना के ऊपर गतिशील सामग्री इंजेक्शन से बचें

<!-- LCP optimization: preload hero image -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">
<img src="hero.webp" width="1200" height="630" fetchpriority="high" alt="Hero">

<!-- CLS fix: always set image dimensions -->
<img src="photo.jpg" width="400" height="300" alt="Photo">
<!-- Or use aspect-ratio CSS -->
.image-container {
  aspect-ratio: 4 / 3;
}

8. कोड विभाजन क्या है और यह क्यों मायने रखता है?

// Without code splitting: one huge bundle = slow initial load

// With dynamic imports (Webpack/Vite auto-split):
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <HeavyComponent />  // only loaded when rendered!
    </Suspense>
  );
}

// Route-based splitting in Next.js (automatic)
// Each page is automatically split into its own chunk
// Only the current page's code loads

फ्रंटएंड साक्षात्कार परीक्षण चौड़ाई (एचटीएमएल, सीएसएस, जेएस, प्रदर्शन, पहुंच) और प्रतिक्रिया गहराई। सीएसएस विशिष्टता और लेआउट गुणों को जानें, इवेंट लूप को स्पष्ट रूप से समझाएं, प्रदर्शन अनुकूलन ज्ञान (सीआरपी, कोर वेब वाइटल्स, कोड विभाजन) प्रदर्शित करें, और पहुंच जागरूकता दिखाएं। ऐसी वास्तविक परियोजनाएँ बनाएँ जो इन कौशलों को प्रदर्शित करें – केवल सैद्धांतिक ज्ञान से आपको नौकरी नहीं मिलेगी।

🔗 Share this article

X / Twitter Facebook WhatsApp LinkedIn Telegram