지연 로딩을 통해 PHP 웹 사이트의 액세스 속도를 향상시키는 방법은 무엇입니까?-PHP 튜토리얼-php.cn

집

백엔드 개발

PHP 튜토리얼

지연 로딩을 통해 PHP 웹 사이트의 액세스 속도를 향상시키는 방법은 무엇입니까?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 07, 2023 am 11:13 AM

php지연 로딩액세스 속도

지연 로딩을 통해 PHP 웹사이트의 액세스 속도를 향상시키는 방법은 무엇입니까?

Lazy Loading은 웹사이트 접속 속도를 향상시키고 불필요한 리소스 로딩을 줄이며 사용자 경험을 향상시킬 수 있는 일반적인 최적화 기술입니다. PHP 웹 사이트 개발에서 지연 로딩은 일반적으로 이미지, 비디오, 스크립트 및 기타 리소스의 로딩을 지연하는 데 사용됩니다.

이 글에서는 지연 로딩을 통해 PHP 웹 사이트의 액세스 속도를 향상시키는 방법을 소개하고 코드 예제를 통해 이를 보여줍니다.

지연 로딩 플러그인 라이브러리 사용

지연 로딩에는 일반적으로 플러그인 라이브러리의 도움이 필요합니다. 현재 Lazy Load, Unveil.js 등과 같이 선택할 수 있는 우수한 지연 로딩 라이브러리가 많이 있습니다. 이러한 플러그인 라이브러리는 npm이나 CDN을 통해 도입할 수 있어 편리하고 빠릅니다.

다음은 Lazy Load 플러그인 라이브러리를 사용하여 이미지 지연 로딩을 구현하는 샘플 코드입니다.

<!-- 在<head>标签中引入Lazy Load插件库 -->
<script src="https://cdn.jsdelivr.net/npm/lazyload/lazyload.js"></script>

<!-- 在<img  class="lazy lazy"  src="/static/imghwm/default1.png"  data-src="path/to/your/image.jpg"  alt="지연 로딩을 통해 PHP 웹 사이트의 액세스 속도를 향상시키는 방법은 무엇입니까?" >标签中添加"data-src"属性，将图片的真实地址放到"data-src"中，同时添加"class"属性指定懒加载样式-->
<img class="lazy lazy"  src="/static/imghwm/default1.png"  data-src="path/to/your/image.jpg"  data- alt="">

<!-- 在<script>标签中初始化Lazy Load插件 -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

    if ("IntersectionObserver" in window) {
      let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            let lazyImage = entry.target;
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.classList.remove("lazy");
            lazyImageObserver.unobserve(lazyImage);
          }
        });
      });

      lazyImages.forEach(function(lazyImage) {
        lazyImageObserver.observe(lazyImage);
      });
    }
  });
</script>

위 샘플 코드에서는 <img src="/static/imghwm/default1.png" data-src="path/to/your/video.mp4" class="lazy" alt="지연 로딩을 통해 PHP 웹 사이트의 액세스 속도를 향상시키는 방법은 무엇입니까?" >data-src 태그 /code> 속성을 지정하고 <code>data-src에 이미지의 실제 주소를 할당합니다. 동시에 지연 로딩 스타일을 지정하기 위해 class 속성도 추가했습니다. <img src="/static/imghwm/default1.png" data-src="path/to/your/video.mp4" class="lazy" alt="지연 로딩을 통해 PHP 웹 사이트의 액세스 속도를 향상시키는 방법은 무엇입니까?" >标签中添加了data-src属性，并将图片的真实地址赋值给data-src。同时，我们还添加了class属性来指定懒加载样式。

在<script></script>标签中，我们首先使用document.querySelectorAll方法选择了所有具有lazy类的图片，然后使用IntersectionObserver监听图片是否进入视窗。当图片进入视窗时，我们更新了src属性的值，将真实的图片地址赋给src，并移除lazy类，以显示真实图片。最后，我们调用observe方法开始观察所有的懒加载图片。

懒加载音视频资源

除了图片，懒加载也可以用于音视频资源。我们可以通过监听页面滚动事件，判断音视频元素是否在视窗范围内，并在需要时加载和播放。

