自建busuanzi网站计数服务

Sat, 09 Aug 2025 16:00:00 GMT

序言

不蒜子(busuanzi) 是一个广受欢迎的免费网页计数服务，能够轻松实现网站的页面浏览量(PV)和独立访客数(UV)统计。许多基于Hexo的网站都在使用busuanzi来实现访问统计功能，我的博客当前使用的主题是Butterfly，这个主题也是通过集成busuanzi计数器来实现网页计数。

然而，随着使用人数的不断增多，这个由作者为爱发电的免费服务开始出现稳定性问题，访问速度也变得起伏不定。

因此，我决定自己开发一个服务来代替busuanzi，为我的网站提供稳定的计数服务。

技术栈选择

我简单分析了一下，发现busuanzi这个网页计数服务实现起来并不复杂，主要是通过获取访问请求的来源地址来实现PV和UV的计数增长，因此服务的核心就是一个统计接口。

基于这个分析，技术栈的选择也相对明确：

接口开发：由于我最熟悉Java，所以选择使用SpringBoot3和Java17来实现这个接口。（只实现一个接口的话，用SpringBoot感觉有些重，后续有时间可以考虑用Go重写一遍）
数据存储：数据库选择很多，但考虑到服务需要记录的数据主要是网站的PV和UV，对于请求IP等信息并非必须存储，所以我选择使用Redis。Redis对于这类频繁操作的数据处理速度非常快，而且配置好Redis的持久化后，也不怎么需要担心数据丢失问题。如果还是不太放心，可以在增加一个定时任务，定时从Redis中读取数据，存储到关系型数据库当中去，但是我感觉没有必要。

服务分析

前端脚本

为了避免修改Butterfly主题中集成busuanzi的代码（以免在后续主题升级时进行频繁修改），需要让自建服务的接口访问方式和数据显示方式与原版busuanzi完全一致。因此，首先需要分析当前busuanzi的具体工作流程。

访问官网，可以看到官网提示的信息，只需要两行代码即可搞定计数。

1 2	<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv">span>次span>

从这两行代码可以看出，busuanzi通过引入busuanzi.pure.mini.js脚本来修改busuanzi_container_site_pv标签的内容，从而实现计数显示。数据获取流程的核心就在这个脚本中。由于该脚本经过了代码压缩，我使用claude code对其进行了脚本还原，以提高代码可读性。

/**
 * Busuanzi 不蒜子统计脚本
 * 用于网站PV/UV统计显示
 */

var bszCaller, bszTag;
// DOM Ready 功能实现
(function() {
    var interval, 
        domReadyCallback, 
        executeCallbacks,
        isReady = false, 
        readyCallbacks = [];

    // 添加ready回调函数
    ready = function(callback) {
        if (isReady || document.readyState === "interactive" || document.readyState === "complete") {
            return callback.call(document);
        } else {
            readyCallbacks.push(function() {
                return callback.call(this);
            });
        }
        return this;
    };

    // 执行所有等待的回调函数
    executeCallbacks = function() {
        for (var i = 0, length = readyCallbacks.length; i < length; i++) {
            readyCallbacks[i].apply(document);
        }
        readyCallbacks = [];
    };

    // DOM准备完成后的处理
    domReadyCallback = function() {
        if (!isReady) {
            isReady = true;
            executeCallbacks.call(window);
            
            // 移除事件监听器
            if (document.removeEventListener) {
                document.removeEventListener("DOMContentLoaded", domReadyCallback, false);
            } else if (document.attachEvent) {
                document.detachEvent("onreadystatechange", domReadyCallback);
                if (window == window.top) {
                    clearInterval(interval);
                    interval = null;
                }
            }
        }
    };

    // 绑定DOM Ready事件
    if (document.addEventListener) {
        // 现代浏览器
        document.addEventListener("DOMContentLoaded", domReadyCallback, false);
    } else if (document.attachEvent) {
        // IE浏览器兼容
        document.attachEvent("onreadystatechange", function() {
            if (/loaded|complete/.test(document.readyState)) {
                domReadyCallback();
            }
        });

        // IE浏览器特殊处理
        if (window == window.top) {
            interval = setInterval(function() {
                try {
                    if (!isReady) {
                        document.documentElement.doScroll("left");
                    }
                } catch (error) {
                    return;
                }
                domReadyCallback();
            }, 5);
        }
    }
})();

// JSONP 调用器对象
bszCaller = {
    /**
     * 发起JSONP请求获取统计数据
     * @param {string} url - 请求URL
     * @param {function} callback - 回调函数
     */
    fetch: function(url, callback) {
        // 生成随机回调函数名
        var callbackName = "BusuanziCallback_" + Math.floor(Math.random() * 1099511627776);
        
        // 在全局作用域中注册回调函数
        window[callbackName] = this.evalCall(callback);
        
        // 替换URL中的回调函数名
        url = url.replace("=BusuanziCallback", "=" + callbackName);
        
        // 创建script标签进行JSONP请求
        var scriptTag = document.createElement("SCRIPT");
        scriptTag.type = "text/javascript";
        scriptTag.defer = true;
        scriptTag.src = url;
        scriptTag.referrerPolicy = "no-referrer-when-downgrade";
        
        // 将script标签添加到head中
        document.getElementsByTagName("HEAD")[0].appendChild(scriptTag);
    },

    /**
     * 包装回调函数，添加错误处理
     * @param {function} callback - 原始回调函数
     * @returns {function} 包装后的回调函数
     */
    evalCall: function(callback) {
        return function(data) {
            ready(function() {
                try {
                    // 执行回调并清理script标签
                    callback(data);
                    if (scriptTag && scriptTag.parentElement) {
                        scriptTag.parentElement.removeChild(scriptTag);
                    }
                } catch (error) {
                    // 出错时隐藏统计显示
                    bszTag.hides();
                }
            });
        };
    }
};

// 发起统计数据请求
bszCaller.fetch("//busuanzi.ibruce.info/busuanzi?jsonpCallback=BusuanziCallback", function(data) {
    // 更新页面统计数据并显示
    bszTag.texts(data);
    bszTag.shows();
});

// 页面标签操作对象
bszTag = {
    // 支持的统计类型
    bszs: ["site_pv", "page_pv", "site_uv"],

    /**
     * 更新页面中的统计数字
     * @param {object} data - 包含统计数据的对象
     */
    texts: function(data) {
        this.bszs.map(function(type) {
            var element = document.getElementById("busuanzi_value_" + type);
            if (element) {
                element.innerHTML = data[type];
            }
        });
    },

    /**
     * 隐藏所有统计容器
     */
    hides: function() {
        this.bszs.map(function(type) {
            var container = document.getElementById("busuanzi_container_" + type);
            if (container) {
                container.style.display = "none";
            }
        });
    },

    /**
     * 显示所有统计容器
     */
    shows: function() {
        this.bszs.map(function(type) {
            var container = document.getElementById("busuanzi_container_" + type);
            if (container) {
                container.style.display = "inline";
            }
        });
    }
};

虽然对JavaScript不是很熟悉，但这个脚本逻辑相对清晰，不难读懂。以下是该脚本的核心工作流程：

等待浏览器DOM准备
DOM准备完成后，发起JSONP请求
解析请求返回的标签数据，如果请求错误，数据异常就隐藏所有统计容器
获取到计数的数据后，更新携带有ID为busuanzi_value_或busuanzi_container_统计标签的数据，然后修改容器的display属性，从而实现容器和内容的显示

JSONP其实就是GET请求，主要是利用

yw

自建busuanzi网站计数服务

序言

技术栈选择

服务分析

前端脚本