Performance性能提升--vue项目实战

笔记批注：易错 参考文献 重点 面试题

Google浏览器：

1. F12打开控制台，点击Perfaormance(性能)，点击录制，感受到卡顿后或任意一段时间后点击暂停。

2. 操作某功能开始某段你需要优化的进程，比如点击某按钮，跳转某个tab栏等。

3. 点击停止录制。

4. 说明大纲

   • 第一部分：可调整观察的间隔段。
   • 第二部分：观察 “主要” 展开详细进程。
   • 详细进程关注：红色三角标识任务位置
   • 第三部分：根据需要筛选。
   • 进入js文件等进行详细优化。
     

5. 实操演练

   1. 点击结束录制后拖动第一部分时间轴，找到明显波动的区域或红色任务密集的区域，时间段取的越小，第二部分的详细展示部分的任务越少越进程展示更清晰针对性更强；（推荐录制时长别太长，否则半路容易崩，录制需要检查的部分操作即可）

   2. 展开第二部分 主要 。鼠标划过某个任务可以看到详细的耗时。
      
      

   3. 点击该任务。任务下方展开的是不同色块组成的火焰图，且第三部分的摘要栏提出了耗时警告
      

   4. 筛选需要优化的文件；

      • 法1：

        • 第二部分：火焰图
        • 不同的色块，表格不同的文件，找自己开发的需要优化的文件，选中跳转。
        • 选中某一个色块（也就是文件），第三部分摘要展示了耗时，调用的函数来自的文件，点击跳转。
        • 自动跳转来到该文件对应源代码的选中色块（文件）时的函数，这里是deepCopy函数。可进行针对性优化。
        • 
        • 

      • 法2：（我用的不熟正在精进中）

        • 第三部分：自上而下模块
          • 罗列出所有活动。
        • 第三部分：调用树的模块
          • 分为XHR(就是api请求啥的)，样式等耗时情况。
        1. 点击自身耗时或总时间栏可便捷调整升降序。然后展开活动找到眼熟的文件（自己封装的工具文件）

edge浏览器：（待完善）

放在最后的牢骚：
问题：我的老天奶,做一个页面内部就几个tab栏互相切换，其中一条数据一打开，直接卡成ppt。
解决：问题找到，是另一个前端开发暗算小爷我，在这条数据呈现的表格对象中的其中一张表格每次新增数据时循环插入N倍的数据？？还没有做分页！屁大点儿表单一次性发了四五千条数据。
提升：没有报错警告的问题找的我好苦。让我get了性能优化能力，bug查询之力点到了奇怪的地方。