?xml version="1.0" encoding="UTF-8"?
一、判断DOM活跃时长需监听到的情况
1.删除添加DOM
2.样式改变
3.单页应用页面跳转
4.页面变为非活跃状态
5.页面滚动DOM是否在停留可视区内
二、实现方式
?xml version="1.0" encoding="UTF-8"?
三个监听listener事件&两个setTimeout定时器实现监听DOM活动时长的功能
domCollectionListener：收集需要监听的dom/DOM元素的删减
Mutation Observer（变动观察器）是监视DOM变动的接口。当DOM对象树【1】发生任何变动时，Mutation Observer会得到通知。
解析器输出的树是由DOM元素和属性节点组成的
要概念上，它很接近事件。可以理解为，当DOM发生变动会触发Mutation Observer事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说DOM发生变动立刻会触发相应的事件；Mutation Observer则是异步触发，DOM发生变动以后，并不会马上触发，而是要等到当前所有DOM操作都结束后才触发。
Mutation Observer有以下特点：
它等待所有脚本任务完成后，才会运行，即采用异步方式
它把DOM变动记录封装成一个数组进行处理，而不是一条条地个别处理DOM变动。
它即可以观察发生在DOM节点的所有变动，也可以观察某一类变动 — 自定义
MutationObserver所观察的DOM变动（即上面代码的option对象），包含以下类型：
childList：子元素的变动
attributes：属性的变动
characterData：节点内容或节点文本的变动
subtree：所有下属节点（包括子节点和子节点的子节点）的变动
varobserver =newMutationObserver(callback);
observe.observe(target,{{
attributes: true,
childList: true,
characterData: true,
subtree: true,
} });
解决：需要监听DOM元素
initDisplay/inDisplayListener监听属性的变动
除了变动类型，option对象还可以设定以下属性：
attributeOldValue：值为true，则表示需要记录变动前的属性值。
characterDataOldValue：值为true，则表示需要记录变动前的数据值。
attributesFilter：值为一个数组，表示需要观察的特定属性（比如['class', 'str']）。
varobserver =newMutationObserver(callback);
observe.observe(target,{
attributeFilter: ['class', 'style'],
attributeOldValue: true
});
exportconstunDisplay:Object= {
display:['none'],
visibility:['collapse','hidden'],
opacity:[0,'0'],
};
inviewportListener：监听DOM元素是否在viewport中
监听到scroll事件后，调用目标元素（绿色方块）的getBoundingClientRect()方法，得到它对应于视口左上角的坐标，再判断是否在视口之内。这种方法的缺点是，由于scroll事件密集发生，计算量很大，容易造成性能问题。
IntersectionObserver浏览器原生提供的构造函数，接受两个参数：callback是可见性变化时的回调函数callback一般会触发两次。一次是目标元素刚刚进入视口（开始可见），另一次是完全离开视口（开始不可见）构造函数的返回值是一个观察器实例。实例的observe方法可以指定观察哪个 DOM 节点
callback函数的参数（entries）是一个数组，每个成员都是一个IntersectionObserverEntry对象。举例来说，如果同时有两个被观察的对象的可见性发生变化，entries数组就会有两个成员。
var io = new IntersectionObserver(callback, option);
io.observe(document.getElementById('example'));
{
time: 3893.92,
rootBounds: ClientRect {
bottom: 920,
height: 1024,
left: 0,
right: 1024,
top: 0,
width: 920
},
boundingClientRect: ClientRect {
// ...
},
intersectionRect: ClientRect {
// ...
},
intersectionRatio: 0.54,
target: element
}
time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒
target：被观察的目标元素，是一个 DOM 节点对象
rootBounds：根元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回null
boundingClientRect：目标元素的矩形区域的信息
intersectionRect：目标元素与视口（或根元素）的交叉区域的信息
intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
注意：
IntersectionObserver API 是异步的，不随着目标元素的滚动同步触发。
规格写明，IntersectionObserver的实现，应该采用requestIdleCallback()，即只有线程空闲下来，才会执行观察器。这意味着，这个观察器的优先级非常低，只在其他任务执行完，浏览器有了空闲才会执行。
3.监听页面的可见性
对history的popstate事件的监听可感知到浏览器操作导致的路由变化，如前进、后退 对pushState、replaceState方法的增强改写来感知单页面应用切换路由的操作
第一个定时器
设置最长的上报时间间隔，每次发生变动时重新计时，达到最大时间间隔自动发送&重新计时
第二个定时器
曝光时长阈值（单位：秒），当次时间内没有活动事件则累计曝光时长，进入非曝光状态，默认30秒
网友评论