Tunggu, HTML Mempunyai Kitaran Hayat?

Kitaran Hayat Asli HTML (Kitaran Hayat) lazimnya merujuk kepada peristiwa dan peringkat yang dialami oleh penyemak imbas semasa memuatkan dan memproses halaman web. Walaupun HTML itu sendiri ialah bahasa penanda dan tidak mempunyai cangkuk kitaran hayat seperti JavaScript, peristiwa kitaran hayat HTML sebenarnya diuruskan melalui interaksi JavaScript dengan DOM (Model Objek Dokumen).

Penghuraian HTML

Apabila penyemak imbas memuatkan halaman web, ia menerima fail HTML daripada pelayan dan mula menghuraikannya. Semasa peringkat ini, penyemak imbas mencipta pepohon DOM (Model Objek Dokumen) dan menukar HTML kepada objek DOM yang boleh dimanipulasi.

Tegasnya, penghuraian HTML ialah fasa penting dalam proses pemuatan halaman tetapi tidak termasuk dalam kategori "peristiwa kitaran hayat" dalam erti kata tradisional, kerana ia tidak boleh ditangkap atau didengar secara langsung melalui JavaScript. Walau bagaimanapun, dari perspektif yang lebih luas, penghuraian HTML merupakan bahagian yang amat diperlukan dalam kitaran hayat keseluruhan halaman, menjadikannya komponen penting dalam perbincangan tentang kitaran hayat HTML.

Proses ini adalah dalaman kepada penyemak imbas, jadi pembangun tidak boleh mendengar terus fasa ini. Walau bagaimanapun, mereka boleh meningkatkan kelajuan penghuraian dengan mengoptimumkan struktur HTML dan meminimumkan sumber penyekatan (seperti fail JavaScript).

Memuatkan Sumber Luaran

Semasa pelayar menghuraikan HTML, ia menemui sumber luaran. Bergantung pada jenis sumber, kaedah pemuatan (segerak atau tak segerak) dan keutamaan, penyemak imbas memutuskan cara untuk meneruskan memuatkan dan memaparkan halaman. Tingkah laku ini secara langsung mempengaruhi jujukan pemaparan halaman dan masa pemuatan kandungan yang boleh dilihat oleh pengguna.

Jenis sumber yang berbeza mempunyai gelagat pemuatan yang berbeza, yang mempengaruhi penghuraian dan pemaparan halaman:

1. Pemuatan CSS: Apabila penyemak imbas menemui tag, ia menjeda pemaparan halaman sehingga fail CSS dimuatkan dan dihuraikan sepenuhnya. CSS dianggap sebagai sumber penyekat pemaparan kerana reka letak dan gaya halaman tidak boleh dipaparkan dengan betul tanpa fail CSS.

2. Pemuatan JavaScript: Secara lalai, apabila penyemak imbas menemui tag, ia menghentikan penghuraian HTML sehingga fail JavaScript dimuatkan dan dilaksanakan. Ini dikenali sebagai pemuatan segerak. JavaScript yang dimuatkan secara serentak menyekat penghuraian HTML, menjejaskan masa DOMContentLoaded dan memuatkan acara.

Secara keseluruhannya, memuatkan sumber luaran berkait rapat dengan kitaran hayat halaman kerana pemuatan sumber luaran memberi kesan kepada penghuraian, pemaparan dan pencetus peristiwa kitaran hayat kritikal seperti DOMContentLoaded dan pemuatan. Lebih pendek masa muat sumber luaran, lebih cepat peristiwa kitaran hayat dicetuskan.

Readystate & ReadyStateChange

ReadyState dan ReadyStatechange adalah dua atribut penyemak imbas utama dan peristiwa yang digunakan untuk mengesan keadaan dokumen dan permintaan rangkaian (seperti permintaan AJAX). Mereka membantu pemaju memahami peringkat yang berlainan dalam proses pemuatan halaman web dan melaksanakan operasi yang sepadan semasa peringkat ini. Mereka digunakan terutamanya dalam konteks pemuatan dokumen dan permintaan rangkaian (mis., XMLHTTPREQUEST).

