صور الشاشة التي تم عرضها هي من قسم المشاكل المماثلة في المقال، وليس موضوع الكود الأصلي، بسبب القلق من الخصوصية. صور الشاشة التي تم عرضها هي من قسم المشاكل المماثلة في المقال، وليس موضوع الكود الأصلي، بسبب القلق من الخصوصية. ️ جدول المحتوى الإعداد المشكلة: تسخين الصفحة على الدخول محاولات البوب المفاجئة The Breakthrough: Pause Script إجراء The Root Cause: A Loop That Never End محاولة التخلص من الحمى (Try It Yourself) ما تعلمته الفوركس الخيارات الثنائية: Debugging Memory Leaks Tags الإعداد وقد نشرت هذه الحادثة في a مشروع React + TypeScript + Redux + RxJS كان الشكل لديه مساحة رقمية واحدة عندما تم تحديثه ، أدى إلى (إعادة بناء باستخدام (من أجل إعادة تقييم إستراتيجية متنوعة. quantity Redux selector reselect Total cost كل شيء تبدو جيدة في الجانب Buy لكن التبديل إلى الجانب يسبب شيئا غريبًا: يقطع الصفحة على الفور عند الدخول حتى . Sell 1 المشكلة: تسخين الصفحة على الدخول عند الكتابة في المجال الكمية: The UI froze completely The browser tab became unresponsive The in Chrome Performance Monitor. (Sometimes, the JS heap size also keeps increasing) CPU usage 100% هذا لم يكن مجرد إعادة "تدريجيًا" المباشر. . الكتلة الكاملة أظهرت Chrome في النهاية محادثة "الصفحة غير مؤثرة" وأنا بحاجة إلى قتل القائمة. محاولات البوب المفاجئة الطرق المعتادة لن تساعد: Attempt Result console.log Never printed anything debugger; Too slow or never triggered React DevTools Profiler Froze with the app Chrome Performance Profiler Couldn’t finish recording Removing components Still froze, even with just the input console.log لا تكتب أي شيء debugger; ببطء جدا أو لم يسبق React DevTools الملفات Froze مع التطبيق مستخدمي Chrome Performance لا يمكن الانتهاء من تسجيل إزالة المكونات لا تزال خفيفة حتى مع الدخول فقط يجب أن يكون السؤال هو أحيانًا، ولكن أين؟ loop or recursive render The Breakthrough: Pause Script إجراء ثم جاءت النتيجة: إذا استمرت قوائم جاكوار في النمو، . JavaScript is still running وأنا أفتح وَقَالَ الْبَيْهَقِيّ فِي «مُعْجَمه» : Chrome DevTools → Sources tab Pause Script Execution (⏸️) لسوء الحظ، لم أجد تفسيرًا لهذا الميزة حتى في وثائق Chrome DevTools الرسمية: https://developer.chrome.com/docs/devtools/javascript/breakpoint لسوء الحظ، لم أجد تفسيرًا لهذا الميزة حتى في وثائق Chrome DevTools الرسمية: https://developer.chrome.com/docs/devtools/javascript/breakpoint https://developer.chrome.com/docs/devtools/javascript/breakpoint خطوات : Open Chrome DevTools first! You won’t be able to open them during the freeze. Reproduce the freeze (enter quantity). When the tab hangs, open . DevTools → Sources tab Click the icon (top-right). ⏸️ Pause Chrome freezes JS execution . at that exact line Scroll down on the right panel & check the panel to trace which functions are currently executing. Call Stack Scroll through the parent calls to reveal how the function chain started. You can even click on the parent calls to see their invoked line! The Root Cause: A Loop That Never End تم اكتشاف سلسلة من 8 + وظائف ، بدءاً من ممارسة وتنتهي داخل a يتم استخدامه من A . onChange utility function Redux Reselect selector هنا هو المسؤول: let a = 0; const size = props.size; // expected number, got string while (a < size) { // do something } تبدأ يعود بشكل مباشر من قيمة الدخول: a مثل . props.size string "5" بسبب التهديدات القمعية JS ، لم يتم إخفاؤ المقارنة في ظروف معينة ، مما أدى إلى حلقات لا نهاية لها وتجمد الكتلة بأكملها. كان إصلاحه بسيطًا مثل تحويل القيمة إلى عدد قبل استخدامها: const size = Number(props.size); وفي الوقت نفسه ، تم تجميد الصفحات . محاولة التخلص من الحمى (Try It Yourself) يمكنك إعادة إنشاء هذا الخاطف الحقيقي وتجربة التغييرات الخاصة بك عن طريق الذهاب إلى هذا codesandbox أو تشغيل الكود أدناه في واحد جديد ولكن احفظ عملك أولا لأن هذا اضغط على Browser Tab ↓ لينك Create React App, نيل لينك import { useState } from "react"; export default function App() { const [quantity, setQuantity] = useState(""); const handleChange = (e) => { const value = e.target.value; setQuantity(value); const end = Date.now() + 145000; let a = 0; // ❌ Intentional infinite loop while (Date.now() < end) { // Busy-wait a++; } console.log("Done!"); // never reached }; return ( <div style={{ padding: 20 }}> <h2>🧊 Simulate a Page Freeze</h2> <input type="text" placeholder="Enter quantity" value={quantity} onChange={handleChange} /> <p>Type any number and watch Chrome suffer.</p> </div> ); } خطوات للتكرار فتح هذا الكود في codesandbox أعلاه أو على المستوى المحلي. إدخال أي رقم في الدخول. اقرأ القائمة التبريدية Solid. افتح Chrome DevTools → Sources tab → ️ Pause script execution. انتبه إلى القفز الأكبر داخل handleChange في قفزة الدعوة. ما تعلمته عندما لا يعمل شيء: إجراء سجل إزعاج هو القنبلة الذهبية. يمكن أن تتخفى أجزاء لا نهاية لها داخل الخيارات الثنائية الخيارات الثنائية الخيارات الثنائية الخيارات الثنائية الخيارات الثنائية الخيارات الثنائية الخيارات الثنائية الخيارات الثنائية الخيارات الثنائية الخيارات الثنائية الخيارات الثنائية الخيارات الثنائية الخيارات الثنائية الخيارات الثنائية الخيار. دائمًا تقييم الوصول إلى المستخدم قبل الحسابات. في حين أن اللوحات هي أدوات صعبة: حالة خاطئة واحدة وستصبح التطبيق الخاص بك طعام CPU . الفوركس الخيارات الثنائية: Debugging Memory Leaks هذه التقنية نفسها يمكن أن تساعد في التعرف على السريع في الحالات التي تزداد تلوث JS تدريجيا. memory leaks قد يظهر إلغاء التشغيل من الكتابة أثناء وقت الفراغ ما هي عمليات الخلفية أو الملفات التي لا تزال تعمل غير الضرورية. ولكن هذا تجربة لموقع آخر 😉
