Apakah innerHTML asynchronous?

Saya harap saya tidak akan mempermalukan diri saya sendiri, tetapi saya mencoba memahami apa yang terjadi dalam dua baris kode tersebut:

document.body.innerHTML = 'something';
alert('something else');

Apa yang saya amati adalah peringatan itu muncul sebelum HTML diperbarui (atau mungkin sudah tetapi halaman belum di-refresh / dicat ulang / apa pun)

Lihat codepen ini untuk melihat apa yang saya maksud.

Harap dicatat bahwa bahkan menempatkan alertdi setTimeout(..., 0)tidak membantu. Sepertinya perlu lebih banyak putaran acara untuk innerHTMLbenar-benar memperbarui laman.

EDIT:

Saya lupa menyebutkan bahwa saya menggunakan Chrome dan tidak memeriksa browser lain. Sepertinya itu hanya terlihat di Chrome. Meski demikian saya masih tertarik mengapa hal itu bisa terjadi.

Menyetel innerHTML bersifat sinkron, seperti halnya sebagian besar perubahan yang dapat Anda lakukan pada DOM. Namun, merender halaman web adalah cerita yang berbeda.

(Ingat, DOM adalah singkatan dari "Document Object Model". Ini hanya "model", representasi data. Apa yang dilihat pengguna di layar mereka adalah gambaran bagaimana model itu seharusnya terlihat. Jadi, mengubah model tidak secara instan ubah gambar - perlu beberapa saat untuk memperbarui.)

Menjalankan JavaScript dan merender halaman web sebenarnya terjadi secara terpisah. Untuk meletakkannya menyederhanakan, pertama semua JavaScript pada halaman berjalan (dari loop acara - memeriksa video ini sangat baik untuk lebih detail) dan kemudian setelah itu browser merender perubahan apapun halaman web bagi pengguna untuk melihat. Inilah sebabnya mengapa "memblokir" adalah masalah besar - menjalankan kode yang intensif secara komputasi mencegah browser melewati langkah "jalankan JS" dan masuk ke langkah "render halaman", yang menyebabkan halaman macet atau tersendat.

Pipa Chrome terlihat seperti ini:

Seperti yang Anda lihat, semua JavaScript terjadi terlebih dahulu. Kemudian halaman diberi gaya, ditata, dicat, dan digabungkan - "render". Tidak semua pipeline ini akan mengeksekusi setiap frame. Itu tergantung pada elemen halaman apa yang diubah, jika ada, dan bagaimana mereka perlu dirender.

Catatan: alert()juga sinkron dan dijalankan selama langkah JavaScript, itulah sebabnya dialog peringatan muncul sebelum Anda melihat perubahan pada halaman web.

Sekarang Anda mungkin bertanya "Tunggu, apa sebenarnya yang dijalankan dalam langkah 'JavaScript' di pipeline? Apakah semua kode saya berjalan 60 kali per detik?" Jawabannya adalah "tidak", dan ini kembali ke cara kerja loop event JS. Kode JS hanya berjalan jika ada di tumpukan - dari hal-hal seperti pendengar acara, waktu tunggu, apa pun. Lihat video sebelumnya (sungguh).

https://developers.google.com/web/fundamentals/performance/rendering/

Ya, ini sinkron, karena ini berfungsi (lanjutkan, ketik di konsol Anda):

document.body.innerHTML = 'text';
alert(document.body.innerHTML);// you will see a 'text' alert

Alasan Anda melihat peringatan sebelum Anda melihat halaman berubah adalah karena rendering browser membutuhkan lebih banyak waktu dan tidak secepat javascript Anda mengeksekusi baris demi baris.

The innerHTMLproperti yang sebenarnya tidak diperbarui serentak, tetapi redraw visual yang perubahan ini menyebabkan terjadi asynchronous.

Rendering visual DOM tidak sinkron di Chrome dan tidak akan terjadi hingga tumpukan fungsi JavaScript saat ini dibersihkan dan browser bebas untuk menerima acara baru. Browser lain mungkin menggunakan utas terpisah untuk menangani kode JavaScript dan rendering browser, atau mereka mungkin membiarkan beberapa peristiwa mendapatkan prioritas sementara peringatan menghentikan pelaksanaan acara lain.

Anda dapat melihat ini dengan dua cara:

1. Jika Anda menambahkan for(var i=0; i<1000000; i++) { }sebelum peringatan Anda, Anda telah memberi browser banyak waktu untuk menggambar ulang, tetapi belum, karena tumpukan fungsi belum dihapus ( addmasih berjalan).

2. Jika Anda menunda alertmelalui asinkron setTimeout(function() { alert('random'); }, 1), proses penggambaran ulang akan melanjutkan fungsi yang ditunda oleh setTimeout.

   • Ini tidak berfungsi jika Anda menggunakan waktu tunggu 0, mungkin karena Chrome memberikan prioritas antrean acara ke 0waktu tunggu sebelum acara lain (atau setidaknya sebelum menggambar ulang acara).