chrome浏览器性能分析

匿名模式

匿名模式可以保证Chrome在一个相对干净的环境下运行。比如安装了许多chrome插件，这些插件可能会影响我们分析性能表现
使用快捷键ctrl + shift + N 即可代码匿名模式下的chrome新标签页

如果想分析移动设备的页面性能，可用CPU控制器来模拟移动端CPU。
1、点击performance
2、点击最右侧设置按钮（⚙），工具栏会展开更多模式，如下图选中CPU 4* slowdown，就能模拟4倍低速CPU

perfomance record

第一行：显示了我们截屏的时间0-3200ms，也就是说我们大概录了3秒的时间
第二行：fps的帧率图，我们可以只观的看到帧率的变化
第三行：cpu使用率图，我们也可以只官的看到
第四行：net,这个忽略不说，应该是网络下载的消耗
第五行：这个是重点，frames,我们可以看到每一帧渲染的图片和它渲染的时间，我们可以一帧一帧的选中，然后在下面的summary中查看具体的消耗，其实我们比较关心的是cpu和gpu的消耗，这个都是一眼可以从summary中看到的，但如果要定位到每个函数，还得使用第六行
第六行：我们可以选中一帧的时间，来查看这一帧里函数的使用情况
第七行：raster
第八行：GPU的消耗，注意这里不仅仅指的是GPU渲染的消耗，还包括了CPU和GPU的交互成本，比如给shader变量赋值
第九行：这个其实就是明细，我们在上面八行中，五论选中哪一行的那个时间段，这里都会有具体的消耗明细
关于第九行：再说一下，sumary是以图的方式告诉你你当前的消耗，bottom_up意思是一些重要的函数调用的时间消耗
六大必读知识：如下图

1：FPS,这里显示的是一个fps绿色柱状张图
2：cpu的时间耗费图，每一帧的cpu的计算时间都会显示出来，如果这里面的黄色部分比较多，就像上面一样，说明每一帧的的计算量挺耗费CPU的
3：net网络图，网络的上传下载耗时
4：Frames,这里放置一张一张的图，如果我们点击某一张，那么下面的6就会解说这一帧干了啥
5：这是一个可以大范围分析的选项，如果选中了这个，就会根据我们在1中选中的帧率范围进行分析，这和4只能分析一帧做了一个拓展
6：对4和5进行分析
可以看到6部分的分析包含以下四个部分
sumary：这个也是一个总结图，可以从总体上去分析，不能定位具体的函数
bottom-Up:代码的执行就是一棵树，从根节点出发，渲染执行整个树，而这个恰恰是从叶子节点开始的，所以这里可以很直观的看到是哪个节点比较耗时，你可以把函数理解为一个一个叶子节点，他们的嵌套就是父节点和子节点的关系,所以一般情况，你想快速知道那个函数比较耗时，就使用这个方式来查看，不需要一层层的往下查找了
call-tree:这个就很常规了，从根节点出发，会把耗时的叶子节点显示出来，我们需要一级一级的拨开，才可以找到耗时的叶子节点
eventLog:时间日志，这里是我比较喜欢用的方式，下面我会对这个进行更细致的解释
事件分析之脚本：

start Time:表示触发这个函数的开始时间，
self Time:表示当前这个函数的实际执行时间，这个相当重要，可以看出来这个函数的是不是真的耗时，结合bottom_up这个排序来看
Total Time:表示当前这个函数的总共执行时间
关于start Time:这个时间就是当前这个函数的执行时间，没什么好说的，注意selfTime+TotalTime 不等于下次的开始时间，我们这里只谈到了脚本的执行时间，浏览器还要重绘和重排还有一些其他的操作呢，而且我们的游戏是基于定时器触发的，不到时间，也不会触发下一帧的渲染，还要包含空闲时间
关于self Time和Total Time都是函数的执行时间，但却有很大不同，函数中存在嵌套，一个函数从第一行执行到最后一行，叫做总共花费时间，但函数中存在着非常多的函数嵌套，这个时间就不能算当前函数的实际执行时间，所以一个函数的实际执行时间，应该排除这个函数里所有嵌套的函数执行的时间，所以一个函数的实际执行时间应该是一个chrome在性能分析的一个最小计算单位，看第一帧，发现selfTime的时间为0，是说这个函数的实际执行时间为0，其实也不完全是，就是说可以忽略不计，
看最上面cpu部分黄色的面积起来了，那CPU一定很辛苦，那接下来就开始查原因吧
第一步：
注意看这张图片，最上面我选择了全部的帧进行的判断，中间用的是main,再往下是eventlog,最后我选择了要查看scripting这一下，scripting这个是脚本执行的意思，就是说我们的代码执行耗时，这里包含两部分，一部分是CPU端的游戏逻辑，一部分是在代码中切换GPU状态的耗时，所以这部分内容是我们最直接核心的性能查看点
注意到下面这个椭圆里只有两个部分，他们都是外部触发的，一个是浏览器触发的动画帧（animationFrameFired），一个是js的定时触发的定时器（timer fired），所以可以想到，这游戏逻辑一帧一帧的触发渲染，其实这里就是源头，最上面包含多少帧，那此处下面就会出现多少个这两种触发器的组合，随便选择一个即可
第二步：我们只分析第一帧，一层一层往下拨开，截图如下：

