Үзүүлэлт үзсэн дэлгэц зурвас нь өгүүллийн загварын симулируулсан асуудал хэсэгээс, хувийн нууцлалын асуултуудын хувьд анхны кодыг биш юм. Үзүүлэлт үзсэн дэлгэц зурвас нь өгүүллийн загварын симулируулсан асуудал хэсэгээс, хувийн нууцлалын асуултуудын хувьд анхны кодыг биш юм. ️ Барааны жагсаалт Сүлжээний Эдүүлбэр: Page Freeze on Input Үнэгүй Debug-ийн туршилт The Breakthrough: Pause Скрипт гүйцэтгэх Root Cause: ямар ч эцсийн хоолой Simulating the Freeze (Тээврийн хэрэгслийг туршиж) Би суралцах зүйл Бонус Сэтгэгдэл: Debugging Memory Leaks Өнгөрсөн Сүлжээний Энэ бугуй нь а Програм хангамж React + TypeScript + Redux + RxJS хэлбэр нь нэг нумерик хэлбэртэй . шинэчлэгдсэн үед, энэ нь а (Барилгын хэрэглээ ) шинэчлэх State synced текст. quantity Redux selector reselect Total cost Бүх зүйл нь сайн харуулж байна Өнгөрсөн Buy гэхдээ өөрчлөх нь хуудсууд нь гайхамшигтай зүйлийг үүсгэсэн: хуудсууд тавтай морилно уу . Sell 1 Эдүүлбэр: Page Freeze on Input Хэмжээ тоног төхөөрөмж дээр хэвлэх үед: 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% Энэ нь типичный "баг" хэвлэх биш юм. Энэ нь . Бүртгүүлэх Hang Хром эцэст нь "Page Unresponsive" диалогог харуулсан & Би тавтай морилно уу. Үнэгүй Debug-ийн туршилт Хэвийн debugging арга нь туслахгүй: 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 гүйцэтгэлийн профиль Сэтгэгдэл үлдээх Components Хувилагч Үүнээс гадна, зүгээр л эх үүсвэр нь Төгсгөл нь а Хязгааргүй байлгах. Гэхдээ юу вэ? loop or recursive render The Breakthrough: Pause Скрипт гүйцэтгэх Дараа нь би мэдэгдэж байна: JavaScript-ийн хавтан нэмэгдэж байгаа бол, . 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! Root Cause: ямар ч эцсийн хоолой Тавтай морилно уу, тавтай морилно уу, тавтай морилно уу! handler болон a-ийн дотор дуусгах хэрэглэдэг a . onChange utility function Redux Reselect selector Энд энэ нь хавдартай юм: let a = 0; const size = props.size; // expected number, got string while (a < size) { // do something } Зөвлөгөө indirectly from the input value: а Үнэгүй . props.size string "5" JS-ийн хүч чадалтай хязгаарлалт нь хоолойны харьцуулалт нь зарим нөхцөлд явж чадахгүй байсан бөгөөд энэ нь хязгаарлалтгүй хоолой үүсгэсэн бөгөөд бүх гадаргуу нь хязгаарлагдаж байна. Энэ нь ашиглах өмнө үнэ нь тоо руу конвертируулах шиг хялбар байсан: const size = Number(props.size); Үнэндээ, хуудсууд жагсаалтад хязгааргүй байна . Simulating the Freeze (Тээврийн хэрэгслийг туршиж) Та энэ нарийвчлалтай буудлыг шинэчлэх боломжтой бөгөөд энэ codesandbox-д илгээж debugging trick-ийг туршиж болно. эсвэл доорх кодыг шинэ гэхдээ эхлээд таны ажил хадгалж, учир нь энэ нь Таны браузер таб link 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 эсвэл орон нутгийн дээр нээж. Тавтай морилно уу Тавтай морилно уу Тавтай морилно уу FREEZ SOLID Chrome DevTools → Sources tab → ️ Скрипт гүйцэтгэлийн паузуй. Call Stack-д handleChange-ийн дотор хязгааргүй хоолой үзнэ үү. Би суралцах зүйл Хэрэв ямар ч үйл ажиллагаа явуулж байгаа бол: Pause script execution нь зэвэрдэггүй боолт юм. Хязгааргүй дугуй нь selectors, reducers, эсвэл utility файлуудыг UI-ээс даяар харах боломжтой. Тавтай морилно уу, тавтай морилно уу, тавтай морилно уу. хоолой нь ягаан туяаны хэрэгсэл юм: нэг дуртай нөхцөл байдал, таны апп нь CPU тостер болж байна . Бонус Сэтгэгдэл: Debugging Memory Leaks Эдгээр нэг техникийг багасгахын тулд туслах болно → JS хавтгай нь постепенно нэмэгдэж байгаа тохиолдолд. memory leaks Тавтай морилно уу цаг хугацааны дотор скрипт гүйцэтгэлийн паузууд нь ямар ч позадин үйл явцыг, абонентүүд одоо ч байтугай ажиллаж байгаа юм. Гэхдээ энэ нь бусад нийтлэлтэй туршилт юм 😉
