关于“ResizeObserver loop limit exceeded”引申的代码/工具/环境问题

rt,最近学前端(vue3+andv)，相信不少人遇到过此类问题，这个问题是在浏览器控制台和 webstorm npm 服务器输出日志都没报错的情况下发生的。我是第一次遇到此类问题。

• 一开始结合网上类似的例子，猜大概率是一个页面渲染绘制时的高宽大小匹配问题，但整个排错流程，只能减法操作，一个个排除，挺麻烦的。

• 之后定位到 vue 工程里对包含 andv 的<a-tab-pane>组件的父级 dom 节点或者<a-tab-pane>本身，进行显示和隐藏时（设置 display=none/block ）时，来回切换几次后就报这个错误（见下）。当然如果对以上操作对象不进行任何显示设置或者不引入<a-tab-pane>组件进行操作，也是不会报错的，所以一开始问题定位在这里（跟<a-tab-pane>的渲染有关）。

• 但之后发现我在进行显示设置的同时，还进行页面样式载入的操作（如下，HelloWorld.vue 里的，使用 document.createElement(link)拼接到 header 里），不过我把上面显示设置的 display 操作从 onload 里面提取出来，放到 appendChild()后面后，问题就没出现了。

• 当我以为问题就这样时，我把代码打包部署到 nginx 里，跑起来后，发现没法复现这个问题。

• 具体错误内容（该错误为浏览器页面弹出显示）：

ResizeObserver loop limit exceeded at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:296:58) 

• 复杂页面用的内容基本是 andv 的 ui 组件
• App.vue 伪代码：

<template> <HelloWorld /> </template> <script setup> import HelloWorld from './components/HelloWorld.vue' </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> 

• HelloWorld.vue

<template> <a-tabs v-model:activeKey="activeKey" class='test-tab'> <a-tab-pane key="1" tab="Tab 1">Tab 1</a-tab-pane> <a-tab-pane key="2" tab="Tab 2" >Tab 2</a-tab-pane> <a-tab-pane key="3" tab="Tab 3">Tab 3</a-tab-pane> </a-tabs> <button @click="onTell" style='width: 50px;height: 50px;background: #42b983'>click</button> </template> <script setup> import {ref} from "vue"; const activeKey = ref('1'); function onTell() { doSomething(); } function doSomething() { removeLink(); createLink('/test.css'); } function removeLink() { hide(); document.querySelectorAll("link[test=aa]").forEach(item => { item.remove() }); } function createLink(path) { const link = document.createElement('link'); link.setAttribute('rel', 'stylesheet'); link.setAttribute('type', 'text/css'); link.setAttribute('test', 'aa'); link.setAttribute('href', path); // link.Onload= () => { // show(); // }; document.head.appendChild(link) show(); } function hide() { document.querySelectorAll(".test-tab").forEach(item => { if (item.style.display === 'block' || item.style.display === '') { item.style.display = 'none' } }); } function show() { document.querySelectorAll(".test-tab").forEach(item => { if (item.style.display === 'none') { item.style.display = 'block' } }); } </script> 

• main.js

import { createApp } from "vue"; import App from "./App.vue"; import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; const app = createApp(App).use(Antd); app.mount("#app"); 

• test.css 随意，空白也行

• 主环境(ws+npm+vue3+adv)

 "ant-design-vue": "^3.2.20", "core-js": "^3.8.3", "vue": "^3.2.13" 

网上很多人都有类似的问题，但类似问题的背后，根本的原因又各种各样，琳琅满目。所以想请教一下各位前端大佬，这类问题要怎么排查好？除了减法操作，逐个排查外，有什么办法能够比较快速的定位到问题所在。另外这大概是什么问题？工具问题（ webpack ）？环境问题？还是组件渲染尺度匹配问题...?

谢谢大家回复，祝大家节日愉快！