Pengantar terperinci untuk proses pemuatan dan penguraian halaman HTML

1. Urutan unduhan IE dari atas ke bawah, dan urutan rendering juga dari atas ke bawah. Mengunduh dan rendering dilakukan secara bersamaan.

2. Saat rendering ke bagian halaman, semua bagian di atas telah diunduh (tidak semua elemen terkait telah diunduh).

3. Jika Anda menemukan file embed tag interpretatif semantik (skrip JS, gaya CSS), maka proses unduhan IE akan memungkinkan koneksi terpisah untuk diunduh.

4. Setelah unduhan style sheet selesai, itu akan diuraikan dengan semua lembar gaya yang diunduh sebelumnya. Setelah parsing selesai, semua elemen sebelumnya (termasuk yang telah diberikan sebelumnya) akan dirender ulang.

5. Jika ada redefinisi di JS dan CSS, fungsi definisi selanjutnya akan mengesampingkan fungsi definisi sebelumnya.

1. Tidak dapat mengunduh dan diurai secara paralel (memblokir unduhan).

2. Ketika JS direferensikan, browser mengirimkan permintaan JS dan akan menunggu pengembalian permintaan. Karena browser membutuhkan struktur pohon DOM yang stabil, sangat mungkin ada

Kode secara langsung mengubah struktur pohon DOM, seperti menggunakan Document.write atau AppendChild, atau bahkan secara langsung menggunakan Location.href untuk lompatan. Untuk mencegah perbaikan JS terjadi, browser

Untuk memodifikasi pohon DOM, perlu untuk membangun kembali pohon DOM, sehingga akan memblokir unduhan dan rendering lainnya.

1. Halaman Penurunan Berat Badan:

A. Berat halaman adalah faktor terpenting yang mempengaruhi kecepatan pemuatan.

B. Hapus ruang dan komentar yang tidak perlu.

C. Pindahkan skrip inline dan CSS ke file eksternal.

D. Anda dapat menggunakan HTML TIDY untuk menurunkan berat badan untuk HTML, dan Anda juga dapat menggunakan beberapa alat kompresi untuk menurunkan berat badan untuk JavaScript.

2. Kurangi jumlah file:

A. Mengurangi jumlah file yang dirujuk pada halaman dapat mengurangi jumlah koneksi HTTP.

B. Banyak file JavaScript dan CSS dapat digabungkan dan yang terbaik adalah menggabungkannya. Caibangzi telah menggabungkan javascript mereka. function dan prototipe.js ke dalam file base.js.

3. Kurangi kueri nama domain:

A. DNS Query dan Parse Domain Names juga mengkonsumsi waktu, jadi kita perlu mengurangi referensi ke javascript eksternal, CSS, gambar, dan sumber daya lainnya. Semakin sedikit Anda menggunakan nama domain yang berbeda, semakin baik.

4. CACHE DATA BERTINGGI:

A. Cache menggunakan kembali data.

5. Mengoptimalkan urutan pemuatan elemen halaman:

A. Pertama memuat konten yang awalnya ditampilkan pada halaman dan JavaScript dan CSS terkait dengannya, dan kemudian memuat hal-hal terkait HTML, seperti yang tidak ditampilkan pada gambar asli, flash, video, dll., Dan kemudian memuatnya.

6. Kurangi jumlah javascript inline:

A. Parser browser akan berasumsi bahwa inline JavaScript akan mengubah struktur halaman, jadi menggunakan inline JavaScript itu mahal.

B. Jangan gunakan Document.write (), metode mengeluarkan konten, menggunakan metode DOM W3C modern untuk memproses konten halaman untuk browser modern.

7. Gunakan CSS modern dan tag hukum:

A. Gunakan CSS modern untuk mengurangi label dan gambar. Misalnya, menggunakan teks CSS+ modern dapat sepenuhnya menggantikan beberapa gambar teks saja.

B. Gunakan tag hukum untuk menghindari koreksi kesalahan dan operasi lain ketika browser parse html. Anda juga dapat menggunakan HTML TIDY untuk menurunkan berat badan untuk HTML.

8. Potong konten Anda:

A. Jangan gunakan meja bersarang, tetapi tabel atau div yang tidak bersarang. Mengurai tata letak meja berdasarkan potongan besar meja bersarang menjadi beberapa tabel kecil, jadi Anda tidak perlu menunggu sampai seluruh konten halaman (atau tabel besar) dimuat sebelum ditampilkan.

9. Tentukan ukuran gambar dan tabel:

A. Jika browser dapat segera menentukan ukuran gambar atau tabel, itu dapat segera menampilkan halaman tanpa melakukan beberapa pengaturan tata letak.

B. Ini tidak hanya mempercepat tampilan halaman, tetapi juga mencegah beberapa perubahan yang tidak tepat dalam tata letak setelah halaman dimuat.

C. Gambar menggunakan tinggi dan lebar.

1. Pengguna memasuki URL (dengan asumsi itu adalah halaman HTML dan ini adalah pertama kalinya Anda mengaksesnya), browser mengeluarkan permintaan ke server, dan server mengembalikan file HTML.

2. Browser mulai memuat kode HTML dan menemukan bahwa ada tag <nink> di tag <head> yang merujuk pada file CSS eksternal.

3. Browser mengeluarkan permintaan untuk file CSS, dan server mengembalikan file CSS.

4. Browser terus memuat bagian <dody> dari kode dalam HTML, dan file CSS telah diperoleh, sehingga Anda dapat mulai membuat halaman.

5. Browser menemukan tag <mmg> dalam kode yang merujuk gambar dan membuat permintaan ke server. Pada saat ini, browser tidak akan menunggu sampai gambar diunduh, tetapi akan terus membuat kode berikutnya.

6. Server mengembalikan file gambar. Karena gambar menempati area tertentu, itu mempengaruhi pengaturan paragraf berikutnya, sehingga browser perlu kembali dan merender kembali bagian kode ini.

7. Browser menemukan tag <script> yang berisi baris kode JavaScript, dan jalankan dengan cepat.

8. Skrip JavaScript menjalankan pernyataan ini, yang memerintahkan browser untuk menyembunyikan <style> (style.display = none) dalam kode. Sayang sekali, tiba-tiba ada elemen seperti itu yang hilang, dan browser harus merender kembali bagian kode ini.

9. Akhirnya, saya menunggu kedatangan </html>, dan browser menangis ...

10. Tunggu, ini belum berakhir. Pengguna mengklik tombol Skinning di antarmuka, dan JavaScript meminta browser untuk mengubah jalur CSS dari tag <link>.

11. Browser mengumpulkan semua orang di sini, semua orang mengemas barang bawaan mereka, kita harus melakukannya lagi ... browser meminta file CSS baru dari server dan merender ulang halaman.