JavaScriptでCSSスタイル付与の際に先にAlertが読み込まれてしまう

前提・実現したいこと

ある特定サイトが開かれた際にblurをかけた後にalertを表示するプログラムを作りたいです。
しかしblurより先にalertが表示されてしまいます。
環境はGoogle Chrome (バージョン 80.0.3987.106（Official Build）（64 ビット） )になります。アドオンを作る目的です。

該当のソースコード

JavaScript
1if(isTargetUrl) {
2  const body = document.querySelector("body");
3  body.style.filter = 'blur(6px)';
4  alert('この時間帯は禁止されています');
5}

試したこと

非同期処理やif(body.style.filter)をかませて見たりしましたが先にalertが表示されてしまいます。

補足情報（FW/ツールのバージョンなど）

alertを使わずにメッセージ子要素をbodyに付与する形で表記しても良いのですがそのままにするのも気持ち悪いのでどなたかご教授をお願いしたいです。

Lhankor_Mhy

2020/04/06 10:18

当方の環境（Firefox）では再現しなかったので、Chrome で試したところ、再現できました。どうやら環境依存の問題の様ですね。 JavaScriptがCSSレンダリングをブロックしているのではないでしょうか。

hoshi-takanori

2020/04/06 20:26

適当にタイムアウトをかけてあげれば良いのでは。 setTimeout(function(){ alert('この時間帯は禁止されています'); }, 100);

moimoi_sushi

2020/04/08 06:50

＠Lhankor_Mhy >JavaScriptがCSSレンダリングをブロックしているのではないでしょうか。なるほど、JavaScript > CSSの優先順位？ということでしょうか。 >hoshi-takanori setTimeout(() => { alert('この時間帯は禁止されています'); }, 1);にしてもいけました。ありがとうございます。ちょっと気持ち悪い感じもするのでalertを使うかどうか検討してみたいと思います。