Dlaczego element nie jest wyświetlany przed ostrzeżeniem?

Question

W tym prostym przykładzie https://jsfiddle.net/4rsje4b6/1/ dlaczego element #test nie jest wyświetlany przed pojawieniem się alertu?

Czy metoda jQuery css() nie powinna być zsynchronizowana?

#test { 
    display: none; 
} 

<span id="test">Element</span> 

$("#test").css("display", "inline"); 
alert("Showed element!"); 

UPDATE:

Takie zachowanie jest dla mnie objawia Chrome wersja 52.0.2743.116 m, Windows 10.

Answer 1

To zmienia styl synchronicznie, a zauważysz, że jeśli read back the value on the next line and show it.

$("#test").css("display", "inline"); 
alert("Showed element!" + $("#test").css("display")); 

Ale zmiana przedmiotu stylu wyzwala wiadomości żądania odświeżenia do renderowania stron, i że jest traktowane jak tylko przeglądarka staje się w stanie spoczynku, który jest po to rutyna skrypt został zakończony.

To zależy jednak od przeglądarki. W Edge działa dobrze, a element jest wyświetlany od razu, ale w Chrome i Vivaldi tak nie jest.

Kolejny test, aby sprawdzić, jak obsługują to przeglądarki: Jeśli zmienisz rozmiar okna przeglądarki, JSFiddle będzie skalować (każdy z obszarów zachowuje ten sam względny rozmiar). Jeśli zmienisz rozmiar przeglądarki Vivaldi z ostrzeżeniem otwartym, nie zrobi tego. W rzeczywistości, jeśli sprawisz, że będzie mały, a następnie pokaż alert, a następnie go powiększyć, po prostu uzyskać szary obszar w nowym miejscu, aż zamkniesz okno komunikatu. W Edge, skrzypce będą po prostu zmieniać rozmiar w tle, nawet jeśli całe okno przeglądarki jest wyszarzone, więc nie jest to tylko kwestia czasu przetwarzania, ale bardziej, że Chrome całkowicie zamraża stronę po otwarciu alertu.