2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【HTML Living Standard】ボタン連打をブラウザで無効化しようぜ

Posted at

うっかり注文完了ボタンの連打対策を忘れていて同じ商品が二重注文されてしまったというクレームが来た、そんな経験はありませんか。
まあ最近はなかなかないか。

そんなわけで、そのような誤動作をHTMLレベルで封じてしまおうというProposalがGoogleから提出されていました。
以下はAdd optimization to ignore "duplicate" navigationsの紹介です。
2025年10月に提出されたばっかりなので、本格的な検討に入るか、それともいつのまにか立ち消えになるかはまだわかりません。

Add optimization to ignore "duplicate" navigations

What problem are you trying to solve?

どんな問題を解決しようとしている?

ユーザが同じURLに連続アクセスしてしまうことがよくあります。
これは意図していないことが多いでしょう。
その場合は新しいナビゲーションが優先されるため、既に実行中の古いナビゲーションのレスポンスは無駄になり、ユーザの待ち時間が増加します。

What solutions exist today?

現在の解決策は?

クリックハンドラなどを使ってダブルクリックをチェックすることはできます。
ただし、他所のサイトからりくされている、リロードボタンを押した、などの対策はできません。

How would you solve it?

どのように解決する?

同じナビゲーションが連続した場合、後続を無視し、最初のナビゲーションを継続します。
ナビゲーションが重複しているかを判定し、重複していれば後続をすぐに終了します。
重複の基準は以下のとおりです(アイデア歓迎)

・ナビゲーションの間隔が3秒以内である。
・メソッドがGETであり、formデータが含まれていない。
・URL、オリジン、リファラー、Cookie、userInvolvement、historyHandlingが同じ。

この動作はほぼサイレントに実行されます。
NavigationTiming APIで開始時間が後続の時刻ではなく最初の時刻になるなど、検出する方法も存在します。
navigate() APIは、無視されたナビゲーションではPromiseが拒否されます。
オートメーションツールが原因不明に失敗するという問題を避けるため、WebDriver BiDiのナビゲーション失敗もトリガーした方がいいかもしれません。

Anything else?

その他。

Chromiumはパートナーと既にこの最適化の実験を行っており、レイテンシーおよびキャパシティの大きな改善がみられました。
この動作を標準化したいと考えています。

GitHubの反応

「fetchのヘッダ追加は深いところで行われているので、ナビゲーションの判定にヘッダを使うのは困難。」

「低速回線で一回呼んで、直後に高速回線に切り替わった後でもう一度呼んでも遅いままになる。」「試してみたら前者の方が概ね早いので問題ない。」

「意図的にAPI呼び出しを重複したい場合はどうすれば?」

「Chromeの一部でこの機能を有効にしてパートナーサイトで実験したところ、不要なレスポンスが大幅に減少し、レイテンシーが改善された。」

Chromium

ChromiumにIssueが立ったのは2024/09/12です。
Google内部では一年前から検討・対応が進んでいたということですね。

他ブラウザの反応

FirefoxSafariにIssueが立ったのは2025/10/17です。
2025/12/08時点では、まだ両方とも反応がありません。

感想

GET専用だから多重注文には効かなかったわHAHAHA

提案者rakinaはGoogleの中の人です。
この提案は既に実験済みということでしたが、具体的にどのパートナーと提携してどのくらいの効果があったのか、等の結果は見つけられませんでした。

まあリクエスト先が同一のGETなんてF5連打以外で意図的にやることなんてまずないだろうから、2回目以降は無視したところで特に問題はないのではないかなあと思います。
他のブラウザがどう反応するかはわかりませんが、Chromeでは特に目立つこともなくいつのまにか展開されていたが誰も気付かなかった、みたいなことになりそうな気がします。
そして何かの検証中に「Chromeだけリクエストが飛ばない!なぜだ!!」ってなる。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?