⏱️4 min read · 710 words
تغطي أسئلة مقابلة مطوري الواجهة الأمامية في عام 2026 دلالات HTML وتخطيط CSS وأداء JavaScript وأنماط React وإمكانية الوصول وتحسين أداء الويب. يغطي هذا الدليل الأسئلة الأكثر شيوعًا حول أدوار مطوري الواجهة الأمامية وواجهة المستخدم.
أسئلة HTML/CSS
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. اشرح خصوصية CSS والتسلسل
/* 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. ما الفرق بين التخزين المحلي وتخزين الجلسة وملفات تعريف الارتباط؟
| ميزة | localStorage | sessionStorage | ملفات تعريف الارتباط |
|---|---|---|---|
| المثابرة | حتى يتم مسحها يدويًا | حتى يتم إغلاق علامة التبويب | حتى انتهاء/تطهيرها |
| حجم التخزين | 5-10 ميجابايت | 5 ميجا بايت | 4 كيلو بايت |
| تم إرسالها إلى الخادم | No | No | نعم مع كل طلب |
| وصول | JS من جانب العميل فقط | JS من جانب العميل فقط | العميل + الخادم |
| استخدم ل | الموضوع، التفضيلات | بيانات الجلسة المؤقتة | رموز المصادقة (HttpOnly!) |
7. ما هي مؤشرات أداء الويب الأساسية وكيف يمكنك تحسينها؟
- LCP (أكبر طلاء محتوى)<2.5 ثانية: تحسين الصورة الرئيسية (التحميل المسبق، WebP، الحجم المناسب)
- INP (التفاعل مع الطلاء التالي)<200 مللي ثانية: تصغير JS في سلسلة المحادثات الرئيسية، واستخدام واجهة برمجة تطبيقات الجدولة
- CLS (إزاحة التخطيط التراكمي)<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تختبر مقابلات الواجهة الأمامية اتساع نطاق (HTML وCSS وJS والأداء وإمكانية الوصول) وعمق التفاعل. تعرف على خصوصيات CSS وخصائص التخطيط، واشرح حلقة الحدث بوضوح، وأظهر المعرفة بتحسين الأداء (CRP، وCore Web Vitals، وتقسيم التعليمات البرمجية)، وأظهر الوعي بإمكانية الوصول. قم ببناء مشاريع حقيقية توضح هذه المهارات، فالمعرفة النظرية وحدها لن تمنحك الوظيفة.
🔗 Share this article
✍️ Leave a Comment