さんまがおいしい季節だねー(´・ω・`)

新型はてなブックマークボタンを速くする

JavaScript,はてな — タグ: — さくら @ 2011/01/24 0:37

新型はてなブックマークボタン使ってます?ぶっちゃけあんまり見ない気もしますが、↓みたいな感じで thickbox が開いたりして結構便利ですよ!

はてなブックマークボタン

Twitter とか Facebook のボタンと似たような感じで今風なのも(・∀・)イイ!!

つーことで、このブログにも新型はてブボタン置きたいなーと WordPress のテンプレいじくってたりしてたんですが、ブラクラかと思うぐらいに新型はてブボタンが遅かったので、もうちょいキビキビ動くように最適化してみました。

速くする

遅い原因も調べてますがとりあえずその辺は後述ということで、先に新型はてブボタンの動作を速くする方法から書いていきます。

まずはてブのボタン配信ページから貼り付けコードを取得します。こんな感じの HTML スニペットがもらえると思います。

<a href="http://b.hatena.ne.jp/entry/http://sakuratan.biz"
   class="hatena-bookmark-button"
   data-hatena-bookmark-title="さくらたんどっとびーず"
   data-hatena-bookmark-layout="standard"
   title="このエントリーをはてなブックマークに追加">
  <img src="http://b.st-hatena.com/images/entry-button/button-only.gif"
       alt="このエントリーをはてなブックマークに追加"
       width="20" height="20" style="border: none;" />
</a>
<script type="text/javascript"
        src="http://b.st-hatena.com/js/bookmark_button.js"
        charset="utf-8" async="async"></script>

で、このスニペットをそのまま貼っちゃうと何回かに一回のタイミングでページ表示が超遅くなります。

遅くならないようにするには、a タグ部分をボタンを置きたい箇所に、script タグ部分を HTML ファイルの末尾に分けて貼ります。

a タグ部分はこんな感じ。1ページに何個もはてブボタンを置きたい場合は、置きたい箇所それぞれに a タグのみを記述します。

<a href="http://b.hatena.ne.jp/entry/http://sakuratan.biz"
   class="hatena-bookmark-button"
   data-hatena-bookmark-title="さくらたんどっとびーず"
   data-hatena-bookmark-layout="standard"
   title="このエントリーをはてなブックマークに追加">
  <img src="http://b.st-hatena.com/images/entry-button/button-only.gif"
       alt="このエントリーをはてなブックマークに追加"
       width="20" height="20" style="border: none;" />
</a>

script タグは /body の手前あたりに1回だけ記述します。

<script type="text/javascript"
        src="http://b.st-hatena.com/js/bookmark_button.js"
        charset="utf-8" async="async"></script>
</body>
</html>

もしくは jQuery を使っているサイトの場合、script タグを body 末尾に置く代わりに、以下の script タグを head タグに置いてもおkです。こっちの方がコードがスッキリすると思います。

<script type="text/javascript">
$(function() {
    var script = document.createElement('script');
    script.src = 'http://b.st-hatena.com/js/bookmark_button.js';
    script.charset = "utf-8";
    script.async = true;
    $('body').append(script);
});
</script>

これで新型はてブボタンを置いたページの表示がたまに超遅くなる現象が回避できると思います。

何で遅いの?

と、先に対処方法から説明しましたが、ここからは何で遅いかについて。

とりあえずどこで時間がかかってるのか把握する必要があるので、Firebug とニラメッコしながら新型はてブボタンを何度かリロードしてみたところ、新型ボタンで使ってる JavaScript の配信サーバ b.st-hatena.com の応答がたまに遅いと分かりました。

そのためはてブのボタン配信ページから配布している HTML スニペットの http://b.st-hatena.com/js/bookmark_button.js の読み込みでブロッキングが発生し、数秒間ページ表示が止まったようになります。

<a href="http://b.hatena.ne.jp/entry/http://sakuratan.biz"
   class="hatena-bookmark-button"
   data-hatena-bookmark-title="さくらたんどっとびーず"
   data-hatena-bookmark-layout="standard"
   title="このエントリーをはてなブックマークに追加">
  <img src="http://b.st-hatena.com/images/entry-button/button-only.gif"
       alt="このエントリーをはてなブックマークに追加"
       width="20" height="20" style="border: none;" />
</a>
<script type="text/javascript"
        src="http://b.st-hatena.com/js/bookmark_button.js"
        charset="utf-8" async="async"></script>

このスニペットでは script タグに async 属性を指定してますが、async 属性は実行が非同期になるだけで、JavaScript ファイルの読み込みに対してはブロッキングが発生します。ブロッキングが発生するとスクリプトの読み込みが完了するまでブラウザのレンダリングが中断されます。なので bookmark_button.js の読み込みが完了するまでブラウザが固まったような状態になります。

新型はてブボタンのスニペットでは b.st-hatena.com から button-only.gif 画像ファイルも読み込んでいますが、img タグはブロッキングしませんので問題となるのは script タグだけです。

対処方法を考える

原因が分かりましたのでブラウザから http://b.st-hatena.com/js/bookmark_button.js を開いてあーだこーだソースを読んでいくと、setInterval で class=”hatena-bookmark-button” を持つ a タグに iframe を足す処理をポーリングしているのが分かりました。

ポーリングごとに条件を満たす全ての a タグに対してブックマーク数を表示する処理を行っていますので、スニペットの a タグと script タグを分けても問題無さそうです。ということで上の結論となりました。

まあ script タグ部分で発生するブロッキングをページがすべて表示されてから一度だけ発生するように変えただけなのではてブボタンの表示自体が速くなる訳では無いのですが、ページがすべて表示されるまでのイライラがだいぶ解消されると思います。新型置きたい方はぜひお試しを。

// bookmark_button.js のポーリング処理部分あたりの抜粋
extend(B.BookmarkButton, {
    interval: 428, /* Welcome to Shibuya.js! */
    timerId: 0,
    setup: function () {
        if (this.timerId) return;
        var Button = this;
        this.timerId = window.setInterval(function () { Button.tryCreate(); }, this.interval);
        this.tryCreate();
    },
    lastLinkCount: 0,
    tryCreate: function () {
        var links = document.getElementsByTagName('a');
        var linkCount = links.length;
        if (linkCount === this.lastLinkCount) return;
        var buttonLinks = [];
        var classRE = /(?:^|\s)hatena-bookmark-button(?:\s|$)/;
        for (var i = 0; i < linkCount; i++)
            if (classRE.test(links[i].className) &&
                !links[i].getAttribute('data-hatena-bookmark-initialized'))
                buttonLinks.push(links[i]);
        for (var i = 0; i < buttonLinks.length; i++)
            new B.BookmarkButton(buttonLinks[i]);
        this.lastLinkCount = links.length;
    },

11件のコメント »

  1. [...] This post was mentioned on Twitter by azu, はてなブックマーク 新着エントリー, ツイッターのニュース by 法なび, My Rss Feed, moriradio and others. moriradio said: 新型はてなブックマークボタンを速くする | [...]

  2. [...] よるページの表示速度低下を改善する新型はてなブックマークボタンを速くする | さくらたんどっとびーず [...]

  3. [...] 『はてなブックマークボタンの表示の高速化&Bloggerの設置サンプル』 『新型はてなブックマークボタンを速くする』 ありがとうございました! ※やっぱダメだ~、出ない~!! [...]

  4. [...] 『はてなブックマークボタンの表示の高速化&Bloggerの設置サンプル』 『新型はてなブックマークボタンを速くする』 ありがとうございました! ※追記 [...]

  5. [...] 新型はてなブックマークボタンを速くする | さくらたんどっとびーず [...]

  6. このブログにも新型はてブボタン置きたいなーと WordPress のテンプレいじくってたりしてたんですが、ブラクラかと思うぐらいに新型はてブボタンが遅かったので、もうちょいキビキビ動くように最適化してみました。

    コメント by online video editing — 2013 年 12 月 9 日 @ 20:06
  7. Esf Saint Francois Longchamp Besace Longchamp Pas Cher IMGUa Associazione o
    persone potenti di indossare scarpe in erba di fare sport,
    compreso il taglio vicino le attività all’aria aperta,
    in modo da tutti i tipi consigliati. Se è necessario assicurarsi che la fornitura di biomeccanica
    del piede. Longchamp Besace Pliage Le Village Gaulois Saint Francois Longchamp
    BHKel Aiutare i bambini che riempiono la metà vasetto di Jingle Bells ed è un agitatore brocca beads.To più naturale, natura trova reperti che le rocce e le pigne inside.Place posto una goccia di colla sulla parte interna del coperchio e svitare il tappo sul pozzo.
    Per una maggiore sicurezza, avvolgere nastro adesivo attorno al coperchio per migliorare
    la sicurezza reasons.Children Hkan decorare vaso, se vogliono materiali moderni.
    Longchamp Besace Sac Longchamp Pour Homme xJMIY Natura divina Il suo
    governo RuleThis sarebbe come i pagani. Così montagna (nazioni) militrmakt legislativo.

    Sac Longchamps Occasion Sac Cuir Longchamp vgGVz L’intera
    giornata è stata stressante, stress, stressante, io non so come
    Sharp ha tirato fuori il coniglio dal cappello,
    ma devo far pendere il mio cappello a loro quando ho visto Scott farlo, ho
    pensato: Oh, no. E sarà una lunga giornata in ufficio.. Longchamp Sac Pas Cher Saint Francois Longchamp Location OIYDb C’era poco tempo
    per elaborare questa sapienza, perché sono stato mandato per una colazione fatta da Hill (sponsor includono Tyco,
    Allstate e lobbying rapidamente Olanda Knight), dove Rep.
    Jim Cooper, D Tennessee ha annunciato che i consiglieri di Obama successful.The vrtforbausende Div.

    Sac Longchamp Pliage Pas Cher Neuf Longchamps Bandouliere oZJwx Sono davvero sorpreso che il test on-line e datadriven processo
    decisionale non è tagliato tecnologie di forte impatto
    nell’orizzonte immediato. (Colpisce ciò che accade in aula in questo momento molto più di ambienti cooperativi.) Avrei aggiunto di tecnologie più banali come
    le lavagne interattive, feedback del sistema studente, portali studente / genitore, amplificatori audio, e anche giochi
    meno sexy o tecnico PC (senza pun intended) che
    hanno conseguenze molto maggiori rispetto a wiki e Sype e così nelle aule di oggi.
    Prix Sac Longchamp Pliage Longchamp Pliage Pas Cher TBMtF La coppia
    ha poi fatto la loro strada per il ristorante italiano Carluccio, vicino alla sua casa nel
    nord di Londra. Hanno poi ritirarono la zona Marca Hampstead, forse per dessert.
    Longchamp sac Cuir Longchamp Porte Monnaie vwqcI , Divertente ogni volta che si arriva a spendere un sacco di tempo da spendere, e l’uso sapiente di un uomo come
    te,. Shopping online è facile e non ci vuole un sacco di tempo ed energia.

    コメント by Esf Saint Francois Longchamp — 2014 年 8 月 17 日 @ 06:44
  8. [...] そこでこれを高速化?する方法はないかと調べたところ、新型はてなブックマークボタンを速くする | さくらたんどっとびーずが見つかりました。 この記事によると、1ページに複数は [...]

  9. www3.hcs.ohio-state.edu

    新型はてなブックマークボタンを速くする | さくらたんどっとびーず

    トラックバック by www3.hcs.ohio-state.edu — 2014 年 9 月 28 日 @ 14:40
  10. DTlrAsTocBsewjZemZ 6011

    コメント by HbaWpRaMkAsHSnw — 2014 年 10 月 5 日 @ 17:40
  11. Beginning January 4, 2016, all eradicating banks and institutions shall no more accept checks with erasures, changes, or deficiencies, whether or not these inspections are
    countersigned by the authorized signatory/ies.

    コメント by website — 2016 年 12 月 11 日 @ 14:12

この投稿へのコメントの RSS フィード。 TrackBack URI

コメントする

Copyright © 2017 さくらたんどっとびーず | powered by WordPress with Barecity