Browser lag when folder with many assets is open

[Sidelity]

Description

When entering a folder with hundreds of assets that have thumbnails, like materials, the browser starts lagging. The problem is exacerbated when running a workstation CPU that usually has slower but more cores (compared to a consumer CPU).

Related forum thread: https://forum.playcanvas.com/t/browser-lag-when-folder-with-many-assets-is-open Test project: https://playcanvas.com/project/916789/overview/asset-thumbnails-performance

Steps to reproduce:

1. Open Test project
2. Enter 512 folder
3. Scroll to the bottom (to generate thumbnails)
4. Rotate/move viewport camera to see performance problem

[yak32]

Some kind of Chrome rendering issue - I've tested the same project in Safari and it was fine. Safari has another issue though - first time the project loaded, it hangs when I clicked on folder with 128, 256 or 512 thumbnails. Assets are rendered with PCUI library, which simply adds thumbnails to the DOM. Profiling in Chrome reveals that 95% is spent in System, so it's not a JS issue.

[yaustar]

Potentially related to https://github.com/playcanvas/editor/issues/862

Description When opening a folder in the assets panel, which contains many items, performance of the editor degrades drastically. Same behaviour also applies for the scene hierarchy panel.

This is probably not a "bug" with the editor but has more to do with how pcui renders those elements. I think a solution which is applied often in this case, is to not render the items which are not in view (hidden because of scroll bar).

Steps to Reproduce

• Create a folder with many items inside
• Open the folder
• Performance is bad