以下是一个使用懒加载实现视频懒加载的示例代码：

<video controls muted loop autoplay preload="none" id="lazy-video"></video>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var lazyVideo = document.getElementById("lazy-video");

    window.addEventListener("scroll", function() {
      var rect = lazyVideo.getBoundingClientRect();
      var inViewPort = (rect.top >= 0 && rect.bottom <= window.innerHeight);
      if (inViewPort) {
        lazyVideo.src = lazyVideo.dataset.src;
      }
    });
  });
</script>

在上述示例代码中，我们首先在<video></video>标签中添加了preload="none"属性，以指定视频为不主动预加载。然后，我们在<script></script>标签中监听了页面滚动事件，并通过getBoundingClientRect方法获取视频元素的位置信息。最后，我们判断视频是否在视窗范围内，如果是，则将真实的视频地址赋给src

<script></script> 태그에서 먼저 document.querySelectorAll 메서드를 사용하여 lazy 클래스가 있는 모든 이미지를 선택한 다음 IntersectionObserver를 사용하면 이미지가 창에 들어오는지 여부를 모니터링합니다. 이미지가 창에 들어가면 src 속성 값을 업데이트하고 실제 이미지 주소를 src에 할당하고 lazy 클래스를 제거합니다. . 실제 사진을 보여줍니다. 마지막으로 observe 메서드를 호출하여 모든 지연 로딩 이미지 관찰을 시작합니다.

<video>에 <code>preload="none

<script></script>

getBoundingClientRect

src

위 내용은 지연 로딩을 통해 PHP 웹 사이트의 액세스 속도를 향상시키는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

PHP : 서버 측 스크립팅 언어 소개Apr 16, 2025 am 12:18 AM

PHP는 동적 웹 개발 및 서버 측 응용 프로그램에 사용되는 서버 측 스크립팅 언어입니다. 1.PHP는 편집이 필요하지 않으며 빠른 발전에 적합한 해석 된 언어입니다. 2. PHP 코드는 HTML에 포함되어 웹 페이지를 쉽게 개발할 수 있습니다. 3. PHP는 서버 측 로직을 처리하고 HTML 출력을 생성하며 사용자 상호 작용 및 데이터 처리를 지원합니다. 4. PHP는 데이터베이스와 상호 작용하고 프로세스 양식 제출 및 서버 측 작업을 실행할 수 있습니다.

PHP 및 웹 : 장기적인 영향 탐색Apr 16, 2025 am 12:17 AM

PHP는 지난 수십 년 동안 네트워크를 형성했으며 웹 개발에서 계속 중요한 역할을 할 것입니다. 1) PHP는 1994 년에 시작되었으며 MySQL과의 원활한 통합으로 인해 개발자에게 최초의 선택이되었습니다. 2) 핵심 기능에는 동적 컨텐츠 생성 및 데이터베이스와의 통합이 포함되며 웹 사이트를 실시간으로 업데이트하고 맞춤형 방식으로 표시 할 수 있습니다. 3) PHP의 광범위한 응용 및 생태계는 장기적인 영향을 미쳤지 만 버전 업데이트 및 보안 문제에 직면 해 있습니다. 4) PHP7의 출시와 같은 최근 몇 년간의 성능 향상을 통해 현대 언어와 경쟁 할 수 있습니다. 5) 앞으로 PHP는 컨테이너화 및 마이크로 서비스와 같은 새로운 도전을 다루어야하지만 유연성과 활발한 커뮤니티로 인해 적응력이 있습니다.

PHP를 사용하는 이유는 무엇입니까? 설명 된 장점과 혜택Apr 16, 2025 am 12:16 AM

PHP의 핵심 이점에는 학습 용이성, 강력한 웹 개발 지원, 풍부한 라이브러리 및 프레임 워크, 고성능 및 확장 성, 크로스 플랫폼 호환성 및 비용 효율성이 포함됩니다. 1) 배우고 사용하기 쉽고 초보자에게 적합합니다. 2) 웹 서버와 우수한 통합 및 여러 데이터베이스를 지원합니다. 3) Laravel과 같은 강력한 프레임 워크가 있습니다. 4) 최적화를 통해 고성능을 달성 할 수 있습니다. 5) 여러 운영 체제 지원; 6) 개발 비용을 줄이기위한 오픈 소스.

