Fahami proses pemaparan halaman html sebagai persediaan untuk mempelajari pengoptimuman prestasi bahagian hadapan_HTML/Xhtml_Pengeluaran halaman web

Baru-baru ini, saya sedang belajar tentang pengoptimuman prestasi bahagian hadapan. Adalah perlu untuk memahami proses pemaparan halaman untuk menetapkan ubat yang betul dan mengetahui kesesakan prestasi. Berikut adalah beberapa perkara yang saya lihat, untuk berkongsi dengan anda.
Rujukan: Memahami pemapar
Pemaparan halaman mempunyai ciri-ciri berikut:
•Tinjauan acara satu utas
•Operasi yang jelas, berterusan dan teratur (HTML5 )
•Pembahagian perkataan dan membina pepohon DOM
•Meminta sumber dan pramuat
•Membina pepohon rendering dan melukis halaman
Khususnya:
Apabila kami mendapat HTML daripada rangkaian Apabila bait yang sepadan dicapai, pokok DOM mula dibina. Urutan penyemak imbas yang mengemas kini UI bertanggungjawab untuk ini. Apabila menghadapi situasi berikut, pembinaan pepohon DOM akan disekat:
•Strim respons HTML disekat dalam rangkaian
•Terdapat skrip yang tidak dimuatkan
•Nod skrip ditemui, tetapi ini Masih terdapat fail gaya yang tidak dimuatkan
Pokok pemaparan dibina daripada pepohon DOM dan akan disekat oleh fail gaya.
Oleh kerana ia berdasarkan tinjauan acara satu utas, walaupun tidak ada penyekatan skrip dan gaya, apabila skrip atau gaya ini dihuraikan, dilaksanakan dan digunakan, pemaparan halaman akan disekat.
Sesetengah situasi yang tidak akan menyekat pemaparan halaman:
• Atribut tangguh dan atribut tak segerak yang ditentukan
• Tiada fail gaya dengan jenis media yang sepadan
• Gagal melepasi skrip Sisip parser nod atau nod gaya
Di bawah, mari kita ilustrasikan dengan contoh (kod lengkap) :

Salin kod

Kodnya adalah seperti berikut:

example.css">
　

Hai!

　
　document.write('
　

Hai sekali lagi!

skrip>




Kod ini mudah difahami. Seterusnya, mari kita gunakan main balik gerak perlahan untuk melihat cara ia dipaparkan.

Salin kodKodnya adalah seperti berikut:

>< body>

　

Hai!

Mula-mula, penghurai menemui example.css dan memuat turunnya daripada rangkaian. Proses memuat turun helaian gaya memakan masa, tetapi penghurai tidak disekat dan terus menghuraikan. Seterusnya, penghurai menemui teg skrip, tetapi kerana fail gaya tidak dimuatkan, pelaksanaan skrip disekat. Penghurai disekat dan tidak boleh terus menghuraikan.

Pokok pemaparan juga akan disekat oleh fail gaya, jadi tiada penyemak imbas akan memaparkan halaman pada masa ini, dengan kata lain, jika fail example.css tidak boleh dimuat turun, Hai, tidak akan dipaparkan .

Seterusnya, teruskan. . .





Salin kod

Kodnya adalah seperti berikut: >< body>

　

Hai! document.write ('


Setelah contoh.css fail dimuatkan, Pokok rendering kini dibina.
Selepas skrip sebaris dilaksanakan, penghurai akan disekat oleh other.js serta-merta. Setelah penghurai disekat, penyemak imbas menerima permintaan cabutan dan "Hai di sana!"
Apabila other.js dimuatkan, penghurai terus menghuraikan ke bawah. . .

Salin kod


Kod tersebut adalah seperti berikut:

div>
　
　document.write('


Selepas penghurai bertemu last.js disekat, kemudian penyemak imbas menerima permintaan cabutan lain, dan "Hai sekali lagi!" Akhirnya last.js akan dimuatkan dan dilaksanakan.
Walau bagaimanapun, untuk memperlahankan penyekatan pemaparan, penyemak imbas moden menggunakan pemuatan spekulatif.

Dalam kes di atas, skrip dan fail gaya akan serius menyekat pemaparan halaman. Rasanya tujuan pramuat adalah untuk mengurangkan masa menyekat ini. Apabila pemaparan disekat, ia akan melakukan perkara berikut:
• Pengimbas (pengimbas) HTML (atau CSS) ringan terus mengimbas dokumen
• Cari sumber yang boleh digunakan dalam URL fail masa hadapan
• Muat turunnya sebelum pemapar menggunakannya
Walau bagaimanapun, pramuat tidak dapat menemui fail sumber yang dimuatkan melalui javascript (cth., document.write()).


Nota
: Semua penyemak imbas "moden" menyokong kaedah ini.
Kembali dan lihat contoh di atas untuk meneka cara pramuat berfungsi.

Salin kod

Kodnya adalah seperti berikut:

>

　

　

Hai!


Penghuraikan mengembalikan contoh.css dan memperolehnya daripada rangkaian Penghurai tidak disekat dan terus menghuraikan Apabila ia menemui nod skrip sebaris, ia telah disekat kerana fail gaya tidak dimuatkan . Menyekat pelaksanaan skrip. Pokok render juga disekat oleh fail gaya, jadi penyemak imbas tidak menerima permintaan render dan tidak dapat melihat apa-apa. Setakat ini, ia adalah cara yang sama seperti yang baru disebutkan. Tetapi kemudian keadaan berubah.

Pramuat (Pemuat Spekulatif) terus "membaca" dokumen, menemui last.js dan memuatkannya. Seterusnya:

Salin kod

Kodnya adalah seperti berikut:

　

document.write(' 　

Hai sekali lagi!< ;/div> 　

Penghurai menjumpai last.js, tetapi kerana prapemuat baru memuatkannya , diletakkan dalam cache penyemak imbas, jadi last.js akan dilaksanakan serta-merta. Selepas itu, penyemak imbas akan menerima permintaan rendering dan "Hai sekali lagi" akan dipaparkan pada halaman.

Dengan membandingkan dua situasi sebelum dan selepas, saya harap semua orang dapat memahami pemaparan halaman tertentu, dan kemudian membuat beberapa pengoptimuman disasarkan. selamat malam! (Tamat)^_^