[FE] 배경에 별 깜빡이는 애니매니션 사용시 fps 대폭 감소

[yeynii]

이슈 내용

StarLayer의 애니매이션이 프레임을 많이 잡아먹어 성능저하가 심합니다.

기대 결과

• fps 40~50 이상을 유지해야합니다.

스크린샷

star 300개 찍었을 때

[yeynii]

star 컴포넌트 하나하나에 애니매이션을 걸지않고, star를 여러개 묶은 컴포넌트에 애니매이션을 거는 방식으로 frame rate를 향상시켰습니다.

[JunYupK]

좋은 해결 방법입니다.

[yeynii]

개선전

    <Container>
      {Array.from({ length: 300 }).map((v, i) => {
        const randomSize = Math.random();
        return (
          <Star
            key={i}
            style={{
              width: `${randomSize * 3 + 1}px`,
              height: `${randomSize * 3 + 1}px`,
              animationDuration: `${Math.random() * 5 + 5}s`,
              animationDelay: `${Math.random() * 5}s`,
              top: `${Math.random() * height}px`,
              left: `${Math.random() * width}px`,
            }}
          >
            <Blur />
          </Star>
        );
      })}
    </Container>

개선후

    <Container>
      {Array.from({ length: 15 }, (_, i) => {
        const randomConstant = Math.random();
        return (
          <Stars
            key={i}
            style={{
              animationDuration: `${randomConstant * 5 + 5}s`,
              animationDelay: `${randomConstant * 5}s`,
            }}
          >
            {Array.from({ length: 20 }, (_, j) => (
              <Star
                key={j}
                style={{
                  width: `${randomConstant * 3 + 1}px`,
                  height: `${randomConstant * 3 + 1}px`,
                  top: `${Math.random() * height}px`,
                  left: `${Math.random() * width}px`,
                }}
              >
                <Blur />
              </Star>
            ))}
          </Stars>
        );
      })}
    </Container>