标签： resizeobserver

发布于

JavaScript内核与高级编程之：`ResizeObserver`：如何高效地监听元素的尺寸变化，避免布局抖动。

各位观众老爷们，大家好！我是今天的主讲人，咱们今天聊点儿实际的，关于前端性能优化的，就是这个ResizeObserver，一个能让你优雅地监听元素尺寸变化，告别布局抖动的神器。 为啥我们需要ResizeObserver？（故事的开端） 在Web开发的世界里，元素尺寸变化是家常便饭。浏览器窗口缩放、元素内容改变、动态插入元素等等，都会引起元素尺寸的改变。而很多时候，我们需要在元素尺寸变化的时候做一些事情，比如重新计算布局、调整样式、更新图表等等。 以前，我们通常用window.onresize事件来监听窗口的尺寸变化，或者用MutationObserver监听DOM树的变化。但这两种方式都有一些缺点： window.onresize：只能监听窗口的尺寸变化，无法监听单个元素的尺寸变化。而且，触发频率很高，容易造成性能问题。 MutationObserver：虽然可以监听DOM树的变化，但需要配置很多参数，而且性能开销也比较大。更要命的是，它监听的是DOM 内容 的变化，而不是 尺寸 的变化，需要自己计算尺寸差异，麻烦！ 更糟糕的是，如果在尺寸变化的回调函数里，又去修改了DOM，很可能引起 …

继续阅读“JavaScript内核与高级编程之：`ResizeObserver`：如何高效地监听元素的尺寸变化，避免布局抖动。”

发布于

JS `ResizeObserver`：监听元素尺寸变化，实现响应式组件

各位观众老爷，大家好！欢迎来到今天的“JS ResizeObserver：监听元素尺寸变化，实现响应式组件”专场。今天咱们不讲那些虚头巴脑的理论，直接上干货，用最接地气的方式，把ResizeObserver这玩意儿给安排明白了！ 一、啥是ResizeObserver？（别慌，不是外星科技） 先别被这高大上的名字吓着，ResizeObserver其实就是个“元素尺寸变化监听器”。简单来说，就是你给它指定一个或者几个元素，它就盯着这些元素，一旦这些元素的尺寸（宽、高）发生了变化，它就立马通知你，然后你就可以根据新的尺寸，干一些你想干的事儿，比如重新排版、调整字体大小、甚至跳个广场舞（误）。 你可以把它想象成一个尽职尽责的门卫，时刻盯着你家的门（元素），一旦有人想偷偷摸摸地改变你家的房子的结构（尺寸），它就立刻敲锣打鼓地通知你！ 二、ResizeObserver能干啥？（应用场景大揭秘） ResizeObserver的应用场景那可真是相当广泛，只要你想根据元素的尺寸变化做点啥，它都能派上用场。 响应式布局： 这是ResizeObserver最常见的应用场景。比如，你想让一个容器里的文字根据容 …

继续阅读“JS `ResizeObserver`：监听元素尺寸变化，实现响应式组件”

发布于

JS `ResizeObserver`：监听元素内容区域尺寸变化与响应式布局

各位观众老爷，早上好/中午好/晚上好！欢迎来到今天的 “JS ResizeObserver：监听元素内容区域尺寸变化与响应式布局” 讲座。今天咱们就来聊聊这个在前端开发中相当实用，但又经常被忽略的小工具——ResizeObserver。 开场白：为什么需要 ResizeObserver？ 想象一下，你在开发一个复杂的Web应用，页面布局需要根据不同设备的屏幕尺寸，甚至元素的自身尺寸进行动态调整。你可能会用到window.addEventListener(‘resize’, …)来监听窗口的resize事件，但这种方式有几个问题： 全局监听，性能损耗： 每次窗口resize，都会触发回调函数，即便你只想监听某个特定元素的尺寸变化。这无疑是对性能的浪费。 元素尺寸变化检测不精准： 有些元素的尺寸变化并非由窗口resize引起，比如CSS动画、JavaScript动态修改、子元素内容撑开等等。window.resize监听不到这些变化。 回调函数执行频率过高： 窗口resize事件触发非常频繁，导致回调函数频繁执行，可能会引发性能问题，甚至卡顿。 这时候，ResizeObserver就派 …

继续阅读“JS `ResizeObserver`：监听元素内容区域尺寸变化与响应式布局”