Document.readystate

Dokumen. Properti Properti mewakili keadaan semasa dokumen dan mempunyai tiga nilai yang mungkin, sepadan dengan tahap pemuatan dokumen yang berbeza:

1. Memuatkan : Dokumen masih dimuatkan, dan HTML masih dihuraikan. Pokok Dom belum dibina sepenuhnya. Sumber luaran (seperti imej dan stylesheets) mungkin tidak dimuatkan atau diproses.
2. interaktif : HTML dokumen telah dimuatkan sepenuhnya dan dihuraikan, dan pokok Dom telah dibina. Walau bagaimanapun, stylesheets, imej, dan sumber lain mungkin belum dimuat sepenuhnya.
3. Lengkap : Semua sumber di halaman, termasuk HTML, CSS, JavaScript, Images, dan Subframes, telah dimuatkan sepenuhnya dan diproses. Halaman ini benar -benar siap.

Menggunakan document.readystate, pemaju boleh menyemak keadaan pemuatan dokumen dan melakukan tindakan yang sepadan berdasarkan keadaan yang berbeza. Contohnya:

if (document.readyState === 'complete') {
  // The page is fully loaded; perform page operations
}

Acara ReadyStatechange

Acara ReadyStateChange dicetuskan apabila perubahan dokumen itu berubah. Pemaju boleh mendengar acara ReadyStateChange untuk melaksanakan logik tertentu pada peringkat pemuatan yang berbeza. Contohnya:

document.addEventListener('readystatechange', function () {
  if (document.readyState === 'interactive') {
    // The DOM tree has been completely built; DOM manipulation is now possible
    console.log('DOM is fully parsed');
  } else if (document.readyState === 'complete') {
    // The entire page, including all resources, is fully loaded
    console.log('Page and resources are fully loaded');
  }
});

di bawah adalah contoh HTML yang menggambarkan penggunaan Document.readystate dan ReadyStateChange untuk menjejaki peringkat pemuatan dokumen yang berbeza. Halaman ini mengandungi elemen HTML asas dan memaparkan kandungan atau maklumat yang sepadan pada tahap siap sedia yang berbeza:

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document ReadyState Example</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 20px;
      }
      .status {
        font-size: 1.2em;
        color: #333;
        margin: 20px 0;
      }
      img {
        max-width: 100%;
        height: auto;
      }
    </style>
  
  
    <h1>Hello World</h1>
    <script>
      function updateStatus() {
        console.log(document.readyState);

        switch (document.readyState) {
          case 'loading':
            console.log('loading');
            break;
          case 'interactive':
            console.log('interactive');
            break;
          case 'complete':
            console.log('complete');
            break;
        }
      }

      updateStatus();

      document.addEventListener('readystatechange', updateStatus);
    </script>
  

output kod di atas:

loading
interactive
complete

Acara DomContentLoaded

Acara DomContentLoaded adalah acara utama yang dicetuskan oleh penyemak imbas semasa proses pemuatan dokumen HTML. Ia menandakan bahawa semua elemen dalam dokumen HTML telah dihuraikan sepenuhnya dan pokok Dom telah dibina. Walau bagaimanapun, sumber luaran seperti imej, stylesheets, dan video mungkin belum selesai memuatkan. Ini adalah perbezaan utama antara domcontentloaded dan peristiwa beban.

Acara DomContentLoaded berlaku pada objek dokumen dan mesti ditangkap menggunakan AddEventListener:

document.addEventListener('DOMContentLoaded', () => {});

Acara DOMContentLoaded dicetuskan apabila penyemak imbas selesai menghidupkan dokumen HTML dan menghasilkan semua nod DOM. Walau bagaimanapun, ia tidak memerlukan sumber luaran (mis., Imej, video, stylesheets, atau fail fon) untuk dimuat sepenuhnya.

