1.埋点曝光的介绍
埋点曝光:intersectionObserver
intersectionObserver:可以用来异步监听目标DOM元素和祖先元素或视口(viewport)的交叉状态,简单来说,可以检测某个元素是否出现在当前视图内,
在intersectionObserver实例中,包含了一些Api
我们常这么用
var observer = new IntersectionObserver(callback,options);
前一个传参为回调函数,后一个为设置,可不传(有默认的属性值)
定义一个io 为 intersectionObserver实例
第一个参数传入一个回调函数,需要注意的是在intersectionObserver中,传入回调函数的参数是一个数组,数组中每个属性都是一个IntersectionObserverEntry对象
调用回调函数中的intersectionRatio属性
这个属性的意思是当视图完全不可见的时候,他的值小于等于0
当视图可见的时候,他的值为1
开始监听(io为可见区域div)
//每当视图层看到这个区域的时候才会触发(监听)
io.observe(埋点DIV);
当目标元素的可见性发生变化的时候,就会触发observer,调用里面的回调函数
2.虚拟节点的介绍
1.createDocumentFragment()方法,是用来创建一个虚拟的节点对象,或者说,是用来创建文档碎片节点。它可以包含各种类型的节点,在创建之初是空的。
2:另外,当需要添加多个dom元素时,如果先将这些元素添加到DocumentFragment中,
再统一将DocumentFragment添加到页面,会减少页面渲染dom的次数,效率会明显提升。
3.如果使用appendChid方法将原dom树中的节点添加到DocumentFragment中时,会删除原来的节点。
实际使用:
循环里面将大量节点放进虚拟节点fargment中
fragment.appendChild(li);
在循环外一次性将虚拟节点放入真实节点中
ul.appendChild(fragment);
这样的好处是页面实际上只发生了一次渲染dom节点
其实在平时看的网站中也会见到这种技术的应用
如:百度图片:
具体表现为:下拉条永远不会拉到底部
完整代码:
//先定义三个DIV.其中第一个DIV为我们刚进入页面的时候看到的,然后中间的DIV是拿来做DOM节点的新增的,最底下的DIV用来做埋点
每次触发埋点曝光的时候,新增div,同时页码+1
这里可执行任意操作,此案例仅用于参考
实现效果