Optimizing بالعربي
مقالات عملية مرتبة حسب المجال والمستوى، اختر المجال المناسب واقرأ من مستوى مبتدئ إلى محترف.
مشكلة N+1: ليه صفحة واحدة بتعمل 101 استعلام على قاعدة البيانات
endpoint بيرجّع قائمة وبيبطأ كل ما الداتا تكبر؟ غالبًا السبب مشكلة N+1: استعلام منفصل لكل صف. اكتشفها بعدّاد الاستعلامات وحلّها بـ select_related وJOIN لتنزيل الزمن من ~1240 إلى ~48 مللي ثانية.
تقسيم الكود وTree Shaking: صغّر حزمة JavaScript وسرّع أول تحميل
لو حزمة JavaScript بتاعتك أكبر من ميجابايت والموقع بطيء، تقسيم الكود وTree Shaking بينزّلوا أول تحميل بنسبة تقارب 80%. شرح بمثال بسيط ثم دقيق، كود Vite وdynamic import شغّال، أرقام قبل وبعد، trade-offs، ومتى لا تستخدمه، مع مصادر رسمية.
انهيار الكاش: ليه انتهاء مفتاح واحد بيضرب قاعدتك بآلاف الاستعلامات فجأة
الكاش بيحميك 99% من الوقت، والخطر في الـ 1%: لحظة انتهاء مفتاح ساخن بيندفع آلاف الطلبات على قاعدتك دفعة واحدة. المقال يشرح انهيار الكاش (Cache Stampede) بمثال بسيط ثم علميًا، مع كود Redis شغّال لنمط single-flight مع jitter، أرقام (من 9600 استعلام إلى واحد)، وطريقة XFetch، الـ trade-offs، ومتى لا تستخدمه، مع مصادر.
تحميل خطوط الويب بدون وميض: اضبط font-display والتقليم
لو نص صفحتك يختفي أو يقفز وقت التحميل، المشكلة في طريقة تحميل الخط. اضبط font-display والتحميل المسبق والتقليم لتنزيل حجم الخط من 280KB لـ 68KB وتحسين LCP من 2.6s لـ 1.1s.
Brotli وGzip للمتوسط: قلّل حجم الاستجابة 77%
لو API بيرجع JSON حجمه 820KB لكل طلب، الضغط ممكن ينزله إلى 190KB مع Brotli أو 260KB مع Gzip. المقال يشرح الإعداد، القياس، والتكلفة الحقيقية على CPU.
List Virtualization للمتوسط: اعرض 10,000 صف بدون ما المتصفح يتجمّد
لو قائمة فيها آلاف الصفوف بتخلّي التمرير يتقطّع، المشكلة مش في حجم الداتا — انت بترسم 10,000 عنصر في الـ DOM مرة واحدة. الـ virtualization بيرسم اللي ظاهر بس (حوالي 20 صف) فيرجّع التمرير لـ 60fps. مقال للمتوسط بمثال نافذة القطار، شرح علمي لميزانية الإطار وLong Tasks، كود react-window شغّال، أرقام مقاسة، 4 trade-offs، ومتى متستخدمهوش، مع مصادر.
مشكلة N+1 Query للمتوسط: ليه صفحة المنتجات بتعمل 101 استعلام بدل واحد
صفحة بـ 100 منتج ممكن تعمل 101 استعلام بدل اثنين بسبب N+1 query. اكتشف المشكلة في دقيقة وحلّها بـ eager loading، وانزل بزمن التحميل من 1.4 ثانية لـ 47 مللي ثانية على PostgreSQL، بأمثلة Sequelize وPrisma وDjango ومصادر رسمية.
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 بيكون مضيعة وقت.