[angular] 트래킹 앵커 최적화
Angular는 웹 애플리케이션에서 트래킹 앵커를 사용하여 페이지 내에서 특정 섹션으로 스크롤할 수 있게 해주는 기능을 제공합니다. 그러나 앵커를 사용하면 성능 문제가 발생할 수 있으며, 특히 대규모 애플리케이션의 경우 이 문제가 심각해질 수 있습니다.
이번 글에서는 Angular 애플리케이션에서 트래킹 앵커의 성능을 최적화하는 방법을 살펴보겠습니다.
1. 앵커 스크롤 최적화
앵커를 클릭했을 때 해당 앵커로 부드럽게 스크롤되는 기능을 구현할 때, Angular와 함께 제공되는 애니메이션을 사용하는 것이 일반적입니다. 그러나 이 방법은 성능을 저하시킬 수 있습니다. 대신 window.requestAnimationFrame을 사용하여 자체적으로 애니메이션을 처리하는 것이 성능상 유리합니다.
export class AnchorScrollService {
constructor(private document: Document) {}
public scrollToAnchor(anchor: string) {
const target = this.document.getElementById(anchor);
if (target) {
const start = window.pageYOffset;
const end = target.offsetTop;
const distance = end - start;
let startTime: number;
function scrollTo(timestamp: number) {
if (!startTime) {
startTime = timestamp;
}
const elapsed = timestamp - startTime;
const progress = Math.min(elapsed / 500, 1);
window.scrollTo(0, start + distance * progress);
if (elapsed < 500) {
window.requestAnimationFrame(scrollTo);
}
}
window.requestAnimationFrame(scrollTo);
}
}
}
2. 불필요한 앵커 스크롤 방지
웹 애플리케이션에 수많은 앵커가 있는 경우, 사용자가 스크롤할 때마다 불필요한 앵커 스크롤 연산이 발생할 수 있습니다. 이를 방지하기 위해 스크롤 이벤트를 구독하여 불필요한 앵커 스크롤을 방지할 수 있습니다.
@HostListener('window:scroll', [])
onWindowScroll() {
this.isScrolling = true;
if (this.scrollTimer) {
clearTimeout(this.scrollTimer);
}
this.scrollTimer = setTimeout(() => {
this.isScrolling = false;
}, 100);
}
3. 앵커 내비게이션 최적화
앵커 내비게이션을 위해 Angular의 내장된 @angular/router를 사용하는 경우, 라우팅 모듈을 로드할 때 PreloadAllModules 옵션을 사용하여 모든 모듈을 사전로드하는 것이 좋습니다. 이렇게 함으로써 사용자가 앵커를 클릭할 때 해당 모듈이 로드되는 시간을 단축할 수 있습니다.
import { RouterModule, Routes, PreloadAllModules } from '@angular/router';
@NgModule({
imports: [RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules })],
exports: [RouterModule],
})
export class AppRoutingModule {}
위의 방법들을 적용하면 Angular 애플리케이션에서 트래킹 앵커의 성능을 향상시킬 수 있으며, 사용자 경험을 향상시킬 수 있습니다.