当前位置：首页 > news >正文

前端页面出现问题ResizeObserver loop completed with undelivered notifications.

news 2025/10/13 6:48:04

报错内容

ai说是因为 “某个 ResizeObserver 的回调里又触发了尺寸变化，导致浏览器不得不跳过一帧通知，以避免无限循环。”

开发环境下 webpack-dev-server 会把这条警告通过 error-overlay 弹出来，生产环境不会崩，但看着烦。
在这里插入图片描述

解决方法1——把警告本身吞掉

在入口文件（src/index.js 或 main.ts 最顶部）加 3 行即可，只吞 ResizeObserver 的这条 loop 警告，其它报错照常吃：

// src/index.js
if (typeof window !== 'undefined') {window.addEventListener('error', e =>e.message?.includes('ResizeObserver loop completed with undelivered notifications') && e.preventDefault());
}

但是还是不行

解决方法2——直接关掉 dev-server 的 error-overlay

package.json的 scripts 里把启动命令改成

"start": "webpack serve --client-overlay=false"

还是不行

解决方法3

在 App.vue 文件中加入防抖函数。


<script setup>
import { onMounted, onUnmounted } from 'vue'
import { debounce } from 'lodash'// 防抖处理 ResizeObserver 回调
const debouncedResizeObserver = debounce(() => {// 这里可以添加需要防抖的逻辑
}, 100)// 重写 ResizeObserver 构造函数
onMounted(() => {const OriginalResizeObserver = window.ResizeObserverwindow.ResizeObserver = class extends OriginalResizeObserver {constructor(callback) {const debouncedCallback = debounce(callback, 16) // 约60fpssuper(debouncedCallback)}}
})onUnmounted(() => {// 清理debouncedResizeObserver.cancel()
})
</script>