アラートの前に要素が表示されないのはなぜですか？

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メートルに私のために顕現され、Windowsの10

Answer 1

これは、スタイルを変更し同期的に、あなたが気づくでしょうread back the value on the next line and show it。

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

しかし、スタイルオブジェクトの変更は、ページレンダラへの再描画要求メッセージをトリガし、それはブラウザがこのスクリプトルーチンが終了した後である、アイドル状態になるとすぐに処理されます。

ただし、ブラウザによって異なります。エッジではうまく動作し、要素はすぐに表示されますが、クロムとビバルディではそうではありません。

ブラウザーがこれをどのように処理するかを確認する別のテスト： ブラウザー・ウィンドウのサイズを変更すると、JSFiddleが拡大縮小されます（各領域は同じ相対サイズを保持します）。警告を開いた状態でVivaldiブラウザのサイズを変更すると、それは実行されません。実際には小さくしてから警告を表示し、それを大きくすると、メッセージボックスを閉じるまで、新しい領域に灰色の領域が表示されます。 Edgeでは、ブラウザーウィンドウ全体がグレー表示になっていても、フィーダーはバックグラウンドでサイズが変更されるだけなので、処理時間の問題ではありませんが、アラートが開いたときにChromeによってページが完全にフリーズされます。