V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
OldCarMan
V2EX  ›  前端开发

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

  •  
  •   OldCarMan · 331 天前 · 1030 次点击
    这是一个创建于 331 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    谢谢大家回复,祝大家节日愉快!

    2 条回复    2023-05-21 08:30:40 +08:00
    clue
        1
    clue  
       314 天前
    其实社区已经有很多答案了,我帮你总结下
    https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded

    1. 这个错误本质是在 ResizeObserver 的回调中同步修改影响了触发元素的大小,会重新触发 resize ,相当于一个死循环;想要解决,就避免修改影响触发元素,或者你确保不会无限循环时把修改动作放到下个任务中处理(比如 requestAnimationFrame )
    2. 这个错本身是可以无视的,如果你不监听 window.onerror ,甚至在 console 中都不会出现,只有你用 webpack-dev-server 并开启了 client.overlay 时才影响,可以考虑把它关掉
    OldCarMan
        2
    OldCarMan  
    OP
       313 天前
    @clue 学习了,谢谢告知。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5926 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 02:31 · PVG 10:31 · LAX 19:31 · JFK 22:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.