Pendekatan untuk memuatkan elemen tersuai malas

Artikel ini meneroka kaedah pemuatan malas untuk elemen tersuai untuk meningkatkan prestasi laman web. Kaedah ini diilhamkan oleh eksperimen rakan sekerja, dan idea terasnya secara automatik memuatkan kod pelaksanaan yang sepadan selepas elemen tersuai ditambah ke DOM.

Biasanya, tidak ada keperluan untuk mekanisme pemuatan malas yang kompleks, tetapi teknik -teknik yang diterangkan dalam artikel ini masih berharga untuk senario tertentu.

Untuk mengekalkan konsistensi, pemuat malas itu sendiri juga direka sebagai elemen tersuai untuk konfigurasi mudah melalui HTML. Pertama, kita perlu secara beransur -ansur mengenal pasti unsur -unsur tersuai yang tidak dapat diselesaikan:

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

Dengan mengandaikan bahawa kami telah memprediksi modul ini (idealnya menggunakan kaedah async), kami boleh menambah elemen

ke dokumen. Ini akan segera memulakan proses carian untuk semua elemen kanak -kanak yang membentuk elemen akar. Dengan menambahkan <ce-autoloader></ce-autoloader> ke elemen kontena yang sepadan, anda boleh mengehadkan skop carian ke subtree dokumen, dan juga menggunakan beberapa contoh dalam subtrees yang berbeza. <ce-autoloader></ce-autoloader>

Seterusnya, kita perlu melaksanakan kaedah

(sebagai sebahagian daripada kelas di atas): discover AutoLoader

Kod ini memeriksa untuk elemen akar dan semua keturunannya (*). Jika elemen itu adalah elemen tersuai (label hyphenated) tetapi belum dinaik taraf, cuba memuatkan definisi yang sepadan. Kaedah ini boleh menduduki sejumlah besar sumber pertanyaan DOM, jadi ia perlu dikendalikan dengan berhati -hati. Kita boleh mengurangkan beban pada benang utama dengan melambatkan pelaksanaan:

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);
  });
}

tidak semua penyemak imbas menyokongnya, anda boleh menggunakan

sebagai pelan sandaran: requestIdleCallback requestAnimationFrame

Sekarang, kita boleh melaksanakan kaedah

const defer = window.requestIdleCallback || requestAnimationFrame;

class AutoLoader extends HTMLElement {
  connectedCallback() {
    const scope = this.parentNode;
    defer(() => {
      this.discover(scope);
    });
  }
  // ...
}

, secara dinamik menyuntikkan unsur -unsur

: load <script></script>

Sila ambil perhatian konvensyen keras dalam

load(tag) {
  const el = document.createElement("script");
  const res = new Promise((resolve, reject) => {
    el.addEventListener("load", () => resolve(null));
    el.addEventListener("error", () => reject(new Error("未能找到自定义元素定义")));
  });
  el.src = this.elementURL(tag);
  document.head.appendChild(el);
  return res;
}

elementURL(tag) {
  return `${this.rootDir}/${tag}.js`;
}

. URL atribut

mengandaikan bahawa terdapat direktori yang mengandungi semua definisi elemen tersuai (mis. → ). Kita boleh mengamalkan strategi yang lebih kompleks, tetapi ini cukup untuk tujuan kita. Delegasikan URL ini ke kaedah yang berasingan untuk membolehkan subkelas khusus projek jika diperlukan: elementURL src <my-widget></my-widget> Sama ada cara, kita bergantung pada /components/my-widget.js. Ini adalah konfigurasi yang disebut tadi. Mari tambahkan getter yang sepadan:

class FancyLoader extends AutoLoader {
  elementURL(tag) {
    // 自定义逻辑
  }
}

kita tidak perlu menggunakan this.rootDir kerana mengemas kini harta nampaknya tidak perlu pada masa runtime.

get rootDir() {
  const uri = this.getAttribute("root-dir");
  if (!uri) {
    throw new Error("无法自动加载自定义元素：缺少`root-dir`属性");
  }
  return uri.endsWith("/") ? uri.substring(0, uri.length - 1) : uri;
}

Sekarang, kita boleh (dan mesti) mengkonfigurasi direktori elemen:

. observedAttributes root-dir Dengan ini, autoloader kami berfungsi. Tetapi ia hanya berfungsi untuk unsur -unsur yang sudah wujud apabila autoloader dimulakan. Kita juga mungkin perlu mempertimbangkan elemen ditambah secara dinamik. Di sinilah

dimainkan:

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

Dengan cara ini, penyemak imbas akan memberitahu kami apabila elemen baru muncul di DOM (lebih tepatnya, subtree kami yang sepadan), dan kami kemudian menggunakannya untuk memulakan semula proses carian.

Autoloader kami kini boleh digunakan sepenuhnya. Peningkatan masa depan mungkin termasuk mengkaji keadaan persaingan dan pengoptimuman yang berpotensi. Tetapi untuk kebanyakan senario, sudah cukup. Jika anda mempunyai pendekatan yang berbeza, sila beritahu saya dalam komen dan kami boleh berkomunikasi antara satu sama lain!

Atas ialah kandungan terperinci Pendekatan untuk memuatkan elemen tersuai malas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!