页面性能优化

weixin_490354342025-07-29 17:47

优化点	解决方案	效果
1. ### 双向绑定数量过多竞对设置单元格内部涉及双向绑定的输入组件过多，线上页面最多有88个该和抽屉中的编辑表格一样的组件，共计930+个（按每行最少6个来计算的）双向绑定的组件，严重拖累页面性能。数据计算依据：88 = 竞对信息单元格数，930 = 155（编辑表格行数）6（每行最低的双向绑定组件数）问题截图* ：	将竞对设置的编辑表格改为纯文本展示表格，全局仅维护一个编辑表格，点击对应单元格的编辑按钮后，显示抽屉，将目标单元格数据带入编辑表格进行编辑操作，编辑完成后将修改后的数据同步到目标单元格对应的数据对象中。	通用的编辑表格组件数量由88个缩减到1个，双向绑定组件由930+ 个缩减到20个以内（线上数据每个编辑表格大概2-3行）
2. 高并发重复请求	这是在子组件请求接口，没有做接口缓存，导致调用N次请求。	缓存后，不切换城市只请求一次。
3. 树型选择器渲染函数时间复杂度高线上场景组织节点数为5377个，当选择父级节点时，树型选择器renderTag方法使用了O(n2)的查找父节点遍历方法。该renderTag方法在初始化、点击选择框、选择值、选择框失焦等多个事件中都会触发。问题截图：	使用Map进行缓存，将函数时间复杂度降为O(n) javascript // 优化前：filter+some 二层嵌套循环时间复杂度为O(n2) const allTagList = data.filter((item) => { // 如果 item 有父节点，检查父节点是否选中 if (item.parentId) { // 查找时间为O(n) return !data.some((dataItem) => dataItem.id === item.parentId); } // 如果 item 没有父节点，直接选中 return true; }); // 优化后：Map直接读数时间复杂度为O(n) const allTagList = data.filter((item) => { // 如果 item 有父节点，检查父节点是否选中 if (item.parentId) { // 使用 Map 的 has 方法，时间复杂度 O(1) return !selectedIdMap.has(item.parentId); } // 如果 item 没有父节点，直接选中 return true; });
4. 写法优化。使用Set （n1）查找避免模版直传方法渲染，替换为计算属性