IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

はてなブックマーク JavaScript 高速化計画 補足

はじめに

id:jkondo さんがブクマしてくれてるのでちょっとだけ補足

追加修正

id:Yuichiro さんのハック

2008-11-27 - つれずれなるままに…
注意:ただ、これ appendChild 時のコストが増えていることが分かったのでちょっと要確認ですね。

id:Yuichiro さんのハックを getImage にも適用
    gotImage: [],
    getImage: function(container) {
        var src = Hatena.Star.Button.getImgSrc(Hatena.Star.Star,container);
        if (!this.gotImage[src]) {
            var newimg = document.createElement('img');
            with (newimg.style) {
                padding = '0'; 
                border = 'none';
            }    
            newimg.src = src; 
            newimg.className = 'hatena-star-star';
            this.gotImage[src] = newimg;
        }    
        return this.gotImage[src].cloneNode(false);
    },   
Hatena.Star.EntryLoader.receiveStarEntries

ダブルループ内で showComentButton をやっているところが重い。
ページ内の Star エントリ数の 2 乗で重くなる。 Star エントリが多いページ(いっぱいはてブされたエントリーページなど)だと、ここがボトルネックになる。

    receiveStarEntries: function(res) {
        var c = Hatena.Star.EntryLoader;
        var entries = res.entries;
        if (!entries) entries = [];

        // ここでハッシュを作る
        if (!c.entryHash) {
            c.entryHash = { };
            for (var i = 0; i < c.entries.length; i ++) {
                c.entryHash[encodeURIComponent(c.entries[i].uri)] = c.entries[i];
            }
        }

        // ダブルループをやめて、ハッシュ検索
        for (var j = 0; j < entries.length; j++) {
            var se = entries[j];
            if (!se.uri) continue;

            var e = c.entryHash[encodeURIComponent(se.uri)];
            if (e) {
                e.bindStarEntry(se);
                entries.splice(j,1);
                if (typeof(e.can_comment) == 'undefined') {
                    e.setCanComment(res.can_comment);
                }
                e.showStars();
                e.showCommentButton();
                break;
            }
        }

        if (res.rks) {
            if (!Hatena.Visitor || typeof(Hatena.Visitor) == 'undefined') {
                Hatena.Visitor = {};
            }
            if (!Hatena.Visitor.RKS) Hatena.Visitor.RKS = res.rks;
        }
    },

簡単に比較できるように、サーバーにスナップショットを置いてみた

高速化前


高速化後