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

[OldCarMan]

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 ）？环境问题？还是组件渲染尺度匹配问题...?

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

[clue]

其实社区已经有很多答案了，我帮你总结下
https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded

1. 这个错误本质是在 ResizeObserver 的回调中同步修改影响了触发元素的大小，会重新触发 resize ，相当于一个死循环；想要解决，就避免修改影响触发元素，或者你确保不会无限循环时把修改动作放到下个任务中处理（比如 requestAnimationFrame ）
2. 这个错本身是可以无视的，如果你不监听 window.onerror ，甚至在 console 中都不会出现，只有你用 webpack-dev-server 并开启了 client.overlay 时才影响，可以考虑把它关掉

[OldCarMan]

@clue 学习了，谢谢告知。