那些不须要你知道的Chrome DevTool-性能优化篇

首先，本文并不会讲述全部的性能优化的瓶颈如何分析并提供解决方案，只能大体讲述查看性能的思路，绝大多数的分析数据都是来自Aduits Panel、 Performance Panel 以及 Memory Panel。

核心目的就是如何提高 JavaScript 执行速度，固然你能够查看官网学会较好落地的解决方案。

若已经点击完了上述的解决方案，大体核心步骤已经完善了，为了避免浪费你的时间，仍是不建议你继续阅读下文了。

问题是什么？

项目维护到了必定阶段，忽然有用户反馈给开发，你的系统使用期间这么卡呢？其实绝大多数，咱们并不清楚用户描述的卡顿究竟是什么意思？是系统加载速度慢呢？仍是用户体验上就是缺乏没有让用户感知网站在运行的提示呢？仍是因为网络问题，致使系统页面请求刷新一直在loading，而超时竟然还设置超高？

若是公司有前端监控系统，仍是蛮方即可以查看部分指标（如首屏加载时间）帮助咱们定位对应的问题点。绝大多数的公司可能只会有若干前端，因此想要有这么一整套完善的监控体系仍是比较困难的，每每不少时候就须要前端自求多福咯。

核心问题是：咱们可否经过现有浏览器工具帮助咱们查看站点的性能？

如何解决问题？

前提

首先确保你的环境是干净的，最好和真正使用的用户是「一致」的环境，而后打开一个无痕页面，输入你的站点地址，顺带打开开发者工具。以上步骤的核心逻辑是，减小后续采集数据期间没必要要的干扰项。

寻求切入点

而后咱们就找「人」请求，给点建议咯。毕竟这么大的站点，须要从那个维度切入如今咱们并无半点思路。而后咱们找到了Aduits Panel，选中想要审查的性能评估点，进行跑分。不用多久，就会有关于各个指标的数据报告出来，并且各项指标下方，都会有部分优化的建议，根据建议修复对应的问题，能够帮助你提升各项指标。

性能查看思路

若站点表现出来问题仅仅是性能问题的话，能够切换到 Performance Panel 点击开启记录功能，而后刷新页面，在关闭记录，等待浏览器解析一会，就能够呈现出记录这段时间的总体性能状况如何。

下述数据来源站点是，官方例子。

若是你不清楚每个内容区域中的每一个面板表明什么，能够查看同事写好的笔记。

咱们能够看到不少的红色条状表标记在内容区域的最上方。标记区域就是出现性能瓶颈区域，咱们根据标记定位到 Main 分区中每一个执行任务，而Main分区主要是能够看到对应时间下主线程的调用栈，也就是火焰图区域。能够选择对应的任务，详情信息区域会展现对应的详情数据。

咱们标记火焰图的右上角的红色标记，选中一个进行查看详情数据。

详情信息模块，大体介绍了该任务的执行时间是不是性能瓶颈，同时会标记当前 Call Stack，帮助咱们定位具体功能源自脚本位置。

若提示为重排重绘问题，能够调用菜单命令唤起 Rendering Panel 勾选 「Paint flashing」，而后在页面进行查看，若查看大量绿色方块在闪烁，则代表存在重排重绘。此类问题产生多半是CSS样式致使，因此须要查询特别CSS属性是否会触发重排重绘，请查看csstriggers。

固然咱们会在详情面板中看到其余三个 tabular 窗口根据不一样的维度去分析整个过程的数据。

若是想看选中区间的函数调用状况，能够查看 Call Tree tabular，这里能够看到触发事件的源头形成后续函数调用以及渲染过程的状况。

左侧会有两个时间：Self Time & Total Time。前者表示此项子任务自身消耗多少时长，后者表示此项子任务包含后续子代消耗时长的总计。

该面板看到的数据都是根据调用栈，从上往下的查看对应调用的堆栈，而后查看函数间的调用逻辑，但若是仅仅想看哪项子任务消耗时长最多，建议使用 Bottom-Up tabular，这里首先看到对应的底层任务，可根据时间排序，并且点开一样能够看到该任务的调用形式，和Call Tree调用栈有点相反的感受。

若是想要查看记录期间任务发生的顺序，能够查看 Event Log tabular，这里能够看到每一个任务执行的具体顺序，以及一样任务是否重复执行的状况。

每个Tabular中都会标明对应函数的位于脚本的位置，能够点击对应连接，工具会帮助你自动跳转到 Source Panel，左侧会出现每行代码执行的时间，你能够查看对应位置是否频繁操做 DOM 定位或是样式致使出现重排重绘问题。

以上都是根据官网提出来的例子，而后结合工具栏的功能进行的如何使用功能讲解的，更多意义上提供了想看什么数据的去哪里找的解决方案。固然可能碰见的问题以及对应的解决方案，官网已经给出，感兴趣能够阅读这里。

固然若是想查看内存泄露等等问题，用到的就是 Memory Panel 能够进行分析网站当下的调用堆栈，以及分析对应时间点下的新内存新增状况，从而进行分析问题。

但官网提供的资料，查阅了两次也不太明白讲述的意思，而且术语那章节看不下去，因此在中途章节出现了术语，理解起来仍是比较模糊的，因此就没有继续分析如何使用 Memory Panel 去分析网站状况，感兴趣能够阅读这里。固然你查阅到讲述较为清楚的文章，欢迎你能够留言给我，不胜感激。