The new banner animation's performance issue

[Keith-CY]

Platform: Macbook Pro 2017, i5 and i7 Browser: Chrome 110

The system hangs on opening the page with chrome/safari, but it's ok to open it with firefox

[Keith-CY]

Macbook Pro 2016 faces the same issue

[pygman]

This issue does not occur with the macbook that is almost the same as above

---

It is not sure whether the system hangs is when entering the page or when the new block is animated

draft optimizing pr

suppose that it's hangs when banner is initializing

Create all cubes at the same time may cause high CPU usage, It could sleep for a short time between each cube's creation, and show a loading before cubes are all loaded

suppose that it's hangs when the wave animation is playing

By observing the performance monitor of the banner page in chrome, you can see that the CPU will increase a lot during the wave animation, and at the same time, the animation frame fired recurring handler time out, for animation we can do the following optimizations

1. reduce FPS (useful, 30fps, 15fps undetectable by naked eyes)
2. https://github.com/nervosnetwork/ckb-explorer-frontend/blob/develop/src/pages/Home/Banner/anime.ts#L27 Promise.all(), too many cubes are controlled at the same time. we can reduce it by merging geometries
   • textCubes are easy to merge
   • normalCubes can be divided into about 20 groups by distance from the center
   • because it can't be operated separately after merging, the operation of dataCubes is a little difficult, because the number of dataCube is same to the tx count of current block, we can pre-create enough cubes (or gradient increment creation), blink move to random positions at normalCubes before every the animation loop starts, and then playing.(remainingg blocks are placed below all normalCubes)
3. creation of floatCube use 8ms, we can use the same one globally (blink move).(not very useful)

[pygman]

I developed 8 different versions of the banner page in https://github.com/pygman/ckb-explorer-frontend/tree/tttt and published to gh-pages

remove annimate https://ckb.biangdiang.wang/1

remove annimate, highlight2, highlight3 https://ckb.biangdiang.wang/2

remove annimate, highlight2, highlight3, normalCubes https://ckb.biangdiang.wang/3

remove annimate, all Cubes, all highlight https://ckb.biangdiang.wang/4

only camera and sence https://ckb.biangdiang.wang/5

remove shader https://ckb.biangdiang.wang/6

only sence https://ckb.biangdiang.wang/7

only import threejs https://ckb.biangdiang.wang/8

@stone_king replied that 6,3,2,1 hangs yet, the rest are black scence, 3 is better but it is also hangs. waiting for his reply whether the 4,5,7,8 black screen will cause his computer hangs

[pygman]

@stone_king replied that 6,3,2,1 hangs yet, the rest are black scence, 3 is better but it is also hangs. waiting for his reply whether the 4,5,7,8 black screen will cause his computer hangs

4，5，7，8 does not hangs. It seems to be caused by cubes, the more cubes the more serious, the less the smoother, it is perfectly smooth with no cubes. Combined with disable hardware acceleration can make it smooth, it is very confusing. I even want to develop it using 2d engine to simulate 3d visuals

[pygman]

• Disable hardware acceleration, apple chip may cause 404, intel chip cause stucks
• We guess the hangs is the graphics driver or chromium kernel bugs, most likely browser rendering bugs, not easy to verify
• Requires a computer that can be frequently tested and adjusted to continue to advance the progress.
• Or display different banner between old and new, according to the first screen rendering time or CPU usage

[Keith-CY]

• Disable hardware acceleration, apple chip may cause 404, intel chip cause stucks
• We guess the hangs is the graphics driver or chromium kernel bugs, most likely browser rendering bugs, not easy to verify
• Requires a computer that can be frequently tested and adjusted to continue to advance the progress.
• Or display different banner between old and new, according to the first screen rendering time or CPU usage

The 404 issue was patched by https://github.com/nervosnetwork/ckb-explorer-frontend/commit/bb40574dc5eb161734db34310edbe6f1eaa5f3ab, the banner fallbacks to the static image if animation throws

[pygman]

Display different banner according to the rendering time of a tinyTestSceneRender at pr https://github.com/Magickbase/ckb-explorer-frontend/pull/2, and deployed to https://ckb.biangdiang.wang/

In my chrome the rendering of the tinyTestSceneRender takes about 40ms.

@stone_king replied that It can display the old banner successfully and the render takes 238ms, but when click Tokens page and back to Home the render takes 109ms.

So, how about setting the rendering threshold to 60ms?

https://github.com/Magickbase/ckb-explorer-frontend/blob/107c1d7fbc864cc54998952f1c00d5e2d8574e4c/src/pages/Home/Banner/index.tsx#L22

[Keith-CY]

Display different banner according to the rendering time of a tinyTestSceneRender at pr Magickbase/ckb-explorer-frontend#2, and deployed to ckb.biangdiang.wang

In my chrome the rendering of the tinyTestSceneRender takes about 40ms.

@stone_king replied that It can display the old banner successfully and the render takes 238ms, but when click Tokens page and back to Home the render takes 109ms.

So, how about setting the rendering threshold to 60ms?

Magickbase/ckb-explorer-frontend@107c1d7/src/pages/Home/Banner/index.tsx#L22

How about trying various thresholds and deploying them on vercel, and request feedbacks from several users.

[pygman]

How about trying various thresholds and deploying them on vercel, and request feedbacks from several users.

the pr for test https://github.com/nervosnetwork/ckb-explorer-frontend/pull/1249

How can we find some testers, or send https://ckb-explorer-n3xjuue6s-magickbase.vercel.app/ to @stone_king ask for his department to help test it?

[Keith-CY]

How about trying various thresholds and deploying them on vercel, and request feedbacks from several users.

the pr for test nervosnetwork/ckb-explorer-frontend#1249

How can we find some testers, or send https://ckb-explorer-n3xjuue6s-magickbase.vercel.app/ to @stone_king ask for his department to help test it?

I'll contact some users for tests

[Keith-CY]

Performance on Edge for MacOS

Edge Version 114.0.1823.41 (Official build) (x86_64)

[Keith-CY]

Performance on Edge for MacOS

Edge Version 114.0.1823.41 (Official build) (x86_64)

Detection of GPU was supported by https://github.com/nervosnetwork/ckb-explorer-frontend/commit/6486893f374d05aabe15bef24cccd733f8f06648, does it work in your case? @doitian

[doitian]

https://ckb-explorer-n3xjuue6s-magickbase.vercel.app/

[Keith-CY]

ckb-explorer-n3xjuue6s-magickbase.vercel.app

My bad, the detection of gpu was deployed to the testnet, and please verify if it works at https://pudge.explorer.nervos.org/

GPU was arranged into 4 tiers, and the animation of banner shows when GPU is of the highest 2 tiers, while the static banner shows when GPU is of the other tiers.

---

Link https://ckb-explorer-n3xjuue6s-magickbase.vercel.app/30 was a preview link for a threshold of 30fps as the condition.

[doitian]

The browser is still stucked when opening https://pudge.explorer.nervos.org/