search

gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.21k stars 10.33k forks source link

low routing performance #13944

Closed onopko81 closed 5 years ago

onopko81 commented 5 years ago

Hi, I'm realizing my portfolio with gatsby, I use threejs and gsap for the part of 3d and animations. The performances of animations and 3D renderings are reduced at each page change using "Link". I analyzed fps of my background component (made in webgl) goes from 60fps and is reduced to 10 at each page change. What can it depend on?

sidharthachatterjee commented 5 years ago

The Link component is a wrapper on top of https://reach.tech/router/api/Link

It does a bunch of things including prefetching assets on hover etc but not sure if the reduced fps is relevant here. Perhaps try using Link from reach directly to see it if has to do with page navigation in general or anything specific to Gatsby?

onopko81 commented 5 years ago

I try this solution. I am also trying to use removeListeners in the project.

onopko81 commented 5 years ago

The problem concerns the navigation of the pages, with each click the performances are reduced more and more drastically.

KyleAMathews commented 5 years ago

Perhaps you're not cleaning up old animations? Gatsby doesn't do anything special when a link is changes. Just renders the new page.

onopko81 commented 5 years ago

I solved, I removed the hover and mouse events, I also used cancelAnimationFrame and removeChild for the 3d render. Performance now is ok.

KyleAMathews commented 5 years ago

Great! Closing now.