신화를 폭로 : PHP가 실제로 죽은 언어입니까?Apr 16, 2025 am 12:15 AM

PHP는 죽지 않았습니다. 1) PHP 커뮤니티는 성능 및 보안 문제를 적극적으로 해결하고 PHP7.x는 성능을 향상시킵니다. 2) PHP는 최신 웹 개발에 적합하며 대규모 웹 사이트에서 널리 사용됩니다. 3) PHP는 배우기 쉽고 서버가 잘 수행되지만 유형 시스템은 정적 언어만큼 엄격하지 않습니다. 4) PHP는 컨텐츠 관리 및 전자 상거래 분야에서 여전히 중요하며 생태계는 계속 발전하고 있습니다. 5) Opcache 및 APC를 통해 성능을 최적화하고 OOP 및 설계 패턴을 사용하여 코드 품질을 향상시킵니다.

PHP vs. Python 토론 : 어느 것이 더 낫습니까?Apr 16, 2025 am 12:03 AM

PHP와 Python에는 고유 한 장점과 단점이 있으며 선택은 프로젝트 요구 사항에 따라 다릅니다. 1) PHP는 웹 개발, 배우기 쉽고 풍부한 커뮤니티 리소스에 적합하지만 구문은 현대적이지 않으며 성능과 보안에주의를 기울여야합니다. 2) Python은 간결한 구문과 배우기 쉬운 데이터 과학 및 기계 학습에 적합하지만 실행 속도 및 메모리 관리에는 병목 현상이 있습니다.

PHP의 목적 : 동적 웹 사이트 구축Apr 15, 2025 am 12:18 AM

PHP는 동적 웹 사이트를 구축하는 데 사용되며 해당 핵심 기능에는 다음이 포함됩니다. 1. 데이터베이스와 연결하여 동적 컨텐츠를 생성하고 웹 페이지를 실시간으로 생성합니다. 2. 사용자 상호 작용 및 양식 제출을 처리하고 입력을 확인하고 작업에 응답합니다. 3. 개인화 된 경험을 제공하기 위해 세션 및 사용자 인증을 관리합니다. 4. 성능을 최적화하고 모범 사례를 따라 웹 사이트 효율성 및 보안을 개선하십시오.

PHP : 데이터베이스 및 서버 측 로직 처리Apr 15, 2025 am 12:15 AM

PHP는 MySQLI 및 PDO 확장 기능을 사용하여 데이터베이스 작업 및 서버 측 로직 프로세싱에서 상호 작용하고 세션 관리와 같은 기능을 통해 서버 측로 로직을 처리합니다. 1) MySQLI 또는 PDO를 사용하여 데이터베이스에 연결하고 SQL 쿼리를 실행하십시오. 2) 세션 관리 및 기타 기능을 통해 HTTP 요청 및 사용자 상태를 처리합니다. 3) 트랜잭션을 사용하여 데이터베이스 작업의 원자력을 보장하십시오. 4) SQL 주입 방지, 디버깅을 위해 예외 처리 및 폐쇄 연결을 사용하십시오. 5) 인덱싱 및 캐시를 통해 성능을 최적화하고, 읽을 수있는 코드를 작성하고, 오류 처리를 수행하십시오.

PHP에서 SQL 주입을 어떻게 방지합니까? (준비된 진술, pdo)Apr 15, 2025 am 12:15 AM

PHP에서 전처리 문과 PDO를 사용하면 SQL 주입 공격을 효과적으로 방지 할 수 있습니다. 1) PDO를 사용하여 데이터베이스에 연결하고 오류 모드를 설정하십시오. 2) 준비 방법을 통해 전처리 명세서를 작성하고 자리 표시자를 사용하여 데이터를 전달하고 방법을 실행하십시오. 3) 쿼리 결과를 처리하고 코드의 보안 및 성능을 보장합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는