Hexo: Pjax性能问题的降级处理

Pjax 性能问题的降级处理

问题

对于 Hexo volantis 5 主题，使用的 MoOx/pjax (七年前的包已归档)。

长时间停留后 Pjax 页面卡顿。

连续点击站内链接 50 次以上，Pjax 页面跳转显著变慢。

原因分析

这通常是由于资源重复加载、内存泄漏或事件监听器累积导致的性能衰减。未正确清理资源或内存泄漏导致的累积效应。

Pjax 技术通过 Ajax 局部更新页面内容并配合 History API 修改 URL，避免了整页刷新的性能损耗，但也因此需要特别注意资源管理。

重复请求与缓存问题

pjax 依赖 AJAX 加载 HTML 片段，如果未正确配置缓存策略，每次点击都会重复请求相同资源（如 CSS / JS），累计 50 次后网络请求堆积，响应延迟逐渐增加。

DOM 节点与内存泄漏

pjax 替换页面内容时，若旧 DOM 元素未被彻底清理（尤其是绑定了事件监听器的元素），会导致内存占用持续增长，最终拖慢页面响应速度。

事件监听器累积

如果在 pjax:success 等事件中重复绑定事件（如 click、scroll），而未在 pjax:send 时解绑，会导致事件处理器数量呈指数级增长，触发性能瓶颈。

解决方案

重复请求与缓存问题

window.stop() 关闭请求

document.addEventListener('pjax:send', function (e) {
  window.stop(); // 相当于点击了浏览器的停止按钮
});

DOM 节点与内存泄漏

动态创建的 DOM 元素若被 JavaScript 变量长期引用（如存储在全局数组中），即使已从页面移除也不会被垃圾回收。Pjax 的频繁 DOM 替换会加剧这种泄漏。
检测：使用 Chrome DevTools 的 Memory 面板，对比多次 Pjax 切换前后的内存快照，寻找持续增长的 DOM 节点或 JS 对象。

解决：避免全局缓存动态 DOM，使用 WeakMap / WeakSet 存储临时引用。

事件监听器堆积

Pjax 每次更新会替换 DOM 内容，但原有的事件监听器（如 click、scroll）若未解绑，会持续驻留内存并重复触发。

解决：在 Pjax 生命周期钩子中清理：

document.addEventListener('pjax:send', function () {
  document.removeEventListener("click", MyClickFunction, false)
});

注意事项:

移除监听器时，必须提供与添加监听器时相同的参数，包括事件类型、监听器函数和配置对象或 useCapture 参数。

性能监控与降级控制

实际上，完美的解决方案并不存在。例如 giscus 评论系统存在一个内置的匿名函数监听器没有办法在 Pjax 更新前移除，导致监听器不断累积持续占用浏览器内存。而我们有没有办法完全控制第三方插件的行为。

没有银弹

解决思路是通过监控每次 pjax 请求的实际耗时，当连续多次请求超过阈值时，自动降级为传统页面跳转。以下是具体实现方案：

// 性能监控与降级控制
const performanceMonitor = {
  slowThreshold: 800,     // 慢请求阈值(毫秒)
  slowCount: 0,           // 连续慢请求计数
  maxSlowAllowed: 2,      // 允许的最大连续慢请求数
  requestStartTime: 0,    // 请求开始时间戳

  // 记录请求开始时间
  start() {
    this.requestStartTime = Date.now();
  },

  // 计算请求耗时并判断
  check() {
    const duration = Date.now() - this.requestStartTime;
    
    if (duration > this.slowThreshold) {
      this.slowCount++;
    } else {
      this.slowCount = 0;    // 耗时正常，重置计数
    }
  },
  // 测试结果
  res(){
    // 连续慢请求达到阈值，强制刷新
    if (this.slowCount >= this.maxSlowAllowed) {         
      return true;    // 需要降级
    }
    return false;     // 无需降级
  }
};

var pjax;

document.addEventListener('DOMContentLoaded', function () {
  pjax = new Pjax({
    elements: 'a[href]',
    // 这里的 selectors 需要保证每个页面都含有相同的数目
    selectors: [
      "head title",
      "head meta[name=keywords]",
      "head meta[name=description]",
    ],
    cacheBust: false,   // url 地址追加时间戳，用以避免浏览器缓存
    timeout: 2000,
    debug: true
  });
});


document.addEventListener('pjax:send', function (e) {
  performanceMonitor.start();  // 请求开始计时

  var currentUrl = window.location.pathname;
  var targetUrl = e.triggerElement.href;
        
  if (performanceMonitor.res()){
    window.location.href = targetUrl;
  }
});


document.addEventListener('pjax:complete', function () {
  // 降级控制检测
  performanceMonitor.check()
});