つれずれなるままに… このページをアンテナに追加 RSSフィード Twitter

自身をYuichirouと名乗る謎の男が文字通り「つれれなるままに」書くよくわからん日記。

検索サイトから来た方、こんなページでゴメンナサイ。下にあるフォームに検索ワードを入れて検索すると、情報が得られるかも。

なお、タイトルに打ち間違いはありません。

1000 | 01 | 02 | 03 | 04 |
1504 | 01 | 02 | 03 |
2003 | 10 | 11 | 12 |
2004 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2005 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2006 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2007 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2008 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2009 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2010 | 01 | 02 | 03 | 04 |

2008年11月27日

Re: はてなブックマークコンテンツJavaScript を高速化する 02:50 Re: はてなブックマークのコンテンツの JavaScript を高速化するを含むブックマーク

Reply to はてなブックマークのコンテンツの JavaScript を高速化する - IT戦記


「重い箇所2:HatenaStar.js 1738 行目」で取り上げられていた Hatena.Star.Button.reateButton ですが、Flyweight パターンアイデアと Element.cloneNode() を利用したところ、手元の環境WinXP,Fx3.0)で7.7倍速くなったのでお伝えしておきます。

修正コード

/* Hatena.Star.Button */
Hatena.Star.Button = new Ten.Class({
    createdButton: {},
    createButton: function(args) {
        var src = args["src"];
        if (!this.createdButton[src]) {
          var newimg = document.createElement('img');
          with (newimg.style) {
              cursor = 'pointer';
              margin = '0 3px';
              padding = '0';
              border = 'none';
              verticalAlign = 'middle';
          }
          newimg.src = src;
          this.createdButton[src] = newimg;
        }
        var img = this.createdButton[src].cloneNode(false);
        for (var attr in args) {
            if (attr == "src") continue;
            img.setAttribute(attr, args[attr]);
        }
        return img;
    },
試行12345平均
Before278.774293.522275.969290.839295.314286.884(ms)
After 38.65836.49835.43437.82738.20537.324(ms)

寝る間際にこんな面白いネタをされたせいで、午前3時まで起きてしまいました……今日は講義なくてよかった……

とおりすがりとおりすがり 2008/12/08 01:20 src毎にインスタンスを生成しキャッシュする点は確かにFlyweightパターンに似ていますが
細かいインスタンスを共有して使っているわけではなく
cloneしてカスタマイズしているので、どちらかというと Prototypeパターン かと。

とおりすがりとおりすがり 2008/12/08 01:33 と書いてしまった後で気付いたのですが、
imageの画像実体を共有する点が 「Flyweightパターンのアイデア」、
後半部分がPrototypeパターンぽいという感じですね。

8倍近く高速化されるという事は、
ブラウザ側の同一URLイメージの管理が効率的ではないという事でしょうか。
おそろしいことだ。。。

YuichirouYuichirou 2008/12/08 01:48 そうです、正確にはFlyweightパターンではありません。だからFlyweightパターンの「アイデア」と表現したのです(PrototypeパターンはDOMのElement.cloneNodeを使っただけということもあって失念していました)。

> ブラウザ側の同一URLイメージの管理が効率的ではないという事でしょうか。
どうもFirefoxはその辺アレゲのようです。私はまだ深く調べていないのですが……

Connection: close