Sebagai contoh, jika halaman mengandungi imej yang besar, acara domcontentloaded akan dibakar sebelum imej dimuatkan sepenuhnya. Pada ketika ini, Dom Tree dibina sepenuhnya, dan pemaju boleh memanipulasi dan mengakses elemen DOM pada halaman. Berikut adalah contoh:

if (document.readyState === 'complete') {
  // The page is fully loaded; perform page operations
}

Jika terdapat fail JavaScript segerak pada halaman (iaitu, skrip tanpa atribut async atau menangguhkan), penyemak imbas akan menjeda HTML parsing ketika menemui A & lt; skrip & gt; Tag, tunggu skrip untuk dilaksanakan, dan kemudian teruskan parsing. Ini akan melambatkan pencetus acara domcontentloaded.

document.addEventListener('readystatechange', function () {
  if (document.readyState === 'interactive') {
    // The DOM tree has been completely built; DOM manipulation is now possible
    console.log('DOM is fully parsed');
  } else if (document.readyState === 'complete') {
    // The entire page, including all resources, is fully loaded
    console.log('Page and resources are fully loaded');
  }
});

Pesanan output:

1. Perpustakaan dimuatkan ...
2. dom siap!

skrip yang tidak tidak menyekat acara domcontentloaded termasuk:

• skrip dengan atribut async
• skrip ditambahkan secara dinamik ke laman web menggunakan document.createelement ('script')

Acara Window.onload

Acara beban dicetuskan pada objek tetingkap apabila seluruh halaman, termasuk gaya, imej, dan sumber lain, dimuatkan sepenuhnya. Acara ini boleh ditangkap menggunakan harta Onload.

Berikut adalah contoh di mana saiz imej dipaparkan dengan betul kerana window.onload menunggu sehingga semua imej dimuatkan sepenuhnya:

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document ReadyState Example</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 20px;
      }
      .status {
        font-size: 1.2em;
        color: #333;
        margin: 20px 0;
      }
      img {
        max-width: 100%;
        height: auto;
      }
    </style>
  
  
    <h1>Hello World</h1>
    <script>
      function updateStatus() {
        console.log(document.readyState);

        switch (document.readyState) {
          case 'loading':
            console.log('loading');
            break;
          case 'interactive':
            console.log('interactive');
            break;
          case 'complete':
            console.log('complete');
            break;
        }
      }

      updateStatus();

      document.addEventListener('readystatechange', updateStatus);
    </script>
  

Window.onbeforeUnload Event

Acara sebelum ini dicetuskan sebelum halaman hendak dibongkar (mis., Apabila pengguna menavigasi ke halaman lain, menutup tab, atau menyegarkan halaman). Acara ini membolehkan pemaju meminta pengguna mengesahkan jika mereka benar -benar mahu meninggalkan halaman tersebut. Ia biasanya digunakan untuk mengingatkan pengguna untuk menyimpan data yang tidak selamat atau memberi amaran kepada mereka tentang kehilangan data yang berpotensi.

Pelayar membenarkan mesej ringkas dipaparkan semasa acara ini, meminta pengguna jika mereka pasti mereka mahu meninggalkan halaman tersebut. Sebagai contoh, apabila pengguna telah memasukkan kandungan ke dalam bentuk yang tidak diselamatkan, pemaju boleh menggunakan sebelum ini untuk mengelakkan penutupan halaman atau penyegaran halaman yang tidak disengajakan.

Penyemak imbas moden tidak memaparkan mesej prompt tersuai. Sebaliknya, mereka menunjukkan mesej amaran standard. Berikut adalah contoh:

loading
interactive
complete

Apabila pengguna cuba meninggalkan halaman, acara ini mencetuskan dialog pengesahan, meminta mereka sama ada mereka mahu meninggalkan atau tinggal di halaman.

