게으른 로딩 사용자 지정 요소에 대한 접근

이 기사는 웹 페이지 성능을 향상시키기위한 사용자 정의 요소가 게으른로드 방법을 탐색합니다. 이 방법은 동료의 실험에서 영감을 얻었으며, 핵심 아이디어는 사용자 정의 요소를 DOM에 추가 한 후 해당 구현 코드를 자동으로로드하는 것이 었습니다.

일반적으로, 그러한 복잡한 게으른 하중 메커니즘이 필요하지 않지만,이 기사에 설명 된 기술은 여전히 ​​특정 시나리오에 유용합니다.

일관성을 유지하기 위해 게으른 로더 자체는 HTML을 통해 쉽게 구성 할 수있는 사용자 정의 요소로 설계되었습니다. 먼저, 해결되지 않은 사용자 지정 요소를 점차 식별해야합니다.

이 모듈을 사전로드했다고 가정하면 (이상적으로는 비동기 메소드를 사용)

요소를 문서에 추가 할 수 있습니다. 이것은 루트 요소를 형성하는 모든 자식 요소에 대한 검색 프로세스를 즉시 시작합니다. 해당 컨테이너 요소에

를 추가하면 조회도의 범위를 문서의 하위 트리로 제한하고 다른 하위 트리에서 여러 인스턴스를 사용할 수도 있습니다.

다음으로 메소드 (위의 클래스의 일부로)를 구현해야합니다.

이 코드는 루트 요소와 모든 후손 (*)을 확인합니다. 요소가 사용자 정의 요소 (하이픈 레이블)이지만 아직 업그레이드되지 않은 경우 해당 정의를로드하십시오. 이 방법은 많은 양의 DOM 쿼리 리소스를 차지할 수 있으므로주의해서 처리해야합니다. 실행을 지연시켜 주 스레드의 하중을 줄일 수 있습니다.

class AutoLoader extends HTMLElement {
  connectedCallback() {
    const scope = this.parentNode;
    this.discover(scope);
  }
}
customElements.define("ce-autoloader", AutoLoader);

모든 브라우저가 지원하는 것은 아니며

를 백업 계획으로 사용할 수 있습니다. <ce-autoloader></ce-autoloader> 이제, 우리는 <ce-autoloader></ce-autoloader> 메소드를 구현할 수 있으며

요소를 동적으로 주입 할 수 있습니다.

discover의 하드 코드 컨벤션에 주목하십시오. 속성의 URL은 모든 사용자 정의 요소 정의를 포함하는 디렉토리가 있다고 가정합니다 (예 : ). 우리는보다 복잡한 전략을 채택 할 수 있지만 이것은 우리의 목적에 충분합니다. 필요한 경우 프로젝트 별 하위 클래싱을 허용하기 위해이 URL을 별도의 방법으로 위임하십시오. AutoLoader 어느 쪽이든, 우리는

에 의존합니다. 이것은 앞에서 언급 한 구성 가능성입니다. 해당 getter를 추가합시다 :

discover(scope) {
  const candidates = [scope, ...scope.querySelectorAll("*")];
  for (const el of candidates) {
    const tag = el.localName;
    if (tag.includes("-") && !customElements.get(tag)) {
      this.load(tag);
    }
  }
}

를 업데이트 할 필요는 없습니다. 속성을 ​​업데이트하면 런타임에 불필요 해 보입니다.

connectedCallback() {
  const scope = this.parentNode;
  requestIdleCallback(() => {
    this.discover(scope);
  });
}

이제, 우리는 요소 디렉토리를 구성 할 수 있습니다 : .

이와 함께, 우리의 자동 로더는 작동합니다. 그러나 Autoloader가 초기화 될 때 이미 존재하는 요소에 대해서만 작동합니다. 동적으로 추가 된 요소를 고려해야 할 수도 있습니다. 이것은 requestIdleCallback가 시작되는 곳입니다 :

class AutoLoader extends HTMLElement {
  connectedCallback() {
    const scope = this.parentNode;
    this.discover(scope);
  }
}
customElements.define("ce-autoloader", AutoLoader);

이런 식으로 브라우저는 DOM에 새 요소가 나타날 때 (보다 정확하게, 해당 하위 트리)를 통지 한 다음이를 사용하여 조회 프로세스를 다시 시작합니다.

우리의 자동 로더는 이제 완전히 사용할 수 있습니다. 향후 향상에는 잠재적 경쟁 조건 및 최적화 연구가 포함될 수 있습니다. 그러나 대부분의 시나리오에서는 충분합니다. 다른 접근 방식이 있으면 의견에 알려 주시면 서로 의사 소통 할 수 있습니다!

위 내용은 게으른 로딩 사용자 지정 요소에 대한 접근의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!