如何在无限滚动（infinite scroll）博客页面统计单篇文章浏览量？

• 基于元素可见性的核心统计法
  用浏览器的Intersection Observer API监听文章元素的视口可见状态，设置一个合理的可见阈值（比如50%内容进入视口），当触发条件时就上报浏览量。为了避免同一用户重复统计，用localStorage记录已浏览过的文章ID，同一个ID只上报一次。
  简单代码示例：

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const articleId = entry.target.dataset.articleId;
        if (!localStorage.getItem(`viewed_${articleId}`)) {
          // 发请求给后端统计接口
          navigator.sendBeacon('/api/track-view', JSON.stringify({ articleId }));
          localStorage.setItem(`viewed_${articleId}`, '1');
        }
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.5 });
  
  // 监听所有文章节点
  document.querySelectorAll('.blog-article').forEach(art => observer.observe(art));
  

• 结合用户行为的精准统计
  可以加一层判断：如果用户在某篇文章区域停留超过3秒以上，再统计浏览量，过滤掉快速滚动的无效路过。或者监听文章内的交互（比如选中文本、点击图片），这些行为更能证明用户真的在阅读，此时再上报更精准。

• 后端层面的防重复与防作弊
  光前端去重不够，后端也要做校验：比如24小时内同一个IP对同一篇文章只记一次浏览；如果有用户系统，就用用户ID+文章ID去重；没有的话可以给每个访客生成唯一标识存在Cookie里，用来区分不同用户。另外，还要过滤爬虫请求，通过User-Agent识别常见爬虫，或者结合行为数据判断是否为真实用户。

• 上报优化细节
  用navigator.sendBeacon()代替普通fetch，这个API是异步非阻塞的，就算用户马上关闭页面，也能保证统计请求发送成功，不会丢失数据。

内容的提问来源于stack exchange，提问作者Luu Tien Thai