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

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

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

html文件的代码如下：

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

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

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

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

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

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

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

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

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

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

浏览器页面性能分析指南（chrome）相关推荐

前端性能优化必备技能 - 利用 Chrome Dev Tools 进行页面性能分析
背景我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据 ...
前端性能优化之利用 Chrome Dev Tools 进行页面性能分析
背景我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据 ...
【chrome devtools】前端性能分析之chrome devtools的使用前端项目内存性能优化的建议前端浏览器崩溃卡死前端性能分析实战
最近有个项目,静置一段时间,chrome内存一直上涨.就像是这样: 内存会慢慢悄悄的往上涨,最终可以到达2000多M,直至浏览器崩溃卡死.很明显,这应该是内存泄漏了. 但是只知道内存泄漏,并不知道究竟 ...
.NET内存性能分析指南
.NET Memory Performance Analysis 知道什么时候该担心,以及在需要担心的时候该怎么做译者注作者信息:Maoni Stephens - 微软架构师,负责.NET Run ...
Chrome Performance 页面性能分析
一.背景介绍性能优化是前端开发一个非常重要的组成部分,如何更好地进行网络传输,如何优化浏览器渲染过程,来定位项目中存在的问题.Chrome DevTools给我们提供了2种常用方式 Audits和P ...
Python性能分析指南——中
程序使用了多少内存? 现在我们对计时有了较好的理解,那么让我们继续弄清楚程序使用了多少内存.我们很幸运,Fabian Pedregosa模仿Robert Kern的line_profiler实现了一个 ...
DynaTrace Ajax Edition：IE浏览器性能分析工具
DynaTrace AJAX是一个运行在IE浏览器下的免费页面性能分析工具,它可以支持主流的IE6.IE7.IE8浏览器.这款工具正是DynaTrace为进入前端性能分析领域而发布的.您可以利用它来分 ...
前端性能分析工具利器
作者:basinwang,腾讯 PCG 前端开发工程师大型项目容易遇到性能问题,一般来说,当我们遇到性能瓶颈的时候,才会开始去进行相应的分析.分析的方向除了业务本身的特点相关之外,常见的还可以借助一 ...
浅析微前端架构下的Web性能分析
我们都知道Web性能关乎用户体验,进一步影响用户留存.转化率,显然用户体验不友好,最终导致流失.可见Web页面性能对用户和企业而言,可谓举足轻重. 因此,对Web页面的性能分析相关性能优化,是开发者不 ...

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

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

浏览器页面性能分析指南（chrome）相关推荐

最新文章

热门文章