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

2018年4月26日

Javascript テクノロジー

WEBサービスプログラムを作っているときに、Chromeブラウザを使っているエンジニアは多いと思います。 いや、ほとんどがChromeブラウザだと思います。 よほど社内セキュリティ違反にならない限り、エンジニアはChromeブラウザを使うはずです。 そんなChromeブラウザのデバッグコンソールに気になる表示を見つけたので調べて見たのですが、あまり明確な回答が無かったので、調べてみました。

Violationアラート

それは、ページ内で複雑な計算を行う機能をJavascriptで構築していた時に発生しました。 [Violation] 'click' handler took 392ms このプログラムを実行するのに、ページ内のボタンを押した場合の処理なので、「clink」した時に「ハンドラが392ミリ秒掛かっているよ」と言っているんだと思います。 これまで、もっと重い処理を書いてきたんですが、こんなアラートは初めてです。 英語のニュアンスが細かく分からない僕では、このエラーでどのくらいの緊迫感を持つのか分からないので、Google翻訳で変換してみました。
[違反] 'クリック'ハンドラが392msかかる
「違反」という文字を考えると、なるべくならこのアラートは表示させないほうがいいですね。 でも、解説してくれているページが見つからなかったので、自ら確認してみたいと思います。

他のブラウザで確認

・Mac用のFirefoxでは表示されない。 ・Chrome互換ブラウザ「Vivaldi」も最新版更新で表示されない。 これらの事象から、どうやら、Chromeブラウザだけで表示されているので、専用の機能なのだと考えられます。

簡単サンプル

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Violation</title> </head> <body> <h1>Violation</h1> <p>[Violation] 'click' handler took 392ms</p> <button id="btn">click !</button> <script src="sleep.js"></script> </body> </html> ;(function(){ var $$ = function(){ btn.onclick = $$.prototype.clickBtn; }; var btn = document.getElementById("btn"); $$.prototype.clickBtn = function(){ $$.prototype.sleep(5000); console.log("finish ! ("+(+new Date())+")"); }; $$.prototype.sleep = function(ms) { var st = new Date(); while (new Date() - st < ms); } new $$; })(); 上記ページを実行してclickボタンを押すと5秒待たされたのちに「Violation」警告が確認できます。

考えられる事・・・

どうやら、クリックしてから、特定秒数経過すると表示されるっぽく、while文を使っていると頻度高く発生します。 このプログラムでは、while文で任意時間経過を処理しているので、その値を変えて確認してみると、200msで警告表示されて、100msでは表示されないようです。 もう少し細かな値を探ってみて見つけました。
150ms !!!
どうやら、この値が、警告文の表示される閾値のようです。 ここから考えられることは、クリックしてから、150ms以上の処理をするなというGoogleの警告と受け取りましょう。 これを知って、他サイトを見ていると、この警告が出ているサイト、まあまあ多いですね。 さて、効率アップの改良をするとしましょう!!!

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。