İnnerHTML zaman uyumsuz mu?

Umarım kendimi aptal yerine koymam ama bu iki satır kodda neler olduğunu anlamaya çalışıyorum:

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

Gözlemlediğim şey, uyarının HTML güncellenmeden önce gösterilmesidir (veya belki de olmuştur, ancak sayfa yenilenmemiş / yeniden boyanmamıştır / her neyse)

Ne demek istediğimi görmek için bu codepen'e bakın.

Hatta koyarak not edin alertde setTimeout(..., 0)yardım etmez. Görünüşe göre innerHTMLsayfayı gerçekten güncellemek için daha fazla olay döngüsü gerekiyor.

DÜZENLE:

Chrome kullandığımı söylemeyi unuttum ve diğer tarayıcıları kontrol etmedim. Görünüşe göre yalnızca Chrome'da görünüyor. Yine de bunun neden olduğunu hala merak ediyorum.

DOM'da yapabileceğiniz çoğu değişiklik gibi innerHTML'yi ayarlamak da eşzamanlıdır. Ancak, web sayfasını oluşturmak farklı bir hikaye.

(Unutmayın, DOM "Belge Nesne Modeli" anlamına gelir. Bu yalnızca bir "model", verilerin bir temsilidir. Kullanıcının ekranında gördüğü şey, modelin nasıl görünmesi gerektiğinin bir resmidir. Dolayısıyla, modeli değiştirmek anında olmaz resmi değiştirin - güncellenmesi biraz zaman alabilir.)

JavaScript'i çalıştırmak ve web sayfasını oluşturmak aslında ayrı ayrı gerçekleşir. (Etkinlik döngüden - check out sayfa pistlerinde her şeyden önce JavaScript, basitçe söylemek gerekirse bu mükemmel videoyu daha fazla ayrıntı için) ve daha sonra sonra tarayıcı kullanıcı görmek için web sayfasının herhangi bir değişiklik hale söyledi. Bu nedenle "engelleme" bu kadar önemli bir konudur - hesaplama açısından yoğun kod çalıştırmak, tarayıcının "JS çalıştır" adımını geçip "sayfayı oluştur" adımına geçmesini engeller, bu da sayfanın donmasına veya takılmasına neden olur.

Chrome'un ardışık düzeni şuna benzer:

Gördüğünüz gibi, tüm JavaScript önce gerçekleşir. Ardından sayfa şekillendirilir, düzenlenir, boyanır ve birleştirilir - "oluşturma". Bu ardışık düzenin tümü her çerçeveyi yürütmez. Varsa, hangi sayfa öğelerinin değiştiğine ve nasıl yeniden işlenmeleri gerektiğine bağlıdır.

Not: alert()aynı zamanda eşzamanlıdır ve JavaScript adımı sırasında yürütülür; bu nedenle, web sayfasındaki değişiklikleri görmeden önce uyarı iletişim kutusu görüntülenir.

Şimdi "Bekleyin, ardışık düzen içindeki o 'JavaScript' adımında tam olarak ne çalıştırılıyor? Tüm kodum saniyede 60 kez çalışıyor mu?" Cevap "hayır" dır ve JS olay döngüsünün nasıl çalıştığına geri döner. JS kodu yalnızca yığın içindeyse çalışır - olay dinleyicileri, zaman aşımları gibi şeylerden. Önceki videoya bakın (gerçekten).

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

Evet, eşzamanlıdır, çünkü bu çalışır (devam edin, konsolunuza yazın):

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

Sayfanın değiştiğini görmeden önce uyarıyı görmenizin nedeni, tarayıcı oluşturmanın daha fazla zaman alması ve javascript'in satır satır çalıştırması kadar hızlı olmamasıdır.

Gerçek innerHTMLözellik eşzamanlı olarak güncellenir, ancak bu değişikliğin neden olduğu görsel yeniden çizilir, eşzamansız olarak gerçekleşir.

DOM'un görsel oluşturma işlemi Chrome'da eşzamansızdır ve geçerli JavaScript işlev yığını temizlenene ve tarayıcı yeni bir olayı kabul etmekte özgür olana kadar gerçekleşmeyecektir. Diğer tarayıcılar, JavaScript kodunu ve tarayıcı oluşturmayı işlemek için ayrı diziler kullanabilir veya bir uyarı başka bir olayın yürütülmesini durdururken bazı olayların öncelik kazanmasına izin verebilir.

Bunu iki şekilde görebilirsiniz:

1. Uyarınızdan for(var i=0; i<1000000; i++) { }önce eklerseniz , tarayıcıya yeniden çizim yapması için bolca zaman vermiş olursunuz, ancak bu yapılmamıştır, çünkü işlev yığını temizlenmemiştir ( addhala çalışıyor).

2. Eğer alertbir eşzamansız ile geciktirirseniz setTimeout(function() { alert('random'); }, 1), yeniden çizim işlemi setTimeout tarafından geciktirilen fonksiyonun önüne geçecektir.

   • Bir zaman aşımı kullanırsanız 0, muhtemelen Chrome 0diğer etkinliklerden önce (veya en azından yeniden çizim olaylarından önce) zaman aşımlarına olay sırası önceliği verdiğinden , bu işe yaramaz .