I loaded a simple 3D model in Chrome using three.js, but I’ve got a performance issue. After the model finished loading, I left the page idle for a short period, I mean I did nothing on the page and just let it sit there quietly. After a little while, when I tried to move/rotate the model, I found that the model went very slowly, as if a performance bottleneck was happening.
Did anyone experience a similar one before and know why?
PS. The problem seems to occur only when I load three.js pages in a [iframe/].
Any time-related issues usually indicate a memory leak. Make sure that (1) you create three.js context only once, (2) you create only a single render loop, (3) you’re not refetching the model over an over again.
To make it all a bit easier, you can just go to Memory tab in chrome devtools, select Allocation instrumentation on timeline and let the app run for a minute or two. Then stop sampling and see what’s accumulating in the memory (non-disposed memory chunks are marked in blue; any blue memory that’s succeeded by grey memory is the most likely candidate for a leak.)