경고 전에 요소가 표시되지 않는 이유는 무엇입니까?

Question

이 간단한 예에서 https://jsfiddle.net/4rsje4b6/1/ 경고가 표시되기 전에 #test 요소가 표시되지 않는 이유는 무엇입니까?

jQuery css() 메서드가 동기화되어 있으면 안됩니까?

#test { 
    display: none; 
} 

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

는

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

UPDATE :이 문제가 크롬 버전 52.0.2743.116 m에 나를 위해 명시되어

, 윈도우 (10)

Answer 1

그것은 스타일 변경 동 기적으로, 그리고 만약 당신이 read back the value on the next line and show it.

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

하지만 스타일 개체의 변화는 페이지 렌더링에 다시 그리기 요청 메시지를 트리거 및 그 브라우저가이 스크립트 루틴이 종료 된 후 인 유휴 상태가 즉시 처리됩니다.

하지만 브라우저에 따라 다릅니다. Edge에서는 잘 작동하고 요소는 즉시 표시되지만 Chrome 및 Vivaldi에서는 그렇지 않습니다.

브라우저가 이것을 어떻게 처리하는지 확인하는 또 다른 테스트 : 브라우저 창 크기를 조정하면 JSFiddle의 크기가 조정됩니다 (각 영역은 동일한 상대 크기를 유지합니다). 경고창을 열어 비발디 브라우저의 크기를 조정하면 그렇게하지 않습니다. 실제로 작게 만든 다음 경고를 표시 한 다음 크게 만들면 메시지 상자를 닫을 때까지 새 공간에 회색 영역이 생깁니다. Edge에서는 브라우저 창 전체가 회색으로 표시 되어도 피들은 백그라운드에서 크기가 조정되므로 처리 시간 만 문제가 아니지만 경고가 열릴 때 Chrome이 페이지를 완전히 정지시킵니다.