A megjelenített képernyőképek a cikk szimulált probléma részéből származnak, nem az eredeti kód problémájából, az adatvédelmi aggályok miatt. A megjelenített képernyőképek a cikk szimulált probléma részéből származnak, nem az eredeti kód problémájából, az adatvédelmi aggályok miatt. ️ Tartalomjegyzék A létesítmény A probléma: Page Freeze on Input Sikertelen debütálási kísérletek The Breakthrough: Pause Script végrehajtás A gyökér oka: egy görbe, amely soha nem ér véget A fagyasztás szimulálása (próbáld ki magad) amit megtanultam Bónusz gondolat: Debugging memória szivárgások Napok A létesítmény Ez a bug megjelent a A projekt. React + TypeScript + Redux + RxJS Az alakzatnak egyetlen numerikus mezője volt Amikor frissítették, a (A felhasznált Az újraszámításhoz a Szinkronizált szöveges állapot. quantity Redux selector reselect Total cost Minden rendben nézett ki a Az oldal. Buy Átállás a Az oldal valami furcsa dolgot okozott: az oldal azonnal befagyott, amikor belépett . Sell 1 A probléma: Page Freeze on Input Amikor a mennyiség mezőbe írja be: 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% Ez nem egy tipikus „lassú” renderelés volt. . Teljes hangzás A Chrome végül megmutatta a "Page Unresponsive" párbeszédpanelt és meg kellett ölnem a lapot. Sikertelen debütálási kísérletek A szokásos hibakeresési módszerek nem segítenek: 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 Soha nem nyomtatott semmit debugger; Túl lassú vagy soha nem indított React DevTools profilok Fagyasztás az alkalmazással Chrome teljesítményprofil Nem lehetett befejezni a felvételt Alkatrészek eltávolítása Még mindig fagy, még csak a bemenet A kérdésnek a Végtelenül fut, de hova? loop or recursive render The Breakthrough: Pause Script végrehajtás Aztán rájöttem: ha a JavaScript halom tovább növekszik, . JavaScript is still running Így nyitottam meg Használja a rejtett gyümölcsöt: Chrome DevTools → Sources tab Pause Script Execution (⏸️) Sajnos ezt a funkciót még a hivatalos Chrome DevTools dokumentumokban sem tudtam megmagyarázni: https://developer.chrome.com/docs/devtools/javascript/breakpoint Sajnos ezt a funkciót még a hivatalos Chrome DevTools dokumentumokban sem tudtam megmagyarázni: https://developer.chrome.com/docs/devtools/javascript/breakpoint https://developer.chrome.com/docs/devtools/javascript/breakpoint A lépések: 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! A gyökér oka: egy görbe, amely soha nem ér véget A felfüggesztett halom 8 + funkciók láncolatát tárta fel, kezdve a Befejeződik és befejeződik a Használt a . onChange utility function Redux Reselect selector Íme a bűnös: let a = 0; const size = props.size; // expected number, got string while (a < size) { // do something } Kiderül közvetett módon a bemeneti értékből származik: a mint . props.size string "5" A JS kényszerítő furcsasága miatt a csík összehasonlítása bizonyos körülmények között nem tudott kilépni, ami végtelen csíkot okozott és az egész szálat befagyasztotta. A javítás olyan egyszerű volt, mint az érték használata előtt egy számra történő átalakítása: const size = Number(props.size); Azonnal eltűnt a fagyasztott oldal. A fagyasztás szimulálása (próbáld ki magad) Újra létrehozhatja ezt a pontos hibát, és kipróbálhatja a hibakeresési trükköt magának, ha erre a codesandbox-ra megy Vagy futtatja az alábbi kódot egy új Először is a munkádat, mert Húzza fel a böngészőgombot 🙂 linkek Create React App, Szállás linkek 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> ); } Lépések a reprodukcióhoz Nyissa meg ezt a kódot a fenti codesandboxban vagy helyi szinten. Írjon be bármilyen számot a bemenetben. Figyeljük meg a fagyasztás szilárd. Nyissa meg a Chrome DevTools → Források lapot → ️ Szünet script végrehajtás. Figyeljük meg a végtelen görbét a kézikönyvben. amit megtanultam Amikor semmi sem működik: a felfüggesztett forgatókönyv végrehajtása ezüst golyó. A végtelen körök elrejthetők a kiválasztók, a reduktorok vagy a segédprogramfájlok belsejében, távol a felhasználói felülettől. Mindig tisztítsa meg és írja be a felhasználói bemenetet a számítások előtt. míg a hurkok éles eszközök: egy rossz állapot és az alkalmazás CPU toaster lesz . Bónusz gondolat: Debugging memória szivárgások Ez a technika segíthet a lassú nyomon követésben Olyan esetekben, amikor a JS halmaza fokozatosan növekszik. memory leaks A forgatókönyv futtatásának szüneteltetése üres idő alatt feltárhatja, hogy mely háttérfolyamatok vagy előfizetések még mindig szükségtelenül futnak. De ez egy kísérlet egy másik cikkhez 😉.
