批量新建工作项界面卡顿

背景 1 #239669 批量新建工作项界面，上下、左右滚动，发现界面卡住了，影响用户正常使用（详情见附件录屏） 2 需要紧急修复

结论批量新建造成性能的原因

1【大头】不合理的使用 FetchProductsHOC，从而引发高频调用性能不好的GraphQLSelector.getQueryDataByUid，从而造成性能问题。 2 每个单元格使用的 PublishVersionSelect 没有做防止重复请求 3 产品字段&产品模块字段频繁发起请求。

修复代码见 ones-ai-web-common hotfix_20210810，只修复大头问题1。

可沉淀的思考

分析性能的两大杀器（1 了解业务代码；2 Performance 分析性能卡点；）缓存也可从 store 的 reduce 和 selector 下手。过程存在性能问题，那么就可以通过录制 Performance。从 performance 中看出大量的消耗在 getQueryDataByUid

const mapStateToProps = () => { // something

return (state, ownProps) => { const { useExternalProducts, products: externalProducts } = ownProps; if (useExternalProducts) return { products: externalProducts };

const productsFromQuery = GraphQLSelector.getQueryDataByUid(state, ProductDataKey);
const productsWithoutPermission = productsFromQuery ? productsFromQuery.products : [];

return {
  permissionRules: getPermissionRules(productsWithoutPermission),
  productFields: sortByProductFields(ItemSelector.getGlobalProductFields(state)),
  products: getProducts(state, productsWithoutPermission),
};

}; }

那么问题来了：怎么减少 getQueryDataByUid 的调用？

1 createSelector ？没用。 2 减少 FetchProductsHOC 的不合理使用? 成本太多，需要了解业务才能修复。但是更合理的方案。 3 减少 getQueryDataByUid 计算时间。

最后交付紧急原因采用了修复成本很低的 3 方案。

具体方案是方案