Pengenalan terperinci kepada proses pemuatan dan penghuraian halaman HTML_HTML/Xhtml_Pengeluaran halaman web

Turutan pelayar memuatkan dan memaparkan HTML

1. Susunan muat turun IE adalah dari atas ke bawah, dan susunan pemaparan juga dari atas ke bawah dilakukan pada masa yang sama.

2. Apabila membuat render ke bahagian tertentu halaman, semua bahagian di atasnya telah dimuat turun (ini tidak bermakna semua elemen yang berkaitan telah dimuat turun).

3 Jika anda menemui fail terbenam teg yang boleh ditafsir secara semantik (skrip JS, gaya CSS), maka proses muat turun IE akan mendayakan sambungan berasingan untuk memuat turun.

4. Selepas helaian gaya dimuat turun, ia akan dihuraikan bersama-sama dengan semua helaian gaya yang dimuat turun sebelum ini Selepas penghuraian selesai, semua elemen sebelumnya (termasuk elemen yang dipaparkan sebelum ini) akan dipaparkan semula.

5. Jika terdapat takrifan semula dalam JS atau CSS, fungsi yang ditentukan kemudian akan menimpa fungsi yang ditakrifkan sebelumnya.

Pemuatan JS

1. Tidak boleh memuat turun dan menghuraikan secara selari (menyekat muat turun).

2. Apabila JS dirujuk, penyemak imbas menghantar permintaan js dan akan menunggu pemulangan permintaan. Kerana penyemak imbas memerlukan struktur pepohon DOM yang stabil dan berkemungkinan terdapat kod

dalam JS yang secara langsung mengubah struktur pepohon DOM, seperti menggunakan document.write atau appendChild, atau malah terus menggunakan location.href. Lompat, untuk menghalang JS daripada mengubah suai pepohon DOM

, penyemak imbas perlu membina semula pepohon DOM, jadi ia akan menyekat muat turun dan pemaparan lain

Cara mempercepatkan Kelajuan pemuatan Halaman HTML

1. Kehilangan berat halaman:

a.

b. Padamkan ruang dan ulasan yang tidak diperlukan.

c. Alihkan skrip sebaris dan css ke fail luaran.

d. Anda boleh menggunakan HTML Tidy untuk menurunkan berat badan untuk HTML, dan anda juga boleh menggunakan beberapa alat pemampatan untuk menurunkan berat badan untuk JavaScript.

2. Kurangkan bilangan fail:

a.

b. Banyak fail JavaScript dan CSS boleh digabungkan dan paling baik digabungkan Caibangzi dengan fungsi JavaScript dan Prototype.js ke dalam fail base.js.

3. Kurangkan pertanyaan nama domain:

a. sumber. Lebih banyak nama domain yang berbeza digunakan, Kurang lebih baik.

4. Cache data yang digunakan semula:

a.

5 Optimumkan susunan pemuatan elemen halaman:

a Mula-mula muatkan kandungan yang dipaparkan pada halaman dan JavaScript serta CSS yang berkaitan dengannya, kemudian muatkan perkara yang berkaitan dengan HTML, seperti. apa yang tidak dipaparkan pada mulanya Gambar, denyar, video dan sumber lain yang sangat gemuk dimuatkan terakhir.

6. Kurangkan bilangan JavaScript sebaris:

a.

b. Jangan gunakan document.write() untuk mengeluarkan kandungan, gunakan kaedah DOM W3C moden untuk mengendalikan kandungan halaman untuk penyemak imbas moden.

7. Gunakan CSS moden dan teg undang-undang:

a.

b. Gunakan tag undang-undang untuk menghalang penyemak imbas daripada melakukan operasi "pembetulan ralat" semasa menghuraikan HTML Ia juga boleh digunakan oleh HTML Tidy untuk mengurangkan HTML.

8. Potong kandungan anda:

a. Pecahkan susun atur berdasarkan jadual bersarang besar kepada berbilang jadual kecil, supaya tidak perlu menunggu sehingga keseluruhan kandungan halaman (atau jadual besar) dimuatkan sebelum dipaparkan.

9 Nyatakan saiz imej dan jadual:

a Jika penyemak imbas boleh segera menentukan saiz imej atau jadual, maka ia boleh memaparkan halaman dengan serta-merta tanpa perlu membuat semula beberapa susunan susun atur Kerja.

b Ini bukan sahaja mempercepatkan paparan halaman, tetapi juga menghalang beberapa perubahan reka letak yang tidak sesuai selepas halaman dimuatkan.

c. imej menggunakan ketinggian dan lebar.

proses pemuatan dan penghuraian halaman HTML

1. Pengguna memasukkan URL (dengan mengandaikan ia adalah halaman HTML dan ia adalah lawatan pertama), dan penyemak imbas menghantar permintaan kepada pelayan Pelayan mengembalikan fail html.

2. Penyemak imbas mula memuatkan kod html dan mendapati terdapat teg di dalam teg yang merujuk fail CSS luaran.

3. Penyemak imbas menghantar permintaan untuk fail CSS sekali lagi dan pelayan mengembalikan fail CSS.

4. Penyemak imbas terus memuatkan kod bahagian html, dan fail CSS telah diperoleh dan halaman itu boleh dipaparkan.

5. Penyemak imbas menemui teg dalam kod yang merujuk imej dan menghantar permintaan kepada pelayan. Pada masa ini, penyemak imbas tidak akan menunggu sehingga imej dimuat turun, tetapi akan terus memberikan kod berikutnya.

6. Pelayan mengembalikan fail imej Memandangkan imej itu menduduki kawasan tertentu dan mempengaruhi susunan perenggan seterusnya, penyemak imbas perlu kembali dan memaparkan semula bahagian kod ini.

7. Penyemak imbas menemui teg <script> yang mengandungi baris kod Javascript dan menjalankannya dengan cepat. <br /><br />8. Skrip Javascript melaksanakan pernyataan ini, yang mengarahkan penyemak imbas untuk menyembunyikan <style> tertentu (style.display="none") dalam kod. Oops, tiba-tiba elemen sedemikian hilang, dan penyemak imbas perlu memaparkan semula bahagian kod ini. <br /><br />9. Akhirnya menunggu ketibaan , penyemak imbas menangis... <br /><br />10 Tunggu, ia belum berakhir, pengguna mengklik butang "Tukar Kulit". dalam antara muka , Javascript membenarkan penyemak imbas menukar laluan CSS teg <link>. <br /><br />11. Penyemak imbas memanggil semua orang yang hadir <div><span><ul><li>, "Semua orang mengemas beg anda, kami perlu memulakan semula...", penyemak imbas meminta pelayan Cipta yang baharu CSS fail dan memaparkan semula halaman.</script>