浏览器页面性能分析指南（chrome）

1.首先我们需要无痕模式打开一个新的chrome标签，可以按Ctrl+Shift+N开启一个无痕模式的chrome

选择无痕模式是为了不让其他的插件干扰你

我们先写一个html的小例子，里面有一些js代码用来做性能分析的用例

html文件的代码如下：

这里是使用vscode编辑的一个simple.html

里面的script里面有调用一个domore的耗时函数

现在我们可以在这个文件所在目录开启一个server，如下：

 

然后在之前打开的无痕模式下输入地址localhost:3000/simple.html

然后打开开发者工具，选择性能面板

接着点击重新加载按钮就会帮你记录性能了，然后就可以分析，如下：

 

 

我们选择主要那一行，选择评估脚本，然后在下面切换到调用树面板

然后一层层剥开就可以看到耗时的地方在哪里

 

可以发现耗时就是一个叫做domore的函数，因为这里是本地有源代码，并且没有混淆，因此可以清晰看出来，双击这个domore还可以跳转到源代码位置：

 

到此就分析结束了，当然这只是一个简单的例子，实际的场景可能要比这复杂的多