浏览器中的一帧（重绘回流与eventloop的关系）

 

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)：停止监听某个目标元素