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

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

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

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

  • 但之后发现我在进行显示设置的同时,还进行页面样式载入的操作(如下,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 伪代码:

      
    #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;
    }
  • HelloWorld.vue

      
        Tab 1
        Tab 2
        Tab 3
      
      click
  • 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 )?环境问题?还是组件渲染尺度匹配问题...?
    谢谢大家回复,祝大家节日愉快!
  • 您需要登录后才可以回帖 登录 | 立即注册

    返回顶部