게으른 하중의 개념을 설명하십시오.-프런트엔드 Q&A-php.cn

게으른 하중의 개념을 설명하십시오.

Lazy Loading은 웹 개발 및 기타 소프트웨어 필드에서 일반적으로 사용되는 설계 패턴으로, 실제로 필요할 때까지 객체의 초기화 또는 데이터로드를 연기합니다. 이 기술은 특히 초기 페이지로드 시간의 속도를 크게 높일 수있는 웹에서 응용 프로그램의 성능 및 리소스 효율성을 향상시키는 데 특히 유용합니다.

웹 개발의 맥락에서 게으른로드는 일반적으로 이미지, 비디오 또는 초기 뷰포트 (스크롤없이 볼 수있는 웹 페이지의 일부) 아래에있을 수있는 이미지, 비디오 또는 기타 컨텐츠에 적용됩니다. 페이지가로드 될 때 모든 리소스를로드하는 대신, 게으른로드는 사용자가 해당 리소스가 필요한 페이지의 일부로 스크롤 될 때까지 기다립니다. 이는 리소스가 뷰포트에 들어갈 때만 가져 와서로드하여 서버의 초기로드를 줄이고 페이지와 상호 작용하기 전에 사용자가 기다리는 시간을 줄입니다.

게으른 하중의 구현은 다양 할 수 있지만 일반적으로 전체 컨텐츠가 필요할 때까지 자리 표시 자 요소 또는 저해상도 버전의 이미지를 설정하는 것이 포함됩니다. 사용자가 스크롤함에 따라 JavaScript는 요소가 표시되는시기를 감지 한 다음 필요한 컨텐츠를로드 할 수 있습니다.

웹 개발에서 게으른로드를 사용하면 어떤 이점이 있습니까?

게으른로드는 웹 개발에서 몇 가지 주요 이점을 제공합니다.

초기 페이지로드 시간이 빨라지는 시간 : 처음에는 필수 컨텐츠 만로드하고 다른 요소를 연기하면 페이지의 초기로드 시간을 크게 줄일 수 있습니다. 이는 특히 모바일 장치 또는 느린 인터넷 연결에서 사용자 경험을 향상시키는 데 중요합니다.
서버로드 감소 : 초기로드시 더 적은 리소스가 요청되면 서버는 작업 할 작업이 적습니다. 이는 트래픽이 높은 사이트 또는 제한된 서버 리소스가있는 사이트에 특히 도움이 될 수 있습니다.
향상된 자원 관리 : 게으른로드는 메모리와 대역폭을보다 효율적으로 관리하는 데 도움이됩니다. 사용자가 볼 수없는 컨텐츠에 자원을 낭비하지 않으며, 이는 긴 스크롤 페이지 또는 단일 페이지 응용 프로그램에서 일반적입니다.
향상된 사용자 경험 : 사용자는 페이지와 더 빨리 상호 작용을 시작하고 스크롤함에 따라 새로운 콘텐츠가 동적으로로드 될 수 있습니다. 이로 인해 전반적인 경험이 더 유동적이고 반응이 좋을 수 있습니다.
더 나은 SEO : Google과 같은 검색 엔진은 페이지 순위를 매길 때 페이지로드 속도를 고려합니다. 게으른로드 덕분에 더 빠른로드 페이지는 더 나은 SEO 순위를받을 수 있습니다.

Lazy Loading은 웹 사이트 성능 및 사용자 경험에 어떤 영향을 미칩니 까?

게으른 로딩은 웹 사이트 성능과 사용자 경험에 큰 영향을 미칩니다.

웹 사이트 성능 :

초기 부하 시간 감소 : 비정규 자원을 미리로드하지 않으면 초기 컨텐츠가 대화식이되기 위해 걸리는 시간이 줄어 듭니다. 이것은 TTI (Time to Interactive)와 같은 메트릭으로 측정되며 게으른 하중으로 개선됩니다.
대역폭 절약 : 사용자, 특히 모바일 또는 제한된 데이터 요금제 사용자는 볼 수없는 리소스를 다운로드 할 필요가 없으므로 데이터를 크게 절약 할 수 있습니다.
서버로드 : 리소스가 동시에 요청되면 서버는 긴장이 줄어들어 모든 사용자에게 더 빠른 응답으로 이어질 수 있습니다.

사용자 경험 :

인식 된 속도 : 사용자는 사이트를 더 빨리 사용할 수 있기 때문에 사이트를 더 빨리 인식합니다. 사용자 스크롤이 페이지에 역동적이고 매력적인 느낌을 줄 수 있기 때문에 비틀 거리는 이미지 또는 기타 컨텐츠로드.
반응 형 디자인 : 큰 이미지 또는 미디어가 많은 섹션이있는 사이트의 경우 Lazy Loading은 응답 성을 유지하여 무거운 컨텐츠를로드 할 때도 페이지를 부드럽고 기능적으로 유지하는 데 도움이됩니다.
접근성 : 필요에 따라 콘텐츠를로드하면 Lazy Loading을 사용하면 연결이 느려지거나 강력한 장치를 사용하는 사용자가 한 번에 전체로드에 압도되지 않고 사이트의 핵심 컨텐츠에 여전히 액세스 할 수 있습니다.

게으른 하중을 다른 유형의 컨텐츠에 적용 할 수 있으며, 그렇다면 어떻게합니까?

예, 웹 페이지의 다양한 유형의 콘텐츠에 게으른 로딩을 적용 할 수 있습니다. 다른 유형에 대해 구현할 수있는 방법은 다음과 같습니다.

이미지 : 이것은 게으른 하중의 가장 일반적인 사용 사례입니다. 처음에는 자리 표시 자 또는 저해상도 버전으로 이미지를 설정할 수 있습니다. 사용자가 이미지로 스크롤함에 따라 실제 고해상도 이미지가로드됩니다. 이것은 종종 HTML의 loading="lazy" 속성을 사용하여 또는 JavaScript 라이브러리를 통해 달성됩니다.
비디오 : 이미지와 유사하게 비디오 컨텐츠도 게으른로드 할 수 있습니다. 포스터 이미지 만 처음에는로드되며 사용자가 상호 작용하려고 할 때 또는 비디오가 볼 때 실제 비디오 파일이 가져옵니다.
JavaScript : 복잡한 웹 애플리케이션의 경우 모든 JavaScript가 즉시 필요한 것은 아닙니다. 기능이 필요한 경우 특정 스크립트를 게으르면 초기로드 시간이 줄어 듭니다.
iframes : 임베디드 맵 또는 소셜 미디어 게시물과 같은 iframes 내의 콘텐츠도 게으른로드 할 수 있습니다. 처음에는 빈 Iframe 또는 자리 표시자를 표시 할 수 있으며 실제 콘텐츠가 뷰포트에 들어갈 때로드됩니다.
글꼴 : 웹 글꼴은 게으른로드하여 페이지 렌더링 속도를 높일 수 있습니다. Custom Web Font가 백그라운드에서 다운로드되고 준비된 경우 교체되는 동안 중요한 텍스트는 폴백 글꼴로 표시 될 수 있습니다.