执笔看墨花开💜千千 执笔看墨花开💜千千
首页
  • JavaScript
  • Vue
  • React
  • HTML
  • CSS
  • 算法
  • 工具教程
  • 面试题清单
  • 大前端
  • HTML
  • CSS
  • JS
  • Vue
  • React
  • 零碎
  • 杂言碎语
  • 前端
  • 工具
  • 设计 & CSS
  • 社区 & 平台 & 博客
  • 网站
  • 推荐库
  • 值得一读
  • 分类
  • 标签
  • 归档
  • 心情杂货
  • 友情链接
  • 关于
GitHub (opens new window)

执笔看墨花开

顺其自然
首页
  • JavaScript
  • Vue
  • React
  • HTML
  • CSS
  • 算法
  • 工具教程
  • 面试题清单
  • 大前端
  • HTML
  • CSS
  • JS
  • Vue
  • React
  • 零碎
  • 杂言碎语
  • 前端
  • 工具
  • 设计 & CSS
  • 社区 & 平台 & 博客
  • 网站
  • 推荐库
  • 值得一读
  • 分类
  • 标签
  • 归档
  • 心情杂货
  • 友情链接
  • 关于
GitHub (opens new window)
  • JS文章

  • Vue文章

  • 跨端开发

  • React文章

  • 杂文

    • Webstorm排查插件问题
    • 为什么前端监控要用GIF打点
    • Bilibili短链生成器
    • Typora Bilibili图床插件
    • 防盗链那些事之referer
    • 获取B站SESSDATA
    • serverless+webpack解决node_modules空间大的问题
    • SPA单页应用直接使用百度统计
    • 先concat再去重引发的性能问题
      • 利用引用与时间戳解决一次性能问题
      • 批量新建工作项界面卡顿
      • 大用户数量加载慢分析
    • CSS

    • 前端
    • 杂文
    执笔看墨花开
    2021-07-21

    先concat再去重引发的性能问题

    # 先concat再去重引发的性能问题

    在金山云的组织架构页面,需要生成一棵树,其中一个逻辑是将子部门的uuid附加到父级上,一层层嵌套,最终根节点包含整棵树的部门uuid。可能大部分客户的组织架构都不是很复杂,嵌套比较少,比如浪潮,如果人员和部门数量都非常多,但是都是平铺的。金山云的部门结构就比较复杂,包含大量嵌套,这个性能问题就出来了。

    # 问题表现

    生成了33万条数据,其中大量冗余数据,后面去重后只有551条。由此导致用户进入页面之后,树loading完成了很久,但是却被主进程阻塞,导致性能很差。

    image-20210721150513797

    # 问题代码

    省略一些不影响的代码。主要逻辑是一层层遍历树,然后将自己部门 uuid 合并到祖先节点。

    const transformedDepartmentMapping = {};
    processOnAncestor(
      transformedDepartmentMapping,
      transformedDepartment,
      (parent, current) => {
        const currentDepartments = current.departments || [current.department.uuid];
        parent.departments = (parent.departments || []).concat(currentDepartments);
        descendantMap[parent.id] = uniq(parent.departments);
      }
    );
    
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    问题就出现在6、7、8行。先concat,在进行uniq。还有一个地方忘记去重了,生成了33w条数据。

    # 解决办法

    先判断是否存在再考虑push,而不是先push再去重

    const getUniqParentDepartments = (parent, current, mapping)=>{
      const currentDepartments = current.departments || [current.department.uuid];
      const parentDepartments = parent.departments || [];
      currentDepartments.forEach(v => {
        if (!mapping[v]) {
          parentDepartments.push(v);
        }
      });
      return parentDepartments
    }
    
    parent.departments = getUniqParentDepartments(parent, current, transformedDepartmentMapping);
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    编辑 (opens new window)
    #性能优化
    上次更新: 2021/07/27, 22:42:01
    SPA单页应用直接使用百度统计
    利用引用与时间戳解决一次性能问题

    ← SPA单页应用直接使用百度统计 利用引用与时间戳解决一次性能问题→

    最近更新
    01
    Vue2
    08-26
    02
    JS编程题
    08-26
    03
    前言
    08-26
    更多文章>
    Theme by Vdoing

    © 2021-2021 执笔看墨花开

    粤ICP备2021110554号
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式
    ×