@defer 및 지연 로딩으로 각도 성능 향상

소개

Angular의 새로운 @defer 기능은 특히 지연 로딩 및 렌더링 최적화에서 성능을 향상하기 위한 프레임워크 개선 사항의 일부입니다. @defer 기능과 @placeholder 및 @loading 블록에 대한 간략한 개요는 다음과 같습니다.

@defer 개요

목적

• @defer 기능은 필요할 때까지 애플리케이션 구성 요소나 일부의 로드 및 렌더링을 지연하도록 설계되었습니다. 이를 통해 애플리케이션의 초기 로드 시간을 크게 개선하고 사용자 경험을 향상할 수 있습니다.

용법

• @defer는 구성 요소나 템플릿의 일부에 적용되어 느리게 로드되어야 함을 나타낼 수 있습니다. 이는 사용자가 처음 페이지를 방문할 때 즉시 표시되지 않거나 필요하지 않은 대규모 애플리케이션이나 애플리케이션 섹션에 특히 유용할 수 있습니다.

통사론

• @defer를 사용하는 구문은 간단하며 Angular의 기존 템플릿 구문과 완벽하게 통합됩니다. 사용 방법에 대한 예는 다음과 같습니다.

  @defer {
  <large-component></large-component>
  }

장점

• 성능 최적화: 애플리케이션의 특정 부분 로드를 지연함으로써 초기 로드 시간을 줄여 더 빠르고 응답성이 뛰어난 사용자 경험을 제공할 수 있습니다.
• 리소스 관리: 리소스는 필요한 경우에만 활용되므로 구성 요소 로드를 연기하면 더 나은 리소스 관리에 도움이 됩니다.
• 사용자 경험: 중요한 콘텐츠를 먼저 로드하고 덜 중요한 콘텐츠는 필요할 때까지 연기하여 사용자 경험을 향상합니다.

Angular 생태계와의 통합

• @defer 기능은 다른 Angular 기능 및 도구와 잘 통합되므로 개발자는 지연 로딩, 변경 감지 전략 및 기타 성능 최적화 기술을 응집력 있는 방식으로 활용할 수 있습니다.

미래 전망

• Angular가 계속 발전함에 따라 @defer 기능이 더욱 향상되고 최적화될 가능성이 높습니다. 개발자는 애플리케이션의 일부가 로드되고 렌더링되는 방법과 시기를 보다 세밀하게 제어할 수 있습니다.

@defer 및 IntersectionObserver

내부적으로 @defer는 IntersectionObserver API를 사용합니다. 이 API를 사용하면 대상 요소와 상위 요소 또는 최상위 문서의 뷰포트 교차점의 변경 사항을 관찰할 수 있습니다. 구성 요소가 뷰포트에 진입하려고 할 때까지 구성 요소 로드를 연기하면 사용자가 볼 수 없는 리소스 로드를 방지하여 대역폭과 처리 능력을 절약할 수 있습니다.

IntersectionObserver의 다른 이점

초기 로드 시간 개선: 필요할 때까지 구성 요소를 연기하면 애플리케이션의 가장 중요한 부분만 처음에 로드됩니다. 이렇게 하면 초기 로드 시간이 줄어들고 애플리케이션의 인지된 성능이 향상되어 더 빠르고 반응성이 좋아집니다. Angular는 연기된 구성 요소에 대해 별도의 번들을 생성하므로 기본 번들의 크기도 줄어듭니다.

향상된 사용자 경험: 콘텐츠가 표시되기 직전에 콘텐츠를 로드하면 사용자에게 더욱 원활하고 원활한 경험을 보장할 수 있습니다. 이 기술은 사용자가 스크롤할 때 콘텐츠를 로드하면 애플리케이션이 느려지는 것을 방지할 수 있는 긴 스크롤 페이지에 특히 유용할 수 있습니다.

저전력 장치의 성능 향상: 처리 능력이 제한되어 있거나 네트워크 연결이 느린 장치는 지연 로딩을 통해 상당한 이점을 얻을 수 있습니다. 필요한 구성 요소만 로드함으로써 이러한 장치는 애플리케이션을 보다 효율적으로 처리할 수 있어 다양한 장치의 사용자에게 더 나은 경험을 제공할 수 있습니다.

예

옵션 없이 @defer 사용

다음은 Angular 애플리케이션에서 @defer를 사용하는 방법을 보여주는 예입니다. 먼저 이미지를 로드하는 구성요소를 만듭니다. 독립 실행형 구성 요소를 사용하는 것은 @defer의 요구 사항입니다.

import { Component } from "@angular/core";

@Component({
  selector: "app-images",
  standalone: true,
  template: `<div style="display: flex; flex-direction: column;">
    @for(image of list; track image) {
    <img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172288960334356.png?x-oss-process=image/resize,p_40" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="@defer 및 지연 로딩으로 각도 성능 향상" >
    }
  </div> `,
})
export class ImagesComponent {
  list = Array(5).fill("https://placehold.co/600x400");
}

그리고 여기서는 옵션 없이 @defer를 사용하고 있습니다.

<h1 id="Angular-Defer-Sample-Application">Angular Defer Sample Application</h1>
@defer () {
<app-images></app-images>
}

이제 생성된 번들을 보면 이미지 구성 요소에 자체 청크가 있음을 알 수 있습니다.

네트워크 탭에서 페이지가 로드되면 이 번들이 이제 런타임에 로드되는 것을 볼 수 있습니다.

옵션과 함께 @defer 사용

사용자 경험을 향상하기 위해 여러 가지 옵션을 사용할 수 있습니다. 이 섹션에서는 그 중 일부를 살펴보겠습니다.

Using @placeholder

By default, the defer block will render the content when it is visible in the viewport. However, there can be delays, for example, when the components are making HTTP requests. In those scenarios, we can use the @placeholder option. The content used for the placeholder is not lazy loaded. The content in the @placeholder is shown first until the @defer block's contents are ready to render. The placeholder itself comes with an optional argument called minimum. This allows you to set the time to display the content.

Here is how this would look:

<h1 id="Angular-Defer-Sample-Application">Angular Defer Sample Application</h1>
@defer () {
<app-images></app-images>
} @placeholder (minimum 500ms) {
<p>Loading Images</p>
}

And here is how this looks:

Using @loading

The @loading block is used to display some content while the content defined in the @defer block is still loading or has started to load. This is different from the @placeholder block, which will appear before the loading starts. This block comes with two optional arguments, after and minimum. Similar to the @placeholder argument, the minimum argument is used to set the time to display the content. The second argument, after, is used to define the waiting time before showing the @loading content.

Here is how this would look:

<h1 id="Angular-Defer-Sample-Application">Angular Defer Sample Application</h1>
@defer () {
<app-images></app-images>
} @loading (after 1s; minimum 500ms) {
<p>Loading Images</p>
}

While you may not see this properly in the animated GIF, we are telling the block to wait at least 1 second before displaying the @loading content and show it for at least 500 ms.

Conclusion

The @defer feature in Angular is a powerful tool for enhancing performance and user experience by delaying the loading of components until they are needed. By integrating this feature with options like @placeholder and @loading, developers can create more efficient and responsive applications. As Angular continues to evolve, features like @defer will play a crucial role in optimizing resource management and improving application performance across various devices and network conditions.

위 내용은 @defer 및 지연 로딩으로 각도 성능 향상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!