Disebabkan keselamatan dan pengalaman pengalaman pengguna, pelayar mengabaikan mesej tersuai dan sebaliknya memaparkan dialog generik. Terlalu terbenam sebelum ini boleh merendahkan pengalaman pengguna, jadi ia hanya boleh digunakan apabila benar -benar diperlukan, seperti dalam kes data yang tidak diselamatkan.

Acara memunggah

Acara pemunggahan dicetuskan apabila halaman itu dipunggah sepenuhnya (mis., Apabila halaman ditutup, disegarkan, atau dilayari dari). Tidak seperti sebelum ini, acara memunggah tidak dapat menghalang pengguna meninggalkan halaman. Ia digunakan terutamanya untuk melaksanakan tugas pembersihan akhir, seperti membersihkan data sementara, membatalkan permintaan tak segerak, dan melepaskan memori.

Acara pemunggahan tidak boleh mendorong pengguna, tidak seperti sebelum ini. Sebaliknya, ia digunakan untuk operasi seperti menutup sambungan WebSocket, menyimpan data ke penyimpanan tempatan, atau membersihkan pemasa.

Satu permohonan khusus untuk acara pemunggahan adalah untuk menghantar data analisis sebelum halaman memunggah. Kaedah Navigator.Sendbeacon (URL, Data) boleh digunakan untuk menghantar data di latar belakang tanpa melambatkan pemunggahan halaman. Contohnya:

if (document.readyState === 'complete') {
  // The page is fully loaded; perform page operations
}

Apabila permintaan Sendbeacon selesai, penyemak imbas mungkin telah meninggalkan dokumen itu, jadi tidak ada respons pelayan yang boleh diperolehi (respons sering kosong untuk tujuan analisis).

Ringkasan

HTML Parsing membentuk asas kitaran hayat halaman, tetapi ia bukanlah peristiwa kitaran hayat yang boleh dilahirkan oleh JavaScript. Acara domcontentloaded dicetuskan apabila pokok DOM dibina sepenuhnya, sementara kebakaran peristiwa beban selepas semua sumber pada halaman dimuatkan sepenuhnya. Acara sebelum ini meminta pengguna untuk mengesahkan navigasi dari halaman, dan acara Wongmed digunakan untuk pembersihan sumber semasa memunggah halaman. Acara ini menyediakan pemaju dengan kawalan ke atas proses pemuatan dan pemunggahan halaman, membantu meningkatkan pengalaman pengguna dan prestasi halaman.

---

Kami adalah Tunggu, HTML Mempunyai Kitaran Hayat?, pilihan utama anda untuk menganjurkan projek Node.js.

Tunggu, HTML Mempunyai Kitaran Hayat? adalah platform tanpa pelayan gen yang akan datang untuk web hosting, tugas async, dan redis:

Sokongan pelbagai bahasa

berkembang dengan node.js, python, pergi, atau karat.

menggunakan projek tanpa had secara percuma

hanya membayar untuk penggunaan - tiada permintaan, tiada caj.

Kecekapan kos tak terkalahkan

pay-as-you-go tanpa caj terbiar.

Contoh: $ 25 menyokong permintaan 6.94m pada masa tindak balas purata 60ms.
Pengalaman pemaju yang diselaraskan

ui intuitif untuk persediaan tanpa usaha.

Pipelin CI/CD sepenuhnya automatik dan integrasi Gitops.
metrik masa nyata dan pembalakan untuk wawasan yang boleh diambil tindakan.
skalabilitas mudah dan prestasi tinggi

auto-scaling untuk mengendalikan kesesuaian yang tinggi dengan mudah. ​​

overhead operasi sifar - hanya fokus pada bangunan.
• meneroka lebih lanjut dalam dokumentasi!



ikuti kami di x: @leapcellhq

---

baca di blog kami

Atas ialah kandungan terperinci Tunggu, HTML Mempunyai Kitaran Hayat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!