![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZmOsd2SxjWREBciNNm0WI5ij86241Ac58Ptnida375HX6V8fzI5CQvHZj9ivkgmTntA22xZfkbc3_EqlR5_tsZUXuQFJuONtOy4dzsdkj2AXQopAGoL8rI7BnC-Vq_kDYPyCADcHchOj6_DYa3IhIHOdGvDJbC_NQj-MzoZ_AUf-VJqeFvOq66Z_n/s1600-rw/https-3344700_1280.jpg)
WEBサービスプログラムを作っているときに、Chromeブラウザを使っているエンジニアは多いと思います。
いや、ほとんどがChromeブラウザだと思います。
よほど社内セキュリティ違反にならない限り、エンジニアはChromeブラウザを使うはずです。
そんなChromeブラウザのデバッグコンソールに気になる表示を見つけたので調べて見たのですが、あまり明確な回答が無かったので、調べてみました。
Violationアラート
それは、ページ内で複雑な計算を行う機能をJavascriptで構築していた時に発生しました。
[Violation] 'click' handler took 392ms
このプログラムを実行するのに、ページ内のボタンを押した場合の処理なので、「clink」した時に「ハンドラが392ミリ秒掛かっているよ」と言っているんだと思います。
これまで、もっと重い処理を書いてきたんですが、こんなアラートは初めてです。
英語のニュアンスが細かく分からない僕では、このエラーでどのくらいの緊迫感を持つのか分からないので、Google翻訳で変換してみました。
[違反] 'クリック'ハンドラが392msかかる
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtUT1suwRkV4b1vk1zKgbPgM_tryAAdyn2HGYLJDrihcGVy8ECezbgxm9wPCsVBYkWZe2R0r1QvTi-B3ox6ClQ-pcWOzo1xB5bbNUFHpZO7d5YSFDZPfNJlz3EooRhGPoiDj-37EMb-M6_tEVf_KA0-OIJNOivvQOTAynAVWUoCZlenmM8evo32A82/s1600-rw/26-1-%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2018-04-25-9.21.25.jpg)
「違反」という文字を考えると、なるべくならこのアラートは表示させないほうがいいですね。
でも、解説してくれているページが見つからなかったので、自ら確認してみたいと思います。
他のブラウザで確認
・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 $$;
})();
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqJdAaFY5JTHxDkFyQVp_SIiM3WEiUh6VT0gpF8Wz16sytGM3K8yaARy3Ph50Fiu544CQtpcWLART8NrTMF863Y2sUdCbHR9qc63iud9OGPo_qX53EY8Nt-u7RVbv1nIxeqw2kMDl6XsV4A79r2MT9B9IMJ_ZQDHs6i3d3INVPZlOwhQvnmDOd8eXq/s1600-rw/26-2-%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2018-04-25-9.29.55.jpg)
上記ページを実行してclickボタンを押すと5秒待たされたのちに「Violation」警告が確認できます。
考えられる事・・・
どうやら、クリックしてから、特定秒数経過すると表示されるっぽく、while文を使っていると頻度高く発生します。
このプログラムでは、while文で任意時間経過を処理しているので、その値を変えて確認してみると、200msで警告表示されて、100msでは表示されないようです。
もう少し細かな値を探ってみて見つけました。
150ms !!!
どうやら、この値が、警告文の表示される閾値のようです。
ここから考えられることは、クリックしてから、150ms以上の処理をするなというGoogleの警告と受け取りましょう。
これを知って、他サイトを見ていると、この警告が出ているサイト、まあまあ多いですね。
さて、効率アップの改良をするとしましょう!!!