Chromeブラウザにおける「Violation」JSアラート

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

WEBサービスプログラムを作っているときに、Chromeブラウザを使っているエンジニアは多いと思います。
いや、ほとんどがChromeブラウザだと思います。
よほど社内セキュリティ違反にならない限り、エンジニアはChromeブラウザを使うはずです。
 

そんなChromeブラウザのデバッグコンソールに気になる表示を見つけたので調べて見たのですが、あまり明確な回答が無かったので、調べてみました。

Violationアラート

それは、ページ内で複雑な計算を行う機能をJavascriptで構築していた時に発生しました。
 

 

このプログラムを実行するのに、ページ内のボタンを押した場合の処理なので、「clink」した時に「ハンドラが392マイクロ秒掛かっているよ」と言っているんだと思います。
 

これまで、もっと重い処理を書いてきたんですが、こんなアラートは初めてです。
 

英語のニュアンスが細かく分からない僕では、このエラーでどのくらいの緊迫感を持つのか分からないので、Google翻訳で変換してみました。
 

[違反] ‘クリック’ハンドラが392msかかる

 

スクリーンショット 2018-04-25 9.21.25
 

「違反」という文字を考えると、なるべくならこのアラートは表示させないほうがいいですね。
 

でも、解説してくれているページが見つからなかったので、自ら確認してみたいと思います。

他のブラウザで確認

・Mac用のFirefoxでは表示されない。
・Chrome互換ブラウザ「Vivaldi」も最新版更新で表示されない。
 

これらの事象から、どうやら、Chromeブラウザだけで表示されているので、専用の機能なのだと考えられます。

簡単サンプル

スクリーンショット 2018-04-25 9.29.55
 

上記ページを実行してclickボタンを押すと5秒待たされたのちに「Violation」警告が確認できます。

考えられる事・・・

どうやら、クリックしてから、特定秒数経過すると表示されるっぽく、while文を使っていると頻度高く発生します。
 

このプログラムでは、while文で任意時間経過を処理しているので、その値を変えて確認してみると、200msで警告表示されて、100msでは表示されないようです。
 

もう少し細かな値を探ってみて見つけました。
 

150ms !!!

 

どうやら、この値が、警告文の表示される閾値のようです。
 

ここから考えられることは、クリックしてから、150ms以上の処理をするなというGoogleの警告と受け取りましょう。
 

これを知って、他サイトを見ていると、この警告が出ているサイト、まあまあ多いですね。
 

さて、効率アップの改良をするとしましょう!!!

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です