Optimizing بالعربي
مقالات عملية مرتبة حسب المجال والمستوى، اختر المجال المناسب واقرأ من مستوى مبتدئ إلى محترف.
Cache-Control و ETag للمبتدئ: امنع 73% من طلبات السيرفر بهيدر واحد
لو السيرفر بتاعك بيرجّع نفس اللوجو ونفس ملف الـ CSS لكل زائر آلاف المرات في اليوم، انت بتدفع تكلفة شغل مالوش لازمة. هيدر Cache-Control واحد بيخلّي المتصفح يحتفظ بالملف عنده فينزّل الطلبات الفعلية على السيرفر بنسبة توصل 73%. مقال للمبتدئ بمثال المكتبة، شرح علمي للفرق بين Cache-Control و ETag، إعدادات NGINX و Express قابلة للنسخ، أرقام مقاسة، 4 trade-offs، ومتى الكاش بيكون قرار غلط.
Worker Threads في Node.js للمتوسط: شغّل CPU-bound Tasks بدون ما تجمّد Event Loop
لو الـ Node.js process بيستقبل 1,200 طلب/ثانية بسلاسة، وأول ما يدخل طلب فيه parse PDF أو image resize الـ API كله يقف 3 ثواني، انت مش محتاج سيرفر أقوى. مقال للمتوسط بمثال المطبخ للمبتدئ، شرح علمي للـ Event Loop والـ V8 isolates من توثيق Node.js 22، كود قابل للنسخ في 12 سطر، أرقام مقاسة من خدمة image processing بـ 32K طلب/يوم (P95 من 2,840ms لـ 180ms، throughput من 420 لـ 1,160 req/sec)، 4 trade-offs خفية في الـ RAM والـ structured clone والـ startup time، ومتى Worker Threads بيكون اختيار غلط.
Critical CSS للمتوسط: نزّل First Paint من 2.8s لـ 0.6s
لو موقعك بياخد 2.8 ثانية قبل ما المستخدم يشوف أول pixel، الـ stylesheet هو اللي بيوقف الرسم. Critical CSS بيستخرج قواعد above-the-fold ويضمّنها inline، فينزّل First Contentful Paint لـ 0.6 ثانية. مقال للمتوسط بمثال المطعم للمبتدئ، شرح علمي للـ render-blocking من توثيق web.dev، كود Penthouse في 18 سطر شغّال على Node.js 20+، أرقام مقاسة من متجر عربي بـ 24K زيارة يومياً، 4 trade-offs خفية، ومتى Critical CSS بيكون مضيعة وقت.
useMemo و useCallback للمتوسط: متى React يبقى أبطأ بـ 3× بسبب الـ Memoization
لو حاطط useMemo على كل filter و map في تطبيق React بنية إنك بتسرّع، انت غالبًا بتدفع تكلفة المقارنة بدون مكسب. مقال للمتوسط بمثال الدفتر للمبتدئ، شرح علمي من توثيق React 19، كود قابل للنسخ، أرقام مقاسة من dashboard فيه 200 صف (0.08ms ← 0.14ms، أي 75% أبطأ مع useMemo)، 4 trade-offs خفية، ومتى useMemo يبقى قرار غلط نهائي.
Debouncing وThrottling للمبتدئ: من 8400 طلب لـ 12 في الدقيقة
لو شريط البحث في موقعك بيرسل request لكل حرف، انت بتدفع تكلفة 700× اللي محتاجها. سطور JavaScript بـ debounce بينزّلوا الطلبات من 8400 لـ 12 في الدقيقة. مقال للمبتدئ بمثال البقّال، فرق debounce vs throttle، كود شغّال على JS الخالص، أرقام مقاسة من e-commerce عربي، 4 trade-offs خفية، ومتى debounce مضيعة وقت.
Bloom Filters للمحترف: امنع 99% من DB Queries بـ 1.2MB
لو خدمتك بتعمل 18 ألف lookup query في الثانية و87% منهم بيرجّع فاضي، Bloom Filter بـ 1.2MB في الذاكرة بيرفض 99% منهم في 200 نانوثانية قبل ما يلمسوا PostgreSQL. مقال للمحترف بمثال البوّاب للمبتدئ، تعريف من ورقة Bloom 1970 في CACM، الرياضيات الفعلية (m, k, n)، كود Python شغّال على pybloom-live 4.0، أرقام مقاسة على workload فيه 60M lookup/يوم (الفاتورة من 1,840$ لـ 410$، توفير 78%)، 4 trade-offs خفية، ومتى Bloom Filter يبقى اختيار غلط.
Memory Leaks في Node.js: اكتشف وأصلح بـ Heap Snapshots في 3 خطوات
لو الـ Node.js process بتاعك بياكل RAM كل ساعة لحد ما يموت بـ OOM، الكود مش بيتسرّب — هو بيحتفظ بمرجع لكائن مفروض ينتهي. مقال للمتوسط بمثال صاحب البيت للمبتدئ، شرح علمي للـ V8 heap، 3 خطوات capture/diff/analyze بـ Chrome DevTools، حالة event listeners حقيقية، أرقام مقاسة (من 1.4GB لـ 180MB)، 4 trade-offs، ومتى Heap Snapshot يكون اختيار غلط.
Tree Shaking للمحترف: شيل 340KB من Bundle بدون ما تلمس الكود
لو bundle الإنتاج بتاعك 892KB رغم إن المستخدم بيستعمل 3 شاشات بس، المشكلة مش في المكتبات — هي في إن Webpack مش قادر يثبت إن باقي الكود "آمن للحذف". المقال للمحترف بيشرح ESM static analysis، sideEffects flag، و Pure Annotations بأمثلة لـ Webpack 5 و Rollup و esbuild، مع أرقام مقاسة من إنتاج Next.js 14 وقياس قبل/بعد لمتجر فعلي.
103 Early Hints للمحترف: ابعت preload للمتصفح قبل الـ HTML بـ 320ms
لو موقعك العربي بياخد 2.4 ثانية قبل LCP رغم HTTP/2 و preload جوّا الـ head، انت بتفقد round-trip كامل لمّا المتصفح يستنّى الـ HTML الأول قبل ما يبدأ يحمّل CSS و fonts. 103 Early Hints بيرسل preload hints قبل ما الـ origin يجاوب بـ 200 OK، وبيخفّض LCP من 2.4 ثانية لـ 0.9 ثانية على workload e-commerce حقيقي. مقال للمحترف بمثال موظف الاستقبال للمبتدئ، شرح علمي من RFC 8297، إعداد NGINX 1.25 + Node.js شغّال، أرقام مقاسة من 38K زيارة/يوم، 4 trade-offs خفية، ومتى Early Hints بيكون مضيعة وقت.