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の警告と受け取りましょう。
これを知って、他サイトを見ていると、この警告が出ているサイト、まあまあ多いですね。
さて、効率アップの改良をするとしましょう！！！
0 件のコメント:
コメントを投稿