检测DOM尺寸变化JS API ResizeObserver简介
一、关于MutationObserver提两句
DOM元素的属性或者节点变化的检测，我们可以使用MutationObserver对象，IE11+支持，具体可以参见”聊聊JS DOM变化的监听检测与应用”这篇文章。
但是如果我们想要检测到DOM元素尺寸变化，在过去是没有专门的API的，多借助window对象上绑定resize事件。
但是DOM元素的尺寸变化，有时候窗体的尺寸没有变化也会触发。还有的时候窗体的尺寸变化了，但是DOM元素的尺寸并没有变化，window对象上绑定的resize事件就有些浪费。
由于以上一些原因，一个全新的API就出来了，就是ResizeObserver对象，专门用来观察DOM元素的尺寸是否发生了变化。
这个API游览器支持的非常迅速，我记得去年看的时候才chrome浏览器支持，现在Firefox浏览器也支持了，Safari也确定会支持，估计不用多久就可以使用了。
同时也从侧面说明了，如果一个元素的content box的尺寸没有发生变化，那么也是不会触发ResizeObserver观察执行的，哪怕你改变了元素的padding值，或者改变了元素的border-width边框尺寸，都不会认为是DOM元素尺寸变化了。
其中inlineSize表示内联元素排列方向上的尺寸，等同于CSS逻辑属性inline-size，在默认文档流下表示宽度；blockSize表示块级元素排列方向上的尺寸，等同于CSS逻辑属性block-size，在默认文档流下表示高度。
三、ResizeObserver实际应用案例
- 原生resize行为的检测
例如，有了ResizeObserver，我们就可以检测 的resize拉伸行为了。
比方说 尺寸拉伸的时候，我们可以让边框的颜色不断变化起来。
- 感知交互行为的发生
当元素里面的内容变多或变少的时候，如果没有把高度和宽度定死，则我们可以通过观察元素的尺寸是否有变化，而知道是否有交互行为发生。
例如，我们在使用Ajax发表评论的时候，需要把评论写入到现有的评论列表，通过观察评论容器的尺寸变化，我们就可以认为这个评论交互已经完成，然后脱离具体的业务逻辑完成其他一些需求，例如数据埋点，我们只需要观察特定容器尺寸是否变化，然后发送埋点数据即可。优点是数据埋点无侵入，无需写入到业务逻辑中，非常灵活，也利于日后维护。
- 感知元素是否显示或隐藏
当一个元素使用display:none进行隐藏的时候，也是会触发尺寸变化的，于是也能够被观测到。
Original: https://blog.51cto.com/u_15703284/5432102
Author: 南国易梦
Title: 检测DOn尺寸变化
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/517015/
转载文章受原作者版权保护。转载请注明原作者出处！