ResizeObserver API
最近在阅读框架源码的时候发现了这个API,于是经过一番学习之后,觉得这个API在开发过程中可以极大提高性能。优秀的攻城狮对性能不是都追求的嘛。如果是你优秀的话,那就继续阅读下去吧!(本人知识拙劣,有误请指出哈)
文章目录
- API介绍
- 浏览器兼容性
- 用法
- 例子
- 总结
API介绍
当我们需要知道一个元素的大小变化或者屏幕横竖屏时,我们需要监听window.resize事件或者window.orientationchange方法。由于reize事件会在一秒内触发将近60次,所以很容易在改变窗口大小时导致性能问题。换句话说,window.resize事件通常是浪费的,因为它会监听每个元素的大小变化(只有window对象才有resize事件),而不是具体到某个元素的变化。如果我们只想监听某个元素的变化的话,这种操作就很浪费性能了。
而ResizeObserver API就可以帮助我们:监听一个DOM节点的变化,这种变化包括但不仅限于:
- 某个节点的出现和隐藏
- 某个节点的大小变化
ResizeObserver API是一个新的JavaScript API,与IntersectionObserver API非常相似,它们都允许我们去监听某个元素的变化。
实际上,ResizeObserver API使用了观察者模式,也就是我们常说的发布-订阅模式。发布-订阅模式是JavaScript中典型的设计模式,在很多地方都有使用到。如Nodejs的Event模块,Vue的父子组件通信等等。对发布-订阅模式不熟悉的同学可以看看《JavaScript设计模式与开发实践》这本书,对Vue的通信感兴趣的可以看看Vue官网啦。
所以呢,我个人认为,ResizeObserver API的出现是用于替代window.resize方法糟糕的性能的。(不喜亲喷: ()
浏览器兼容性
虽然可以用来替代resize事件。但是它,很新,新到只有部分浏览器支持。
但是不要怂呀,如果想使用它,可以使用其polyfill。最低可以兼容到IE8以上的浏览器啦。所以以后在开发过程中如果想使用resize事件监听DOM的大小变化时,何不尝试一下ResizeObserver API呢?
用法
使用ResizeObserver API非常简单。ResizeObserver是个构造函数。在使用new关键字调用构造函数,返回实例对象时,需要传入一个回调函数,这个回调用于监听实例对象某个DOM节点的变化。如
const myObserver = new ResizeObserver(entries => { entries.forEach(entry => { console.log('大小位置', entry.contentRect) console.log('监听的DOM', entry.target) }) }) myObserver.observe(document.body)
以上,调用实例对象的observe方法,监听整个body节点的变化,当改变窗口大小或者某个DOM节点出现或隐藏时时,就会触发回调。
触发回调后的第一个参数是一个ResizeObserverEntry对象。这里的entry.target是DOM节点本身,而entry.contentRect是一个对象,包含了节点的位置属性,如width, height, left, right, bottom, left, x, y等。
width:指元素本身的宽度,不包含padding,border值
height:指元素本身的高度,不包含padding,border值
top:指padidng-top的值
left:指padding-left的值
right:指left + width的值
bottom: 值top + height的值
x:大小与top相同,y:大小与left相同,不知道具体是指什么
明白了contentRect之后,就可以在使用这个api的时候针对不同场景获取不同的值进行业务的开发。
接着,如果想在监听多个DOM节点的变化,直接在一个实例对象上调用多次observe方法就好了。如
const myObserver = new ResizeObserver(entries => { // 注意,entres是个数组,数组项为每个需要监听的DOM节点 entries.forEach(entry => { console.log('大小位置 contentRect', entry.contentRect) console.log('监听的DOM target', entry.target) }) }) myObserver.observe(document.body) myObserver.observe(document.querySelector('#app'))
然后,实例对象myObserver方法除了有observe方法之外,还有disconnect方法和unobserve方法。
unobserve方法,顾名思义了,就是取消监听某个DOM节点。比如说想在两秒后取消监听document.body,那么这样做就好了
window.setTimeout(() => { myObserver.unobserve(document.body) // 需要接收一个参数 }, 2000)
disconnect方法呢,就是取消对所有节点的监听。比如说想在四秒后取消监听所有节点,那么
window.setTimeout(() => { myObserver.disconnect() // 此时就不会再监听document.body,和#app节点了 }, 4000)
最后,在使用ResizeObserver API的时候,在每次触发元素的大小变化时,会在1s内触发回调蛮多次的。如果想进一步优化性能,可以加上throttle节流函数处理
// throttle需要自行引入哈 const myObserver = new ResizeObserver(throttle(entries => { entries.forEach(entry => { console.log('大小位置 contentRect', entry.contentRect) console.log('监听的DOM target', entry.target) }) }), 500)
这样子就能做到每个500ms触发一次回调啦。是不是很劲(粤语)
总结
好的,关于ResizeObserver API的介绍就到这里了,如果想要一个更加具体的例子,可以到文章结尾处访问参考资料的相关文章
转自https://zhuanlan.zhihu.com/p/41418813
喜欢这篇文章?欢迎打赏~~