前端开发入门到实战：计算一个页面内每个模块的曝光时间（停留时间）

本文链接：https://blog.youkuaiyun.com/wewfdf/article/details/97646523

本文介绍了三种计算网页内模块曝光时间的方案。方案一依赖DOM结构，适合统一代码风格；方案二记录用户行为，数据量大但分析困难；方案三采用固定模块尺寸，便于统计停留时间。最终选择了方案三，并提供了实现的demo，以1300px高度为模块，400px曝光为有效，结合滑动和静止时间进行上报。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

产品希望看到投放出去的活动页，用户对其页面内的什么信息比较感兴趣，对什么信息完全不感兴趣。=> 计算页面内每模块的停留时间

第一次听到这个需求，我的大脑开始疯狂运转，然后想到了plan 1, plan 2, plan3…中间还有很多失败想法我已经忘记了，这里方案三是我最终采用的方法。

方案一：根据页面dom将页面分模块

var bodyChildrenLists = $('body').children()
var bodyChildDomLsit = []
var initHeight = 0
for (var i = 0; i < bodyChildrenLists.length; i++) {
    if (bodyChildrenLists[i].tagName !== 'SCRIPT') {
        bodyChildDomLsit.push({
        className: bodyChildrenLists[i].className,
        height: bodyChildrenLists[i].offsetHeight
      })
    }
}

存在的问题：
不同人的代码风格差异性大，该方案不适合这类代码风格

<body>
    <div class="container">
        <div class="header"></div>
        <div class="nav"></div>
        <div class="footer"></div>
    </div>
</body>
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路

这种方式很好，就是，，，如果大家的代码风格很一致的情况下使用比较好。

方案二：计算出用户打开页面后的所有行为

var scrollTop = 0
var time = Date.now()
window._stayStatus = {
// 记录运动轨迹, down > 1 向下移动 down 向上移动, sliderDis 移动距离, time 移动耗时, initDis 初始距离, initTime 初始时间
    moveData: [],
    enterTime: Date.now()
}
var moveData = window._stayStatus.moveData
var currentMoveIndex = 0
function move () {
    var currentTime = Date.now()
    var currentScrollTop = $(window).scrollTop()
    var dis = currentScrollTop - scrollTop
    var disTime = currentTime - time
    // 上一次滑动页面和这次滑动页面的时间差大于100ms，就视作用户在某一个段时间做了停留
    if (disTime > 100) {
        if (moveData[currentMoveIndex] && moveData[cur