Debouncing وThrottling.

 لما بتبني تطبيق زي Real-time Search Bar، الـ Event Handlers زي onInput أو onScroll بيقدر يدمّر الأداء لو ما اتظبطش. هنا بيجي دور Debouncing وThrottling.


Event Overfiring. تخيل إن المستخدم بيكتب بسرعة، والـ Event بيتنفذ مع كل حرف، فالـ Browser بيعمل API Calls زيادة أو بيعيد Render للـ UI.
ليه بتحصل؟ الـ Events زي keyup بتتفعل عشرات المرات في الثانية، والـ JavaScript ما بيقدرش يستوعب.

الحل: Debounce بيخلّي الـ Function يتنفذ بس بعد ما المستخدم يهدى (مثل 300ms)، أما Throttle بيحدد معدل التنفيذ (مثل مرة كل 100ms). في الكود، استخدم setTimeout للـ Debounce أو Date.now() للـ Throttle، وتأكد إنك بتنظّف الـ Timers عشان تتجنب Memory Leaks.

نصيحة: اختبر الـ Edge Cases زي الـ Rapid Typing أو Smooth Scrolling، واستخدم Performance.now() عشان تقيس الـ Event Timing.

Frontend JavaScript WebDevelopment Performance

تعليقات

إرسال تعليق

المشاركات الشائعة من هذه المدونة

this keyword in JavaScript

  this keyword in JavaScript اولا ايه ال this دي وليه قيمتها متغيرة كل شوية؟ و ايه الفرق لما استخدمها ف regular function، arrow function، method؟ خلينا نبدا ب ايه هي ال this و ازاي بتتكون. ال this هي Reference بيشاور علي ال object الحالي. طيب بتتكون ازاي؟ بتتكون اول ما يحصل creation ل execution context في ال memory. يعني ايه الكلام ده؟ ببساطة لما يحصل call ل اي function ، بتكريت ف الميموري execution context خاص بيها، هو عبارة عن حيز تنفيذي ليها ، بيبقي عادة شايل حاجات من ضمنها ال this. عشان كده هتلاقي ال this ليها علاقة دايما ب أنواع ال functions سواء العادية او ال arrow او method. كلام جميل، فين ال object فالموضوع بقا ؟ لو جربت تطبع this ف سكريبت فاضي، هيطبعلك ال window. ليه حصل كده؟ اولا، اول ما انت بتعمل js file، بيتكريت global execution context ف الميموري، وبالتالي هيتكريت this. ال global ده اللي هو ال window object. يبقي this بتشاور علي ال object الحالي اللي هو ال window. دي اول حالة، و اظن بسيطة. نعلي شوية.. لو عملت function عادية خالص في ال global.. مهم تعرف قبل ما اكمل، ان ...
قراءة المزيد

Three.js Shadows & Lights: Summary with Examples

  Three.js Shadows: Summary with Examples Three.js provides powerful shadow capabilities that work with certain light types. Here's a comprehensive overview with simple and advanced examples. Shadow Basics Only these light types can cast shadows in Three.js: DirectionalLight PointLight SpotLight Requirements for Shadows: Enable shadows on the renderer Enable shadow casting on lights Enable shadow receiving on objects Configure shadow properties 1. DirectionalLight Shadows Simple Example: javascript Copy Download // Setup renderer . shadowMap . enabled = true ; const light = new THREE . DirectionalLight ( 0xffffff , 1 ) ; light . position . set ( 5 , 10 , 7 ) ; light . castShadow = true ; scene . add ( light ) ; // Create a surface to receive shadows const planeGeometry = new THREE . PlaneGeometry ( 20 , 20 ) ; const planeMaterial = new THREE . MeshStandardMaterial ( { color : 0xdddddd } ) ; const plane = new THREE . Mesh ( planeGeometry , planeMater...
قراءة المزيد