jQuery
はてなブックマーク

はてなブックマークボタン用のjsの読込が重い場合がある

はてなブックマークボタンのお話。
↓のURLで作れるやつです。
http://b.hatena.ne.jp/guide/bbutton

発生している現象

普通にHTMLに貼り付ける場合は問題ないが、jqueryで動的にページに差し込むとなぜかボタン表示が遅いケースがある。
今年(2018年)入ってくらいからちょいちょい遅いなってときはあったけどGWちょっと前くらいからかなりの頻度で起きてるっぽい。

原因

重くなってる理由は以下のjsの読込が遅くなってるから。

https://b.st-hatena.com/js/bookmark_button.js

このURLでアクセスする分には問題ないのだけども後ろに適当なクエリパラメータがついたりすると重くなる、下手すると503になってそのままキャッシュされるということがおきている。

https://b.st-hatena.com/js/bookmark_button.js?_=XXXXXXXXXXXXXXX

このクエリパラメータ自体はjqueryで対象のコードをhtml()とかで挿入すると勝手についてしまっている。
これはjqueryのキャッシュ機能によるものっぽい。
(詳しくは → https://allabout.co.jp/gm/gc/24215/

対応方法

クエリパラメータを付かなくすることは可能なのでこれで対応すればよさそう。
(参考→ http://js.studio-kingdom.com/jquery/ajax/ajax_setup

jQuery.ajaxSetup({
    cache: true
});

// 流し込む処理

jQuery.ajaxSetup({
    cache: false
});

もしくはむかしあった事件1のときにリリースされた?optout版のコード2に書き換えるとキャッシュが効いてるのか、効いてなくても早いのかはわからないが解消する。

https://b.st-hatena.com/js/bookmark_button_wo_al.js

できればはてぶ側で対応してくれないかなー。


  1. こんな事件 

  2. 現在の公式サイト内ではこのコードの案内は無い。1のコメントで今後も使えるよとは言っているので使っても平気だろうか...?