⚡ Performance & Optimization – Frontend Interview Questions & Answers

اسئله (Performance & Optimization):

• 🚀 إيه هي الـ Critical Rendering Path؟ وإزاي تحسن سرعة تحميل الصفحة؟

  بص يا سيدي، الـ Critical Rendering Path هو ببساطة مجموعة الخطوات اللي المتصفح بيعملها علشان يعرض الصفحة للمستخدم. بيبدأ بتنزيل الـ HTML والـ CSS والـ JavaScript، وبعدها بيبني الـ DOM والـ CSSOM، وبعدين يرندر الصفحة فعليًا.

  
  
  طيب إزاي تسرع العملية دي؟ عندك كذا حاجة:
  
  

  • قلل حجم الـ CSS والـ JavaScript باستخدام الـ minification والـ compression
  • استخدم lazy loading للصور والفيديوهات علشان تحملهم لما المستخدم يحتاجهم بس.
  • حمّل الـ CSS الأساسي فوق (Above the fold CSS) بشكل inline علشان الصفحة تظهر بسرعة.
  • استخدم HTTP/2 علشان تقلل الـ requests وتزود سرعة التحميل.
  • تأخر تحميل الـ JavaScript اللي مش ضروري باستخدام defer أو async.

• 🚀 إزاي تطبق Code Splitting في React؟

  بمنتهى البساطة، Code Splitting هو إنك متحملش كل الكود مرة واحدة، بل تقسمه لملفات أصغر وتحمّل كل جزء لما المستخدم يحتاجه بس.

  
  
  طيب إزاي؟
  
  عندك React.lazy() مع Suspense، مثال سريع:



import React, { Suspense, lazy } from "react"; const MyComponent = lazy(() => import("./MyComponent")); function App() { return ( <Suspense fallback={<div>Loading...</div>}> ); }

كده MyComponent مش هيتحمّل غير لما المستخدم يحتاجه، وده بيساعد جدًا في تحسين سرعة الموقع وتقليل وقت التحميل الأولي.

• 🚀 إيه الفرق بين Debouncing و Throttling؟ وامتى تستخدم كل واحد؟

  الفرق الأساسي بين الاتنين إن Debouncing بيمنع تنفيذ الفانكشن غير لما التفاعل يوقف تمامًا، بينما Throttling بيحدّ من عدد مرات تنفيذ الفانكشن خلال فترة معينة.

  • Debouncing: لو عندك search bar وعايز تمنع تنفيذ البحث إلا بعد ما المستخدم يوقف كتابة لمدة معينة، يبقى ده الحل المناسب.
  • Throttling: لو عندك scroll event وعايز تمنع إنه ينفّذ كل مرة يحصل Scroll، لكن يسمح له يشتغل مرة كل 300ms مثلًا، يبقى ده الأنسب.


مثال بسيط يوضح الفرق:




const debounce = (func, delay) => { let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => func(...args), delay); }; }; const throttle = (func, limit) => { let lastCall = 0; return (...args) => { const now = Date.now(); if (now - lastCall >= limit) { lastCall = now; func(...args); } }; };

مش بسيط اوي يعني 😆

• 🚀 إيه الفرق بين Lazy Loading و Eager Loading؟

  • Lazy Loading: تحميل البيانات أو الصور أو أي موارد وقت ما المستخدم يحتاجها فقط. مثال: تحميل صورة لما تظهر في الـ viewport.
  • Eager Loading: تحميل كل حاجة من البداية حتى لو المستخدم مش محتاجها دلوقتي.

  
  
  الأفضلية؟
  
  
  Lazy Loading طبعًا، لأنه بيقلل وقت التحميل الأولي وبيحسن الأداء.

• 🚀 إزاي تحسن Web Performance Metrics زي LCP, FID, CLS؟

  لو متابع Core Web Vitals، فأنت عارف إن:

  • LCP (Largest Contentful Paint): وقت تحميل العنصر الأساسي في الصفحة. الحل؟ استخدم CDN، lazy loading، ضغط الصور، وتحسين سرعة السيرفر.
  • FID (First Input Delay): سرعة استجابة الموقع لأول تفاعل. الحل؟ قلل حجم الـ JavaScript، استخدم web workers، وخفف الـ event listeners.
  • CLS (Cumulative Layout Shift): استقرار تخطيط الصفحة بدون تحركات مفاجئة. الحل؟ حدد أبعاد الصور والفيديوهات، ومتستخدمش ads أو iframes بدون حساب.

• 🚀 إزاي تتأكد إن موقعك متوافق مع Core Web Vitals؟

  عندك كذا طريقة:

  • استخدم Google PageSpeed Insights: هيديك تقرير شامل عن الأداء والحلول الممكنة.
  • Chrome DevTools (Lighthouse Audit): من المتصفح نفسه هتقدر تعمل اختبار مباشر.
  • حسّن الـ assets بتاعتك: زي تحميل الصور بطريقة أفضل، ضغط الملفات، وتقليل عدد الـ requests.
  • استخدم Web Vitals Library في React علشان ترصد المشاكل لحظيي:


import { getLCP, getFID, getCLS } from "web-vitals"; getLCP(console.log); getFID(console.log); getCLS(console.log);