eventLoop在执行完microtasks后会判断document是否需要更新;
判断是否有scroll和resize事件,有的话去执行;
判断是否触发mediaquery事件;更新动画并发送事件;
判断是否有全屏操作事件;
执行requestAnimationFrame;
执行IntersectionObserver;
更新页面;
如果还有空闲时间,执行requestIdleCallback;
Mediaquery:
window.matchMedia()方法接口媒体查询字符串作为参数,返回一个MediaQueryList对象;
const mql = window.mediaQuery('(max-width: 720px) and (min-width: 360px)');
MediaQueryList对象主要属性和方法
matches: boolean, 表示是否有匹配结果
media:string, 媒体查询字符串
addEventListener(cb): 当matches属性值发生变化时,会执行回调cb
removeEventListener(cb): 移除事件监听器
IntersectionObserver:
异步观察目标元素在其祖先元素或者顶级视窗中是否可见(可用于做下拉刷新)
只需要定义DOM元素的可视状态发生变化后需要做些什么,以及需要观察哪些元素的可视状态
const intersectionObserver = new IntersectionObserver(callback, options?) ;
callback:
function callback(entries, observer){//...}
entries
:一个IntersectionObserverEntry对象的数组。IntersectionObserverEntry对象用于描述被观察对象的可视状态的变化,拥有以下的属性:
- entry.boundingClientRect:被观察元素的边界信息,相当于被观察元素调用getBoundingClientRect()的结果。
- entry.intersectionRatio:被观察元素与容器元素相交矩形面积与被观察元素总面积的比例。
- entry.intersectionRect:相交矩形的边界信息。
- entry.isIntersecting:一个布尔值,表示被观察元素是否可视,如果是true,则表示元可视,反之则表示不可视。
- entry.rootBounds:容器元素的边界信息,相当于容器元素调用getBoundingClientRect()的结果。
- entry.target:被观察的元素的引用。
- entry.time:当前时间戳。
observer
:当前IntersectionObserver实例的引用。
options
options为一个可选参数,可传入以下属性:
- root:指定容器元素,默认为浏览器窗体元素。容器元素必须是目标元素的祖先节点。
- rootMargin:用于扩展或缩小rootBounds的大小,用法与CSS中margin一致,默认值为默认值是"0px 0px 0px 0px"。
- threshold:number或number数组,用于指定callback回调函数执行的阈值,如传入
[0, 0.2, 0.6, 0.8, 1]
时,intersectionRatio每增加或减少0.2时都会触发回调函数的执行。默认值为0
。需要注意的时,由于回调函数时异步触发的,在回调函数执行时intersectionRatio可能已经和指定的阈值不一致了。
IntersectionObserver实例
IntersectionObserver构造函数会把options中的属性挂载到IntersectionObserver实例上,并赋予IntersectionObserver实例四个方法:
- IntersectionObserver.disconnect():停止监听工作。
- IntersectionObserver.observe(targetElem):开始监听某个元素可视状态的变化。
- IntersectionObserver.takeRecords():返回所有观察目标的IntersectionObserverEntry对象数组。
- IntersectionObserver.unobserve(targetElem):停止监听某个目标元素