背景

? 公司內(nèi)部搭建了前端監(jiān)控系統(tǒng)Sentry，我把一些項(xiàng)目接入進(jìn)去，一周后發(fā)現(xiàn)上報(bào)數(shù)量最多的事件是ResizeObserver loop limit exceeded。這些事件上報(bào)得太多，給Sentry服務(wù)造成很大壓力，于是研究一番準(zhǔn)備解決之。

問題原因

• element ui中table組件的resize回調(diào)代碼如下

/* istanbul ignore next */
export const addResizeListener = function(element, fn) {
  if (isServer) return;
  if (!element.__resizeListeners__) {
    element.__resizeListeners__ = [];
    element.__ro__ = new ResizeObserver(resizeHandler);
    element.__ro__.observe(element);
  }
  element.__resizeListeners__.push(fn);
};

• 如果在一個(gè)動(dòng)畫幀內(nèi)，ResizeObserver不能處理所有的observations，就會(huì)觸發(fā)這個(gè)ResizeObserver loop limit exceeded。

解決方案

• 阻止table的重繪，例如給所有列都增加width，但是這個(gè)方案不好，無法自適應(yīng)寬度。

  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    <el-table-column prop="address" label="地址" width="180"> </el-table-column>
    <el-table-column prop="address" label="地址" width="180"> </el-table-column>
    <el-table-column prop="address" label="地址" width="180"> </el-table-column>
  </el-table>

• resize時(shí)，給回調(diào)進(jìn)行節(jié)流，使其1幀內(nèi)最多執(zhí)行一次。代碼如下：

  import Vue from 'vue';
  import ElementUI, { Table } from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  import App from './App.vue';
  // 解決 ElTable 自動(dòng)寬度高度導(dǎo)致的「ResizeObserver loop limit exceeded」問題
  const fixElTableErr = (table) => {
      const oldResizeListener = table.methods.resizeListener;
      table.methods.resizeListener = function () {
          window.requestAnimationFrame(oldResizeListener.bind(this));
      };
  };
  // 一定要在Vue.use之前執(zhí)行此函數(shù)
  fixElTableErr(Table);
  Vue.use(ElementUI);
  new Vue({
      el: '#app',
      render: (h) => h(App),
  });

• element ui 在最新的版本中已經(jīng)使用decounce方法修復(fù)了這個(gè)問題，源碼如下：

  /* istanbul ignore next */
  export const addResizeListener = function(element, fn) {
    if (isServer) return;
    if (!element.__resizeListeners__) {
      element.__resizeListeners__ = [];
      element.__ro__ = new ResizeObserver(debounce(16, resizeHandler));
      element.__ro__.observe(element);
    }
    element.__resizeListeners__.push(fn);
  };

總結(jié) 

到此這篇關(guān)于ResizeObserver loop limit exceeded報(bào)錯(cuò)原因及解決方案的文章就介紹到這了,更多相關(guān)ResizeObserver loop limit exceeded報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論