带你了解Chrome性能监测~

480 阅读3分钟

一、问题描述

    使用Chrome浏览器、vue结合element项目,使用el-table出现该问题。表头40列,后台传过来的数据包含项目以及展开项全部数据Array<Object>,每个Object中包含要使用的40度个属性。     通过勾选复选框展开表格项目单项,多次测量取平均值 总耗时 1.9s延迟后界面呈现效果【数据量大时可能延迟更高】。

    涉及公司项目,全部关键部分已模糊处理 使用ScreenToGIf录屏软件

二、排查问题:

    首先查看ELement表格源码,在render方法生成vnode期间输出时长200来毫秒,就感觉是patch新旧vnode对比期间耗时较长(ETable.vue内部有很多cell组件需要渲染,考虑是新生成的组件较多或者是vnode对比耗时)。接下来使用Chrome的performance性能监测,下面是整个流程:

1.录制

请添加图片描述

2.各部分功能

请添加图片描述

3.选中所需时间段分析耗时最长原因

  整体情况:1.7s、JavaScript 0.86s、Rendering 0.5s等。   整体过程:JavaScript -> .... -> Recalculate Style -> Update Layer Tree -> Paint -> ....(阻塞执行)

3.1 Event:mouseenter 鼠标按键摁下触发事件【耗时80%】

  • updateComponent【耗时 60%】
    • render生成新Vnode【耗时 12%】
    • update【耗时 47%】(其中的createELm【耗时 42%】
  • Recalculate Style 【耗时 13%】
  • Layout【耗时 5%】

3.2 Update Layer Tree 【耗时 14%】

3.3 Paint 【耗时 3%】

请添加图片描述

4. 分析Memory内存

选中全部时间段 [ 方便对应时间段分析内存],最上方勾选Memory查看内存消耗;

node节点增长1万个,listener监听增长7000个,堆内存增长20M 请添加图片描述

三、前置技能

浏览器中必须掌握的奇怪知识~

四、解决方案

​ 当前分页数据是一次性请求过来的。

  1. 绘制两个表格(带展开项表格、不带展开项表格)通过复选框选择显示,加上左右切换动画提高用户体验。

    • 缺点:该页面第一次显示或切换分页时,整体页面loading加载时间变长(不过好在有过渡动画)。两个表格使代码冗余。

    • 优点:不需要涉及过多优化上的细节,只需加些过渡动画。

  2. 当点击复选框时,为表格添加loading效果。

    ​ 自认为正确执行顺序:修改allLoading会将watcher.update追加到微任务队列,之后的setTimeout包裹的逻辑代码(页面延迟代码)追加到宏任务;执行完当前代码后会先清空微任务队列,交由渲染引擎渲染页面显示loading,其次才是宏任务队列。

    • 现存疑问:以下代码几乎不会呈现loading加载,为什么???改用 requestIdleCallback渲染出加载效果。

      当在setTimeout打断点却还没有出现加载效果(去除该原因:由于JavaScript执行较快,并且loading是存在表格最外层div,所以会最先被检查到进而更新dom,看上去就相当于loading没有显示)。

    • 缺点:在ui渲染完有空闲时间的情况下才会去执行requestIdleCallback 的回调函数。

      this.allLoading = true; // allLoading控制v-loading
      
      setTimeout(() => {	// 不设置延迟,直接添加到宏任务队列
          debugger; // 代码执行到此处页面还未更新出加载按钮!!!
          //....假设此处代码触发页面卡顿1s
           this.tableData.forEach(item => {
               item.child2 = item.child;
           });
          this.allLoading = false;
      })
      
  3. 改为自定义表头,减少初始化时需要渲染的总的单元格数量,通过最后一列动态控制要渲染的表头数据,默认只展示了 14列。每页展示20条项目,展开后56条

    重构el-table内容插槽总自定义渲染逻辑(if-else从9减到5个)

五、总结

​ 通过chrome性能分析,学习到了很多:通过分析问题一步步接近产生问题原因、巩固浏览器渲染过程等。还有太多的方法不知道做什么用的,底层要学的还有好多。

希望有大佬能够看到我写的这篇,提些意见,也好少走些弯路【后续会持续修正】。 谢谢!!