AngularJS+UI-Grid+Bootstrap Tab应用性能问题求助

我之前在维护Angular 1老项目的时候，刚好碰到过几乎一模一样的场景——用Bootstrap UI标签页嵌套UI-Grid，处理无法分页的大体积树形数据，两种渲染方案各有各的坑。结合当时踩过的坑和最终落地的优化方案，给你几个实际有效的方向：

一、解决ng-show多标签卡顿的核心优化 #

ng-show的问题在于所有网格DOM都存在，Angular的脏检查和UI-Grid的事件监听会同时运行，导致资源占用爆炸。可以从这几点入手：

• 延迟初始化非活跃标签页的网格：不要一开始就给所有标签页的网格绑定数据，而是监听标签页的select事件，只有当标签页第一次被激活时，才加载对应的数据并初始化网格。其他未激活的标签页只保留空的网格容器，不执行任何数据绑定逻辑。
• 压榨UI-Grid的性能配置：针对树形结构，一定要开启虚拟滚动（virtualization: true），它会只渲染当前视口内的行，哪怕是几万条数据的树形结构，也只会生成几十行DOM。另外关闭不需要的功能：比如不需要排序就设enableSorting: false，不需要过滤就关enableFiltering；还可以设treeRowHeaderAlwaysVisible: false减少冗余的DOM元素。
• 减少Angular脏检查开销：用Angular 1的一次性绑定语法（::）来绑定网格的配置和数据，比如gridOptions.data = ::treeData（如果数据不会动态更新的话），这样Angular只会检查一次绑定，不会每次脏检查都遍历整个大数组。

二、解决ng-if切换慢+状态丢失的方案 #

ng-if的问题在于每次切换都要重新渲染整个网格，还要恢复之前的状态。可以通过缓存和DOM复用解决：

• 缓存网格状态到全局服务：在标签页被ng-if移除前，把网格的关键状态（展开的节点、滚动位置、列宽）缓存到一个单例服务里。下次激活标签页时，先初始化网格，再从缓存中恢复状态。举个简单的代码示例：

  // 自定义状态缓存服务
  app.service('GridStateCache', function() {
    const cacheStore = {};
    return {
      save: function(tabKey, state) {
        cacheStore[tabKey] = angular.copy(state);
      },
      get: function(tabKey) {
        return cacheStore[tabKey] || {};
      }
    };
  });
  
  // 监听标签页切换事件
  $scope.$on('uibTabsSelect', function(event, activeTab) {
    // 激活标签页时恢复状态
    if (activeTab.isActive && activeTab.needInitGrid) {
      const cachedState = GridStateCache.get(activeTab.tabId);
      $scope[activeTab.gridName].onRegisterApi = function(gridApi) {
        // 恢复展开的节点
        if (cachedState.expandedRows) {
          cachedState.expandedRows.forEach(row => gridApi.treeBase.expandRow(row));
        }
        // 恢复滚动位置
        if (cachedState.scrollTop) {
          gridApi.core.scrollTo(cachedState.scrollTop);
        }
        activeTab.gridApi = gridApi;
      };
      activeTab.needInitGrid = false;
    }
    // 隐藏标签页时缓存状态
    else if (!activeTab.isActive && activeTab.gridApi) {
      const currentState = {
        expandedRows: activeTab.gridApi.treeBase.getExpandedRows(),
        scrollTop: activeTab.gridApi.core.getScrollTop(),
        columnWidths: activeTab.gridApi.columns.map(col => col.width)
      };
      GridStateCache.save(activeTab.tabId, currentState);
    }
  });
  

• 用visibility:hidden替代ng-if：不要完全移除DOM，而是把非活跃标签页的网格容器设为visibility: hidden; position: absolute; left: -9999px，这样DOM仍然存在但不在视口内，同时暂停网格的事件监听和脏检查。切换时只需要把样式改回来，恢复监听，比重新渲染快好几倍。

三、从数据层面优化根源问题 #

如果能从数据入手，性能提升会更明显：

• 树形节点懒加载：如果后端支持，不要一次性加载所有树形数据，只加载根节点，当用户展开某个节点时再异步请求子节点。UI-Grid原生支持树形懒加载，配置treeRowHeaderDef.isTreeRow: function(row) { return row.entity.hasChildren; }和onRegisterApi里的rowExpanded事件来触发子节点加载。
• 提前扁平化树形数据：把嵌套的树形结构转换成扁平化数组，给每个节点加上parentId字段，然后配置UI-Grid的treeRowHeaderDef.parentIdField: 'parentId'，这样UI-Grid处理起来会比嵌套对象高效很多，减少Angular处理复杂对象的开销。

内容的提问来源于stack exchange，提问作者Vip