We are experiencing random crashing of a relatively heavy webpage, which has lots of videos, and about 10 API endpoints polling every 3-5 seconds. Some of the endpoints are returning 1-3MB of JSON at a time, so there is a lot of churn of objects.
I haven’t yet figured out how to debug XCode WebView or dig into memory usage in Safari’s debugger. But I suspect that on iOS Safari, the reason why it’s crashing randomly is because the memory is growing too large, and Safari just cuts the page off and refreshes the page.
That’s my best guess so far on why the app is crashing.
So we are using Redux + React. We are doing some virtualization in React (only render what is visible), but what I’m wondering about for this question is what is happening to the churning JSON data as megabytes are coming in, react is running (recomputing large virtual DOM diffs, basically our whole UI is being recomputed every second due to redux selectors being used throughout React components, and that causes all components in the tree to re-compute).
So basically, React is generating a lot of objects. I don’t think there is any global variables and memory leaks. But just the data is building up with these 1-3MB JSON requests coming in (and converting to even larger JS objects), then presumably garbage collection is occurring, but WHEN.
How does garbage collection work roughly speaking in Safari / WebKit? Is it possible that the data is building up faster and the objects aren’t being cleared from the underlying memory system fast enough? Even though there’s probably no memory leaks (due to React’s nature)?