一个叫timeJiSuan的函数强行入境，它已经不能再继续寻找了，它总的执行时间和实际执行时间都是11.8ms，实锤了，就是它，在吃CPU的计算，点击右侧的链接找到这个函数，截图如下

你看这个函数的内部写了一个10000000次的循环遍历，这能不卡吗，它这一帧的耗时是11.8ms,我们一帧的时间最多才16.6ms,这个函数有点过了啊，那么问题就找到了！！！！
两个发现
1：注意到截图左侧还有个2126.2ms，这个是这个函数总的耗时，这个和录制的时间有关系，也就说从录制开始到结束这个函数总共执行了这么多时间,这个是一帧一帧加起来的
2：一个js普通for循环执行10000000次大概耗时11.8ms

一般像下面这样使用就可以快速定位到性能消耗大的函数了啊

Loading事件
Parse HTML 浏览器执行HTML解析
Finish Loading 网络请求完毕事件
Receive Data 请求的响应数据到达事件，如果响应数据很大（拆包），可能会多次触发该事件
Receive Response 响应头报文到达时触发
Send Request 发送网络请求时触发
Scripting事件
Animation Frame Fired 一个定义好的动画帧发生并开始回调处理时触发
Cancel Animation Frame 取消一个动画帧时触发
GC Event 垃圾回收时触发
DOMContentLoaded 当页面中的DOM内容加载并解析完毕时触发
Evaluate Script A script was evaluated.
Event js事件
Function Call 只有当浏览器进入到js引擎中时触发
Install Timer 创建计时器（调用setTimeout()和setInterval()）时触发
Request Animation Frame A requestAnimationFrame() call scheduled a new frame
Remove Timer 当清除一个计时器时触发
Time 调用console.time()触发
Time End 调用console.timeEnd()触发
Timer Fired 定时器激活回调后触发
XHR Ready State Change 当一个异步请求为就绪状态后触发
XHR Load 当一个异步请求完成加载后触发
Rendering事件
Invalidate layout 当DOM更改导致页面布局失效时触发
Layout 页面布局计算执行时触发
Recalculate style Chrome重新计算元素样式时触发
Scroll 内嵌的视窗滚动时触发
Painting事件
Composite Layers Chrome的渲染引擎完成图片层合并时触发
Image Decode 一个图片资源完成解码后触发
Image Resize 一个图片被修改尺寸后触发
Paint 合并后的层被绘制到对应显示区域后触发

瀑布流（Waterfall）

瀑布流中各项指标含义如下：

Queueing

浏览器将资源放入队列时间，比如：遇到更高优先级的请求或请求并发超过 6 了。

Stalled

因放入队列时间而发生的停滞时间。

Proxy negotiation

与代理服务器协商时间。

DNS Lookup

DNS 解析时间，浏览器需要将域名转换成 IP。

Initial Connection

在浏览器发送请求前，需要建立 HTTP 连接的时间。

SSL

如果网站使用了 HTTPS，这个就是浏览器与服务器建立安全性连接的时间。

Request sent

请求发送的时间。

Waiting (TTFB)

等待服务端返回数据的时间，这个时间受制于服务端处理性能。

Content Download

浏览器下载资源的时间，这个时间受制于文件大小和带宽。

可以看出，就是将一次 HTTP 请求所花的时间做了拆解，从而有助于分析和定位问题所在。

那么该如何减少资源耗时或者提高网页打开速度呢？我想有以下几个方向可以考虑：

1：优化资源顺序，减少首屏打开时间。
2:合理收敛和发散网站的域名，域名太多导致更多的 HTTP 连接无法复用，域名太少导致超过浏览器限制并等待。
3:减少 HTTP 请求数，如合理利用客户端缓存，现在前端也有些工具可以合并 JS/CSS 资源等

浏览器之缓存

浏览器资源缓存分两种，浏览器第一次下载资源以后，会将资源缓存到磁盘上，并且内存中也有一份，当刷新网页时，会从内存中取，当切换网页时，请求的资源会优先从磁盘上找，找不到会从网络上下载
下面以打开百度首页进行举例说明：
第一步打开该网页，其实我这个网页的资源是进行过清理

第二步硬核清理一下资源并重新打开一下网页：
点击资源，右键，在弹出的小界面确定clear,刷新一次界面，结果如下

第三步：在第二步的基础上继续刷新界面
from memory cache
time:0ms

第四步：关闭这个网页，重新打开
from disk cache
time:xxms

跨域设置

版本号49之前的跨域设置
先介绍一下老方法，参考了一些网上的教程，其实直接在打开命令上加–disable-web-security就可以了。
具体做法为：
1.下载并安装好chorme浏览器后在桌面找到浏览器快捷图标并点击鼠标右键的属性一栏。
2.在属性页面中的目标输入框里加上 --disable-web-security 如下图所示：
3.点击应用和确定后关闭属性页面，并打开chrome浏览器。如果浏览器出现提示“你使用的是不受支持的命令标记 --disable-web-security”，那么说明配置成功
版本号49以后的跨域设置
在C盘下新建一个文件夹MyChromeDevUserData
打开chrome属性，将下面这句话放在目标栏的后面

--disable-web-security --user-data-dir=C:\MyChromeDevUserData