Optimizing بالعربي
مقالات عملية مرتبة حسب المجال والمستوى، اختر المجال المناسب واقرأ من مستوى مبتدئ إلى محترف.
React Virtualization: ارسم قائمة 10,000 صف بدون ما الواجهة تتجمّد
لو جدول React بـ 10,000 صف بياخد 4 ثواني في أول رسم وكل scroll بيعلّق نص ثانية، المشكلة مش React. المشكلة إنك بترسم 60,000 عقدة DOM دفعة واحدة. List Virtualization بيخلي الـ DOM فيه 30 صف فقط ويحافظ على scrollbar صحيح. مقال للمستوى المتوسط بمثال السينما، تعريف علمي، كود react-window شغّال، أرقام قياس فعلية، trade-offs، وحالات لا تنفع فيها.
Backpressure في Node.js Streams: ليه السيرفر بياكل 4GB رام عند رفع ملف 500MB
لو سيرفر Node.js بيقع OOM لما حد يرفع ملف 500MB والذاكرة بتطلع لـ 4GB، المشكلة مش الذاكرة ولا حجم الملف. المشكلة إن الكود بيتجاهل backpressure في الستريم. شرح للمستوى المتوسط بمثال المطبخ، تعريف علمي، كود pipe vs pipeline، أرقام قياس فعلية، trade-offs، وحالات لا تستخدم فيها.
خطوط الويب: امنع CLS بقيمة 0.24 وحمّل الخط في 80ms بدل 480ms
لو الصفحة بتقفز وتعيد ترتيب نفسها لما الخط العربي يخلّص تحميل، CLS بيوصل 0.24 وLCP بيتأخر نصف ثانية. ضبط font-display مع subsetting وpreload يحل المشكلة بدون لمس التصميم — مع أرقام مقاسة وtrade-offs واضحة.
N+1 Query Problem: ليه ORM بياخد 1001 طلب SQL بدل اتنين
لو endpoint بيرجع قائمة 1000 طلبية بياخد 8 ثواني والـ DB CPU مرتفع، المشكلة غالبًا مش في الـ index ولا السيرفر. المشكلة إن الـ ORM بيعمل 1001 طلب SQL بدل اتنين. مقال للمستوى المتوسط بمثال للمبتدئ، تعريف علمي، كود Python/SQLAlchemy وDjango شغّال، أرقام قياس فعلية، حلول joinedload وselectinload وDataLoader، trade-offs، وحالات ما تستخدمهوش فيها.
Brotli vs gzip: وفّر 21% من حجم JavaScript قبل ما يوصل المتصفح
لو bundle الـ JavaScript بتاعك بيوصل للزائر 348KB مضغوط بـ gzip، Brotli بيوصّله لـ 251KB بنفس الكود وبدون لمس الـ build. شرح للمستوى المتوسط مع أرقام مقاسة على ملف حقيقي، إعداد NGINX، ضبط Cloudflare، trade-offs واضحة، وحالات لا تستخدم Brotli فيها.
Memory Leak في Node.js: ازاي تكشفها بـ Heap Snapshot قبل ما السيرفر يقع
لو سيرفر Node.js عندك بيكبر من 240MB لـ 2.8GB في 4 أيام لحد ما بيقع OOM، Heap Snapshot في Chrome DevTools بيوريك بالظبط الـ object اللي بيتراكم. مثال للمستوى المتوسط بكود حقيقي وأرقام قبل وبعد الإصلاح.
Web Workers في JavaScript: شغّل الحسابات الثقيلة بدون ما الواجهة تتعلّق
لو الواجهة بتتجمّد ثانية أو اتنين كل ما المستخدم يضغط زر، المشكلة مش الكود بطيء، المشكلة إنه شغّال على نفس thread رسم الواجهة. Web Workers بينقلوا الحسابات لـ thread موازي والواجهة تفضل مستجيبة. شرح للمستوى المتوسط بمثال المطبخ، كود JavaScript شغّال، أرقام INP قبل وبعد، وحالات لا تنفع فيها.
SQLite WAL: قلّل انتظار الكتابة من 420ms لـ 70ms
لو تطبيقك بيستخدم SQLite وفيه قراءات كثيرة مع كتابة متقطعة، تفعيل WAL مع checkpoint مضبوط يقلل انتظار الكتابة بدون نقل قاعدة البيانات لسيرفر كامل.
PgBouncer: قلّل اتصالات PostgreSQL من 600 لـ 80
لو كل instance في تطبيقك فاتح pool مستقل على PostgreSQL، PgBouncer transaction pooling يقلل عدد الاتصالات الفعلية ويخفف ضغط الذاكرة بدون تغيير كبير في الكود.