IT序号网

ResizeObserver API知识解答

developer 2021年05月25日 编程语言 157 0

最近在阅读框架源码的时候发现了这个API,于是经过一番学习之后,觉得这个API在开发过程中可以极大提高性能。优秀的攻城狮对性能不是都追求的嘛。如果是你优秀的话,那就继续阅读下去吧!(本人知识拙劣,有误请指出哈)

文章目录

  1. API介绍
  2. 浏览器兼容性
  3. 用法
  4. 例子
  5. 总结

API介绍

当我们需要知道一个元素的大小变化或者屏幕横竖屏时,我们需要监听window.resize事件或者window.orientationchange方法。由于reize事件会在一秒内触发将近60次,所以很容易在改变窗口大小时导致性能问题。换句话说,window.resize事件通常是浪费的,因为它会监听每个元素的大小变化(只有window对象才有resize事件),而不是具体到某个元素的变化。如果我们只想监听某个元素的变化的话,这种操作就很浪费性能了。

而ResizeObserver API就可以帮助我们:监听一个DOM节点的变化,这种变化包括但不仅限于:

  1. 某个节点的出现和隐藏
  2. 某个节点的大小变化

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


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

MutationObserver知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。